31
05Address 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.
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 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 Thirumani Raj posted on - 31st May 2016
Social Oauth Login
Personalized Map Navigation
Online Image Compression Tool
Image CompressionAdvertisement
Recent Posts
- « Personalized Map Navigation
- « Remjs solves the problem of mobile terminal adaptation
- « Picture centered vertically
- « Colorful Diwali Wishes Share Via Whatsapp and Facebook
- « Get City and State by ZipCode Using Google Map Geocoding API