JSFiddle

  • Track

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

    var tm = new TimelineMax({repeat: 1});
    var time = 5
    
    var totalLaps = document.querySelectorAll('.track').length;
    var totalProgress = .9;
    var stopAt ...
  • Track

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

    var tm = new TimelineMax({repeat: 1});
    var time = 5
    
    var totalLaps = document.querySelectorAll('.track').length;
    var totalProgress = .9;
    var stopAt ...
  • JSON file Styleguide

    Ever wanted to display all your custom icons. Now you can by importing them into a list using JSON

    $.ajax({
        url: "https://raw.githubusercontent.com/Keyamoon/IcoMoon-Free/master/Font/selection.json",
        dataType: "json",
        success: function (data) {
            var icons = data ...
  • Wheel of Fortune

    jQuery 1.7.2, HTML, CSS, JavaScript

    $(function() {
        $('#wheel').on('click', function() {
          $(this).rotate({ endDeg:2000, duration:10, persist:true, easing:'ease-out' });
        });
    });
    
    $.fn.rotate=function(options) {
      var ...
  • Tabbed Slider

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

    $(document).ready(function(ev){
        $('#custom_carousel').on('slide.bs.carousel', function (evt) {
          $('#custom_carousel .controls li.active').removeClass('active');
          $('#custom_carousel .controls li ...
  • Spot the Difference Game

    Spot the Difference Game

    $(document).ready(function() {
        // When clicked, show difference
    	$('#transparentmap AREA').click(function() { 
    	var theDifference = '#'+$(this).attr('id')+'-diff';
    	$(theDifference).css('display ...
  • Progress Bar with set markers

    Progress Bar with set markers

    <div class="container">
    	<div class="row"><br>
    	    <div class="col-md-5">
        	    <div class="progress">
                    <div class="bar-step" style="left: 75%">
                        <div class="label-txt">Nice long text for test</div>
                        <div class="label-percent">75%</div>
                        <div class="label-line"></div>
                        
                    </div>
                    <div class="bar-step" style="left: 10%">
                        <div class="label-txt">Adam Bray Mark</div>
                        <div class="label-percent">10%</div>
                        <div class="label-line"></div>
                    </div>
                    <div class="bar-step" style="left: 55%">
                        <div class="label-txt">Testing 123</div>
                        <div class="label-percent">55%</div>
                        <div class="label-line"></div>
                    </div>
      			    <div class="progress-bar progress-bar-success" style="width: 46%;">46%</div>
    		       </div>
    	        </div>
    	    </div>
        </div>
    </div>
  • Rate while you watch

    jQuery 1.10.1, HTML, CSS, JavaScript

    $(document).ready(function(){
    
        //slider
        $( "#slider-vertical" ).slider({
            disabled: true,
            orientation: "vertical",
            range: "min",
            min: 0,
            max: 100,
            value: 50,
            animate: true ...
  • Datatables - Fixed header with expandable row #4 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    /* Formatting function for row details - modify as you need */
    function format ( d ) {
        // `d` is the original data object for the ...
  • Chart

    jQuery 1.9.1, HTML, CSS, JavaScript

    $(function () {
        $('#container').highcharts({
            title: {
                text: 'Title',
                x: -20 //center
            },
            subtitle: {
                text: 'Subtitle',
                x: -20
            },
            xAxis: {
                categories: ['Week 1', 'Week 2 ...