31
05
Address Book With Bootstrap and jQuery

Hi today let us learn about some interesting of about how to create address book using bootstrap and jquery. We have already learn many tutorial about bootstrap like Gmail style login, Responsive Date range filtering, Bootstrap pretty cool and awesome modal etc. This is really different of creating a address book with bootstrap framework and jQuery slider navigation. Bootstrap is the powerful free open source framework and one of the most widely used for creating websites and web applications. jQuery responsive slide navigation is smooth and smart navigation when user scrolls on one pages websites. Here we used this navigation to point out the particular alphabet to get the list of name that starting with pointing alphabet.

Address Book with Bootstrap and jQuery

HTML to create UI of address book

Address Book

John Doe

Name John Doe
Address 795 Folsom Ave, Suite 600 San Francisco, CA 94107 P: (123) 456-7890
Phone +001 8753-3648-002
Email sampleemail@gmail.com

Script to handle slider navigation


jQuery(document).ready(function() {	
		handleSliderNav();	
		
		});
			var handleSliderNav = function () {
		$('#address-book').sliderNav();
		
		$('#address-book .slider-content ul li ul li a').click(function(e){
			e.preventDefault();
			var contact_card = $('#contact-card');
			//Get the name clicked on
			var name = $(this).text();
			//Set the name
			$('#contact-card .panel-title').html(name);
			$('#contact-card #card-name').html(name);
			//Randomize the image
			var img_id = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
			//Set the image
			$('#contact-card .headshot img').attr('src', 'img/addressbook/'+img_id+'.jpg');
			contact_card.removeClass('animated fadeInUp').addClass('animated fadeInUp');
			var wait = window.setTimeout( function(){
				contact_card.removeClass('animated fadeInUp')},
				1300
			);
		});
	}

By posted on - 31st May 2016