JSFiddle

  • Bootstrap TreeView

    No-Library (pure JS), HTML, CSS, JavaScript

    $(function() {
    
    // delegated handler
    $(".list-group-tree").on('click', "[data-toggle=collapse]", function(){
      $(this).toggleClass('in')
    	$(this).next(".list-group.collapse").collapse('toggle');
      
      // next up ...
  • Show title in Bootstrap-Select without empty element

    No-Library (pure JS), HTML, CSS, JavaScript

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
    
    
    <select class="selectpicker" multiple data-max-options="1" title="">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </select>
    
  • Bootstrap 3.3.7 Skeleton #6 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
      Fork here:
      <a href='https://jsfiddle.net/KyleMit/t6wjox0s/'>
        Bootstrap 3.3.7 Skeleton
      </a>
    </div>
  • Bootstrap 3.3.7 Skeleton

    No-Library (pure JS), HTML, CSS, JavaScript

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
      Fork here:
      <a href='https://jsfiddle.net/KyleMit/t6wjox0s/'>
        Bootstrap 3.3.7 Skeleton
      </a>
    </div>
  • Bootstrap Panels

    No-Library (pure JS), HTML, CSS, JavaScript

    // all tabe panes visible (in)
    // we only toggle their contents
    
    // trigger via nav-tabs or tab panel-title
    
    // 3 things to update ...
  • Stacked Stacks #2 is the latest revision

    jQuery 2.2.4, HTML, CSS, JavaScript

    $(function() {
      $('#container').highcharts({
    		title: {
        	text: "Half Marathon finish times by Gender/Age"
        },
    		xAxis: {
          categories: ['1:00', '1:30', '2:00 ...
  • Highcharts Time

    No-Library (pure JS), HTML, CSS, JavaScript

    var dataRaw = [ 
    	[Date.UTC(2012, 5, 22, 8, 15), 3], 
      [Date.UTC(2012, 5, 22, 8, 20), 7], 
      [Date.UTC ...
  • DataTables Column Alignment

    jQuery 2.2.4, HTML, CSS, JavaScript

     $('.datatable').DataTable({
       paging: false,
       searching: false,
       info: false,
       //scrollCollapse: true,
       //"scrollY": 400,
       "scrollX": true,
       //autoWidth: false
     });
     
     
     
    // https://stackoverflow.com/questions ...
  • jQuery Upsert

    jQuery 2.2.4, HTML, CSS, JavaScript

    $.fn.upsert = function(selector, htmlString) {
    	// upsert - find or create new element
      // find based on css selector   	https://api.jquery.com ...
  • State Driven Buttons

    No-Library (pure JS), HTML, CSS, JavaScript

    // on layout.js
    $savebuttons = $('.non-idempotent-action')
    
    $savebuttons.click(function() {
    		this.enabled = false;
    });