JSFiddle

  • CSS Timeline

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

    
        <div class="bar"></div>
    <div class="timeline">
        <div class="entry">
            <h1>1990</h1>
            <h2>Entry Title</h2>
            <img src="http://dummyimage.com/300x200/000/fff"/>
            Here's the info about this date
        </div>
        <div class="entry">
            <h1>1995</h1>
            Here's the info about this date
        </div>
        <div class="entry">
            <h1>2000</h1>
            Here ...</div></div>
  • Barrel Roll #31 is the latest revision

    Barrel roll up and down.

    <div class="container">
    	<div class="one"></div>
    	<div class="sep"><img src="https://s31.postimg.org/wdnvhpacr/sep.jpg"></div>
    	<div class="two"></div>
    	<div class="sep"><img src="https://s31.postimg.org/wdnvhpacr/sep.jpg"></div>
    	<div class="three"></div>
    	<div class="sep"><img src="https://s31.postimg.org/wdnvhpacr/sep.jpg"></div>
    	<div class="four"></div>
    </div>
  • Embedded Tweets Wider Than 520px #2 is the latest revision

    Create embedded Twitter tweets wider than the default 520px.

    $(document).ready(function() {
      twitterCheck = setInterval(function() {
        if ($('iframe[id^="twitter-widget-"]').length) {
          $('iframe[id^="twitter-widget-"]').each(function() {
            $(this).contents().find(".timeline ...
  • Clone Nav and Drag

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

    /* Clone left nav */
      $(document).ready(function(){
            //Counter
            counter = 0;
            //Make element draggable
            $(".drag").draggable({
                helper:'clone',
                containment: 'frame',
    
                //When first ...
  • Drag, Drop, Sortable

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

    /* Snap to and Draggable */
    $(document).ready(function () {
    $(".inputs div").draggable( {
            opacity: .4,
            create: function(){$(this).data('position',$(this).position())},
            cursorAt ...