JSFiddle

  • HTML datalist

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

    <label>
     Sex:
     <input name=sex list=sexes>
    </label>
    <datalist id=sexes>
     <label>
      or select from the list:
      <select name=sex>
       <option value="">
       <option>Female
       <option>Male
      </select>
     </label>
    </datalist>
          
          <p>Select the songs from that you would like on your Act II ...</p>
  • Grid examples

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

    <p>Examples from <a href="http://gridbyexample.com/examples/">http://gridbyexample.com/examples/</a></p>
    <div class="wrapper ex1">
      <div class="box a">A</div>
      <div class="box b">B</div>
      <div class="box c">C</div>
      <div class="box d">D</div>
      <div class="box e">E</div>
      <div class="box f">F</div>
    </div>
    <div class="wrapper ex2">
      <div class="box a">A</div>
      <div class="box b">B</div>
      <div class="box c">C</div>
      <div class="box d">D</div>
      <div class="box e">E</div>
      <div class="box f">F</div>
    </div>
    <div class="wrapper ex3">
      <div class="box a">A</div>
      <div class="box b">B ...</div></div>
  • Modal Form overlay idea

    jQuery 1.11.0, HTML, CSS, JavaScript

    var $modalMask = {};
    var $modalFrame = {};
    var $modalContent = {};
    
    var toggleModal = function() { 
        $modalMask.toggleClass("modalHidden");
        $modalFrame.toggleClass("modalHidden");
    }
    
    var updateModalContent = function(sourceId) {
        var ...
  • Demo of :empty pseudo-class (from MDN)

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

    <div class="box"><!-- I will be white --></div>
    <div class="box">I will be black</div>
    <div class="box">
        <!-- I will be black because of the whitespace around this comment -->
    </div>
  • Kendo Grid: workaround for column resize bug

    Described here: http://www.telerik.com/forums/grid-column-resize-bug-(chrome)?actionMode=replyPost&postId=9939eea3-a4b9-41fa-8367-eaf8cf6fd619

    var products = [{
        ProductID : 1,
        ProductName : "Chai",
        SupplierID : 1,
        CategoryID : 1,
        QuantityPerUnit : "10 boxes x 20 bags",
        UnitPrice : 18.0000,
        UnitsInStock ...
  • Click on table row to "select" it

    jQuery 1.8.3, HTML, CSS, JavaScript

    $('tr').click(function() {
        $(this).find('td').toggleClass('phs-box-primary');
    });
  • Kendo Grid: Hierarchy

    jQuery 1.8.3, HTML, CSS, JavaScript

    var apps = [{
        AppID : 1,
        AppName : "Microsoft Excel",
        MonoVolume : 224,
        ColorVolume : 12,
        MonthlyCost : 94.30,
        JobsPrinted: 157
    }, {
        AppID : 2,
        AppName : "Microsoft ...
  • HTML range element

    jQuery 1.8.3, HTML, CSS, JavaScript

    $('#target').on('change', function() {
        $('#rangeValue').html((this.value));
    });
  • Kendo slider #13 is the latest revision

    jQuery 1.8.3, HTML, CSS, JavaScript

    // Normal method
    $("#slider1").kendoSlider({
        min: 0,
        max: 14,
        smallStep: 1,
        largeStep: 14,
        showButtons: false,
        value: 7
    });
    
    // Value binding
    kendo.bind ...
  • Playing with spin.js

    jQuery 1.8.3, HTML, CSS, JavaScript

    function generateOptions(element) {
        
        var maxSize = 96;
        
        var elementColor = getComputedStyle(element).getPropertyValue("color");
        var elementHeight = element.clientHeight;
        var elementWidth = element.clientWidth ...