JSFiddle

  • Sweet Spirals #10 is the latest revision

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

      <header class="header">
    <div class="row">
      <a href="/" class="header-logo" tabindex="-1">Sweet Spirals</a>
      <div class="header-right">
        <nav class="header-nav">
          <a href="/" class="header-link header-nav-link active">Home</a>
          <a href="/snippets" class="header-link header-nav-link">Shop</a>
          <a href="/ui-kits" class="header-link header-nav-link">About Us</a>
          <a href="/faq" class="header-link header-nav-link">FAQ</a>
          <a href="/search" class="header-link header-search-link" data-toggle="search">Search</a>
        </nav>
        <form method="get" accept-charset="UTF-8" action="/search" id="search" class="header-search">
          <input type="search" name="q" placeholder="Search terms…">
        </form>
      </div>
    </div>
  </header>
  <div class="content">
    <div class="row">
      <section class="main">
        <hgroup class="heading home-heading" id="heading">
          <h1 class="major" id="major">Welcome to Sweet Spirals</h1>
          <h2 class="minor" id="minor">Happiness In Every Bite</h2>
        </hgroup>
        <aside class="aside">
          <div class="subscribe">
            <a href="https://www.facebook.com/sweetspirals" class="soc-button soc-button-facebook" rel="nofollow">Like</a>
          </div>
          <figure class="crackers2">
            <img src="https://farm6.staticflickr.com/5655/22900680453_242b39b6d6_k.jpg" alt="missing" height="100%" width="100%" />
            <figcaption>Peppermint Thins</figcaption>
          </figure>
          <div id="pepthinsbutton">
            <script src="https://gumroad.com/js/gumroad.js"></script>
            <a class="gumroad-button" href="https://gum.co/Peppermintthins" target="_blank">Buy ...</a></div></aside></section></div></div>

  • Sweet Spirals

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

      <header class="header">
    <div class="row">
      <a href="/" class="header-logo" tabindex="-1">Sweet Spirals</a>
      <div class="header-right">
        <nav class="header-nav">
          <a href="/" class="header-link header-nav-link active">Home</a>
          <a href="/snippets" class="header-link header-nav-link">Shop</a>
          <a href="/ui-kits" class="header-link header-nav-link">About Us</a>
          <a href="/faq" class="header-link header-nav-link">FAQ</a>
          <a href="/search" class="header-link header-search-link" data-toggle="search">Search</a>
        </nav>
        <form method="get" accept-charset="UTF-8" action="/search" id="search" class="header-search">
          <input type="search" name="q" placeholder="Search terms…">
        </form>
      </div>
    </div>
  </header>
  <div class="content">
    <div class="row">
      <section class="main">
        <hgroup class="heading home-heading" id="heading">
          <h1 class="major" id="major">Welcome to Sweet Spirals</h1>
          <h2 class="minor" id="minor">Happiness In Every Bite</h2>
        </hgroup>
        <aside class="aside">
          <div class="subscribe">
            <a href="https://www.facebook.com/sweetspirals" class="soc-button soc-button-facebook" rel="nofollow">Like</a>
          </div>
          <figure class="crackers2">
            <img src="https://farm6.staticflickr.com/5655/22900680453_242b39b6d6_k.jpg" alt="missing" height="100%" width="100%" />
            <figcaption>Peppermint Thins</figcaption>
          </figure>
          <div id="pepthinsbutton">
            <script src="https://gumroad.com/js/gumroad.js"></script>
            <a class="gumroad-button" href="https://gum.co/Peppermintthins" target="_blank">Buy ...</a></div></aside></section></div></div>

  • Bar and line chart combination in dimple

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

    <div>From <a href="http://stackoverflow.com/questions/18620053/multi-series-in-dimplejs">http://stackoverflow.com/questions/18620053/multi-series-in-dimplejs</a></div>

<div id="chartContainer">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v1.1.3.min.js"></script>
  <script type="text/javascript">
      var svg = dimple.newSvg("#chartContainer", 800, 400);

      // Data hack required to get revenue ...</script></div>

  • jQuery: sorting lists alphabetically

    jQuery 1.7.2, HTML, CSS, JavaScript 

    (function($) {

    $.fn.listSorter = function(options) {
        var that = this;
        var settings = {
            order: 'asc'
        };
        options = $.extend(settings, options);

        var items = $('li', that ...

  • HTML5 Volume Control

    Form Slider via input type="range" and output Element via demosthen.es demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input 

    
function outputUpdate(vol) {

  document.querySelector('#volume').value = vol;

}

  • Using CSS background-image on HTML img Elementts #1 is the latest revision

    Embedding images as background-images, and combined with animated images to get the most out of your images 

    <div>
            <img src="an-runner.gif" alt="runner">
        </div>




<cite><a href="http://web.archive.org/web/20101113160146/http://www.contentwithstyle.co.uk/resources/img_bg_demo/index.html">via an old content with style demo that is down atm</a></cite>

  • SVG Icon #1 is the latest revision

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

    // SVG Stacks Demo

// Current browser-support: Firefox

// SVG modification + technique by @erikdahlstrom

  • Play Button

    Simple CSS3 play button 

     <div class="play_border">
    <div class="play_button"></div>
</div>

  • Blur - SVG blur applied to SVG image element #562 is the latest revision

    Image inserted via SVG with a SVG blur filter applied on hover 

    <svg id="svg-image-blur">
    <image x="10" y="10" id="svg-image" width="300" height="200" xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" />

    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

  • D3.js Socrata Community Portal Demo

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

    // Set our margins
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 60
},
width = 960 - margin.left - margin.right,
    height ...