JSFiddle

  • patterns - field states

    patterns - field states

    <h3>My Form</h3>
    
    
    <form class="formElements" id="example2">
        <div class="form-group">
            <label for="example2-normal">Normal state</label>
            <input type="text" class="form-control" id="example2-normal" name="example2-normal" required>
        </div>
        <div class="form-group">
            <label for="example2-focused">Focused state</label>
            <input type="text" class="form-control" id="example2-focused" name="example2-focused" required>
        </div>
        <div class="form-group">
            <label for="example2-success">Success/Valid state</label>
            <input type="text" class="form-control valid" id="example2-success" name="example2-success" value="awesome" required>
        </div>
        <div class="form-group">
            <label for="example2-error">Error State</label>
            <input type="text" class="form-control error" id="example2-error" name="example2-error" value="uh-oh" required>
                <label for="example2-normal" generated="true" class="error"><span></span>This field is required.</label>
        </div>
       
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  • Superfish Accessibility

    Adding basic acessibility to superfish menu.

            $(document).ready(function(){ 
    		$("ul.sf-menu").superfish({ 
    			hoverClass: 'sfHover', 
    			pathClass: 'overideThisToUse', 
    			pathLevels: 1, 
    			delay: 800, 
    			animation: {opacity:'show'}, 
    			speed: 'normal', 
    			autoArrows ...
  • Scene7 GUI #10 is the latest revision

    Scene7 GUI for image manipulation

    $('#go').on('click', function () {
        var orig = $('#inputIMG').val(),
            width = $('#width').val(),
            height = $('#height').val(),
            quality = $('#quality').val(),
            unsharp = $('#unsharp').val ...
  • Filtering Accessibility

    Filtering Accessibility

    // simple filtering function
    $('#filter').on('change', function(){
        var val=$(this).val(),
            text= $(this).find("option:selected").text(),
            status = "Results filtered ...
  • show/hide #10 is the latest revision

    show/hide

    $("#expand").on('click', function(){
        
        // toggle #panel aria-expanded
        $("#expand").attr('aria-expanded', $('#expand').attr('aria-expanded') == 'true' ? 'false' : 'true');
        
        // timing will be between ...
  • Accordion

    Accordion pattern

    <div id="page" class="container">
      <div class="row">
        <h3>Accordion</h3>
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading">
    
              <a role="tab" id="headingOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <h4 class="panel-title">
                      Collapsible Group Item #1</h4>
                <span class="plus accordion-toggle">+</span>
                <span class="minus accordion-toggle">&ndash;</span>
              </a>
    
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf ...</div></div></div></div></div></div>
  • Contextual help #4 is the latest revision

    Contextual help

    $(function () {
        $('[data-toggle="popover"]').popover()
    });
    
    // add close button to popover
        $("[data-toggle=popover]").on('click', function(e) {
            var $this = $(this);
            $(this).next ...
  • Filter/sort table demo #19 is the latest revision

    Filter/sort table

    //sort table w/ tinysort - pulled from: http://tinysort.sjeiti.com/#sorting-tables
    
    var table = document.getElementById('backpackGrid'),
        tableHead = table.querySelector('thead ...
  • pattern - buttons

    pattern - buttons

    <div class="half">
      <div class="section">
        <button class="btn btn-transaction">Check Out</button>
        <div class="subhead">Transactional button</div>
      </div>
      <div class="section">
        <button class="btn-transaction btn-large btn">Add to Bag</button>
        <div class="subhead">Large transactional button</div>
    
      </div>
    </div>
    
    <div class="half">
      <div class="section">
        <button class="btn btn-green">Write a Review</button>
        <div class="subhead">Primary non-transactional</div>
      </div>
      <div class="section">
        <button class="btn btn-white-green" type="button">Edit My Account</button>
        <div class="subhead">Secondary Button ...</div></div></div>
  • jquery ui tabs - more tab

    jquery ui tabs - show more tab

    /*!
     * plusTabs version 1.0
     *
     * Author: Jason Day @iamjasonday
     *
     * (c) 2012, Jason Day
     *
     * Dual licensed under the MIT and GPL licenses ...