JSFiddle

  • Gears

    jQuery Compat (edge), HTML, CSS, JavaScript

    //gears
    // Get the container position
    var containerPos = $('.gearbox').offset();
    
    // Get the initial scroll position. This will be needed later when ...
  • jquery knob latest animated only #3 is the latest revision

    jQuery Compat (edge), HTML, CSS, JavaScript

    /*!jQuery Knob*/
    /**
     * Downward compatible, touchable dial
     *
     * Version: 1.2.11
     * Requires: jQuery v1.7+
     *
     * Copyright (c) 2012 Anthony Terrien
     * Under ...
  • Pure CSS Gears #8 is the latest revision

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

    <div class="container">
      <div class="gearbox">
      <div class="overlay"></div>
        <div class="gear one">
          <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
          </div>
        </div>
        <div class="gear two">
          <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
          </div>
        </div>
        <div class="gear three">
          <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
          </div>
        </div>
        <div class="gear four large">
          <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
          </div>
        </div>
      </div>
      <h1>Loading...</h1>
    </div>
    
  • JQuery UI Slider #2 is the latest revision

    Sample code for a JQuery UI slider

    $("#slider").slider(
    {
                value:0,
                min: 0,
                max: 500,
        step: 0.01,
        animate: "fast",
                slide: function( event, ui ) {
                    $( "#slider-value" ).html( ui ...
  • Fluid Text Path #461 is the latest revision

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

    <div id="container">
    <svg viewBox="0 0 300 300">
        <defs>
            <path id="textPath" d="M10 100 Q 100 0 200 100" />
        </defs>
        <text fill="red">
            <textPath xlink:href="#textPath">Text on a Path Text on a Path Text on a Path Text on a Path</textPath>
        </text>
        </svg>
        </div>
  • Canoe Revisited #6 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    var save = false,
        timer;
    
    $('#canoe').draggable({
        containment: '#board',
        cursor: 'none',
        cursorAt: {
            top: 30,
            left: 5
    
        },
        drag: function (event, ui) {
            if ...
  • Knob.js #10 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    $(function () {
    
        $(".knob").knob({
            /*change : function (value) {
                        //console.log("change : " + value);
                    },
                    release : function (value) {
                        console.log("release : " + value);
                    },
                    cancel : function () {
                        console ...
  • Cover a scrolling area #3 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript

    $(document).ready(function () {
        var x = $('#contents').width();
        $('#cover').width(x);
    });
    $(window).resize(function () {
        var x = $('#contents').width();
        $('#cover').width(x ...
  • Drag one direction #177 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    $('.draggable').draggable({
         axis: "y",
         start: function (event, ui) {
             start = ui.position.top;
         },
         stop: function (event, ui) {
             stop = ui.position.top ...
  • Isotope Author & Date #10 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    $(function () {
    
        var $container = $('#container');
    
        // add randomish size classes
        $container.find('.element').each(function () {
            var $this = $(this),
                number = parseInt($this.find ...