Bootstrap snippet: Timeline with 10 Cool Bootstrap jQuery Snippets

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: timeline,button,switch,collapse,progress bar,progress



<div class="container bootstrap snippet"> <h1 class="text-center text-success">10 Useful Bootstrap Tricks <p class="lead">Bootstrap 3.1 and jQuery Snippets</p> </h1> <hr> <ul class="timeline"> <!--shake effect--> <li> <div class="timeline-badge info"><i class="glyphicon glyphicon-hand-left"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Shake Button</h2> <p><small class="text-muted">Click to make it say no</small></p> </div> <div class="timeline-body"> <h3></h3> <button class="btn btn-primary btn-lg" id="shaker">Click Me</button> </div> </div> </li> <!--progress bar--> <li class="timeline-inverted"> <div class="timeline-badge"><i class="glyphicon glyphicon-time"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Progress Bar</h2> <p><small class="text-muted">A working jQuery example</small></p> </div> <div class="timeline-body"> <h3></h3> <div class="progress progress-striped"> <div class="progress-bar bar" style="width:0%;"></div> </div> </div> </div> </li> <!--switch button--> <li> <div class="timeline-badge success"><i class="glyphicon glyphicon-hand-up"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Switch Button</h2> <p><small class="text-muted">Toggle off and on state</small></p> </div> <div class="timeline-body"> <h3></h3> <div class="btn-group btn-toggle"> <button class="btn btn-lg btn-default">ON</button> <button class="btn btn-lg btn-primary active">OFF</button> </div> </div> </div> </li> <!--pagination--> <li class="timeline-inverted"> <div class="timeline-badge info"><i class="glyphicon glyphicon-fast-forward"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Pagination</h2> <p><small class="text-muted">Paging for sections or paragraphs</small></p> </div> <div class="timeline-body"> <h3></h3> <div id="pages"> <div class="page"> Page 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue. </div> <div class="page"> Page 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue. </div> <div class="page"> Page 3 - More m ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue. </div> <div class="page"> Page 4 - Final ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue. </div> </div> <ul class="pagination" id="myPager"></ul> </div> </div> </li> <!--dropdown button as select--> <li> <div class="timeline-badge info"><i class="glyphicon glyphicon-tasks"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Select Button</h2> <p><small class="text-muted">Turn a Dropdown into a select list</small></p> </div> <div class="timeline-body"> <h3></h3> <div class="btn-group"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select an Item <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Item I</a></li> <li><a href="#">Item II</a></li> <li><a href="#">Item III</a></li> <li><a href="#">Item IV</a></li> <li><a href="#">Item V</a></li> <li class="divider"></li> <li><a href="#">Other</a></li> </ul> </div> </div> </div> </li> <!--expanding input field --> <li class="timeline-inverted"> <div class="timeline-badge primary"><i class="glyphicon glyphicon-arrow-right"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Expanding Input (CSS only)</h2> <p><small class="text-muted">Grows wider when clicked</small></p> </div> <div class="timeline-body"> <h3></h3> <input class="form-control input-md" id="myInput" placeholder="Click here" type="text"> </div> </div> </li> <!--email validation --> <li> <div class="timeline-badge info"><i class="glyphicon glyphicon-envelope"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Pop-up Email Validation</h2> <p><small class="text-muted">Live as-you-type validator</small></p> </div> <div class="timeline-body"> <h3></h3> <form id="emailForm"> <div class="form-group"><input class="form-control email" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user@gmail.com)" placeholder="Enter your email" type="text"></div> </form> </div> </div> </li> <!--caps lock test --> <li> <div class="timeline-badge green"><i class="glyphicon glyphicon-font"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Caps Lock Check</h2> <p><small class="text-muted">As-you-type for case sensitive passwords</small></p> </div> <div class="timeline-body"> <h3></h3> <form> <div class="form-group"><input class="form-control" data-placement="top" data-trigger="manual" data-title="Caps lock is on!" placeholder="Password" type="password"></div> </form> </div> </div> </li> <!--collapse tabs into dropdown --> <li class="timeline-inverted"> <div class="timeline-badge danger"><i class="glyphicon glyphicon-folder-close"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Collapse Tabs</h2> <p><small class="text-muted">Overflow extra tabs into a Dropdown</small></p> </div> <div class="timeline-body"> <h3></h3> <ul class="nav nav-tabs" id="tabs"> <li><a href="#tab0" data-toggle="tab">Tab0</a></li> <li><a href="#tab1" data-toggle="tab">Tab1</a></li> <li><a href="#tab2" data-toggle="tab">Tab2</a></li> <li><a href="#tab3" data-toggle="tab">Tab3</a></li> <li><a href="#tab4" data-toggle="tab">Tab4</a></li> <li><a href="#tab5" data-toggle="tab">Tab5</a></li> <li><a href="#tab6" data-toggle="tab">Tab6</a></li> <li><a href="#tab7" data-toggle="tab">Tab7</a></li> <li><a href="#tab8" data-toggle="tab">Tab8</a></li> <li id="lastTab"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> More <span class="caret"></span> </a> <ul class="dropdown-menu" id="collapsed"> </ul> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="tab0">Tab 0 content...</div> <div class="tab-pane" id="tab1">Tab 1 content...</div> <div class="tab-pane" id="tab2">Tab 2 content...</div> <div class="tab-pane" id="tab3">Tab 3 content...</div> <div class="tab-pane" id="tab4">Tab 4 content...</div> <div class="tab-pane" id="tab5">Tab 5 content...</div> <div class="tab-pane" id="tab6">Tab 6 content...</div> <div class="tab-pane" id="tab7">Tab 7 content...</div> <div class="tab-pane" id="tab8">Tab 8 content...</div> </div> </div> </div> </li> <!--loading button --> <li> <div class="timeline-badge warning"><i class="glyphicon glyphicon-time"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h2 class="timeline-title">Loading Button</h2> <p><small class="text-muted">Add state to your buttons</small></p> </div> <div class="timeline-body"> <h3></h3> <button type="button" id="loadingBtn" data-loading-text="Loading..." class="btn btn-lg btn-primary"> Click Me </button> </div> </div> </li> </ul> <hr> </div>
/* expanding input CSS only */ #myInput {width:130px} #myInput:focus {width:100%;} .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 50%; margin-left: -1.5px; } .timeline > li { margin-bottom: 20px; position: relative; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li > .timeline-panel { width: 46%; float: left; border: 1px solid #d4d4d4; border-radius: 2px; padding: 20px; position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .timeline > li > .timeline-badge { color: #fff; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 50%; margin-left: -25px; background-color: #999999; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-badge.primary { background-color: #2e6da4 !important; } .timeline-badge.success { background-color: #3f903f !important; } .timeline-badge.warning { background-color: #f0ad4e !important; } .timeline-badge.danger { background-color: #d9534f !important; } .timeline-badge.info { background-color: #5bc0de !important; } .timeline-title { margin-top: 0; color: inherit; } .timeline-body > p, .timeline-body > ul { margin-bottom: 0; } .timeline-body > p + p { margin-top: 5px; } @media (max-width: 767px) { ul.timeline:before { left: 40px; } ul.timeline > li > .timeline-panel { width: calc(100% - 90px); width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); } ul.timeline > li > .timeline-badge { left: 15px; margin-left: 0; top: 16px; } ul.timeline > li > .timeline-panel { float: right; } ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } }
/* shake */ jQuery.fn.shake = function(intShakes, intDistance, intDuration) { this.each(function() { $(this).css("position","relative"); for (var x=1; x<=intShakes; x++) { $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4))) .animate({left:intDistance}, ((intDuration/intShakes)/2)) .animate({left:0}, (((intDuration/intShakes)/4))); } }); return this; }; $("#shaker").click(function(){ $("#shaker").shake(3,7,800); }); /**********************/ /* progress bar */ var progress = setInterval(function() { var $bar = $('.bar'); if ($bar.width()==400) { clearInterval(progress); $bar.width(0); } else { $bar.width($bar.width()+40); } $bar.text($bar.width()/4 + "%"); }, 800); /**********************/ /* toggle switch button */ $('.btn-toggle').click(function() { $(this).find('.btn').toggleClass('active'); if ($(this).find('.btn-primary').size()>0) { $(this).find('.btn').toggleClass('btn-primary'); } if ($(this).find('.btn-danger').size()>0) { $(this).find('.btn').toggleClass('btn-danger'); } if ($(this).find('.btn-success').size()>0) { $(this).find('.btn').toggleClass('btn-success'); } if ($(this).find('.btn-info').size()>0) { $(this).find('.btn').toggleClass('btn-info'); } $(this).find('.btn').toggleClass('btn-default'); }); /************************/ /* pagination */ $.fn.pageMe = function(opts){ var $this = this, defaults = { perPage: 7, showPrevNext: false, numbersPerPage: 1, hidePageNumbers: false }, settings = $.extend(defaults, opts); var listElement = $this; var perPage = settings.perPage; var children = listElement.children(); var pager = $('.pagination'); if (typeof settings.childSelector!="undefined") { children = listElement.find(settings.childSelector); } if (typeof settings.pagerSelector!="undefined") { pager = $(settings.pagerSelector); } var numItems = children.size(); var numPages = Math.ceil(numItems/perPage); pager.data("curr",0); if (settings.showPrevNext){ $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager); } var curr = 0; while(numPages > curr && (settings.hidePageNumbers==false)){ $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager); curr++; } if (settings.numbersPerPage>1) { $('.page_link').hide(); $('.page_link').slice(pager.data("curr"), settings.numbersPerPage).show(); } if (settings.showPrevNext){ $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager); } pager.find('.page_link:first').addClass('active'); if (numPages<=1) { pager.find('.next_link').hide(); } pager.children().eq(1).addClass("active"); children.hide(); children.slice(0, perPage).show(); pager.find('li .page_link').click(function(){ var clickedPage = $(this).html().valueOf()-1; goTo(clickedPage,perPage); return false; }); pager.find('li .prev_link').click(function(){ previous(); return false; }); pager.find('li .next_link').click(function(){ next(); return false; }); function previous(){ var goToPage = parseInt(pager.data("curr")) - 1; goTo(goToPage); } function next(){ goToPage = parseInt(pager.data("curr")) + 1; goTo(goToPage); } function goTo(page){ var startAt = page * perPage, endOn = startAt + perPage; children.css('display','none').slice(startAt, endOn).show(); if (page>=1) { pager.find('.prev_link').show(); } else { pager.find('.prev_link').hide(); } if (page<(numPages-1)) { pager.find('.next_link').show(); } else { pager.find('.next_link').hide(); } pager.data("curr",page); if (settings.numbersPerPage>1) { $('.page_link').hide(); $('.page_link').slice(page, settings.numbersPerPage+page).show(); } pager.children().removeClass("active"); pager.children().eq(page+1).addClass("active"); } }; $('#pages').pageMe({pagerSelector:'#myPager',childSelector:'.page',showPrevNext:true,hidePageNumbers:false,perPage:1}); /************************/ /* dropdown as select */ $(".dropdown-menu li a").click(function(){ var selText = $(this).text(); $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>').dropdown('toggle'); return false; }); /************************/ /* email validation */ $.fn.goValidate = function() { var $form = this, $inputs = $form.find('input:text, input:password'); var validators = { email: { regex: /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/ } }; var validate = function(klass, value) { var isValid = true, error = ''; if (!value && /required/.test(klass)) { error = 'This field is required'; isValid = false; } else { klass = klass.split(/\s/); $.each(klass, function(i, k){ if (validators[k]) { if (value && !validators[k].regex.test(value)) { isValid = false; error = validators[k].error; } } }); } return { isValid: isValid, error: error } }; var showError = function($input) { var klass = $input.attr('class'), value = $input.val(), test = validate(klass, value); $input.removeClass('invalid'); if (!test.isValid) { $input.addClass('invalid'); if(typeof $input.data("shown") == "undefined" || $input.data("shown") == false){ $input.popover('show'); } } else { $input.popover('hide'); $input.parent().removeClass('has-error').addClass('has-success'); } }; $inputs.keyup(function() { showError($(this)); }); $inputs.on('shown.bs.popover', function () { $(this).data("shown",true); }); $inputs.on('hidden.bs.popover', function () { $(this).data("shown",false); }); $form.submit(function(e) { $inputs.each(function() { if ($(this).is('.required')) { //showError($(this)); /* rem comment to enable initial display of validation rules */ } }); if ($form.find('input.invalid').length) { e.preventDefault(); alert('The form does not validate!'); } }); return this; }; $('#emailForm').goValidate(); /************************/ /* caps lock check */ $('[type=password]').keypress(function(e) { var $password = $(this), tooltipVisible = $('.tooltip').is(':visible'), s = String.fromCharCode(e.which); // check if capslock is on. if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) { if (!tooltipVisible) $password.tooltip('show'); } else { if (tooltipVisible) $password.tooltip('hide'); } // hide the tooltip when moving away from the password field $password.blur(function(e) { $password.tooltip('hide'); }); }); /************************/ /* collapse tabs */ var autocollapse = function() { var tabs = $('#tabs'); var tabsHeight = tabs.innerHeight(); if (tabsHeight >= 50) { while(tabsHeight > 50) { //console.log("new"+tabsHeight); var children = tabs.children('li:not(:last-child)'); var count = children.size(); $(children[count-1]).prependTo('#collapsed'); tabsHeight = tabs.innerHeight(); } } else { while(tabsHeight < 50 && (tabs.children('li').size()>0)) { var collapsed = $('#collapsed').children('li'); var count = collapsed.size(); $(collapsed[0]).insertBefore(tabs.children('li:last-child')); tabsHeight = tabs.innerHeight(); } if (tabsHeight>50) { // double chk height again autocollapse(); } } }; autocollapse(); // when document first loads /************************/ /* loading button */ $('#loadingBtn').click(function () { var btn = $(this); btn.button('loading'); // perform ajax processing here is reset button when complete setTimeout(function() { btn.button('reset'); }, 2000); }); /************************/
Dey-Dey

Timeline with 10 Cool Bootstrap jQuery Snippets

Dey-Dey
  Jun 28th 2014, 16:42
6.0K Views