JSFiddle

  • Panel Tabs #22 is the latest revision

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

    <div class="tab-panels">
      <div id="panel1" class="panel active"><img src="http://www.swiftpic.org/image.uploads/27-03-2017/original-c804578716fe546b8e91bb7a8aa29014.jpg" width="800px"></div>
      <div id="panel2" class="panel active"><img src="http://www.swiftpic.org/image.uploads/27-03-2017/original-e15ec30af0f5529237de80f81902b90d.jpg" width="800px"></div>
      <div id="panel3" class="panel active"><img src="http://www.swiftpic.org/image.uploads/27-03-2017/original-d5b9bb921c95d63dac59fd40e40041c5.jpg" width="800px"></div>
        <ul>
        <li rel="panel1" class="active"><img src="img/calendar.png"></li>
        <li rel="panel2"><img src="img/notifications.png"></li>
        <li rel="panel3"><img src="img/profile.png"></li>
      </ul>
    </div>
  • Drag Down Menu

    Drag Down Menu

    var startPosition = 0;
    var pagePosition = 0;
    var scrollY = 0;
    var scrollPrevented = false;
    
    $(document).on('vmousedown', '.dragme', function(event){
        var startPosition ...
  • Drag Down Menu

    Drag Down Menu

    var startPosition = 0;
    var pagePosition = 0;
    var scrollY = 0;
    var scrollPrevented = false;
    
    $(document).on('vmousedown', '.dragme', function(event){
        var startPosition ...
  • 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 ...