Timeline with 10 Cool Bootstrap jQuery Snippets

This bootstrap snippet called "Timeline with 10 Cool Bootstrap jQuery Snippets" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: timeline,button,switch,collapse,progress bar,progress

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

/* 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;
        }
}
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview

/* 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);
  
});
/************************/

 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jun 28th 2014, 16:25

Views: 7.7K

Rated 5/5 based on 2 reviews