JSFiddle

  • test

    jQuery 1.11.0, HTML, CSS, JavaScript

    // Iterate over each select element
    $('select').each(function () {
    
        // Cache the number of options
        var $this = $(this),
            numberOfOptions = $(this).children('option ...
  • The simplest full body parallax

    Just a few lines of jQuery

    $(document).ready(function(){
    var $window = $(window);
    $('body').each(function(){
    var $bgobj = $(this);
    $(window).scroll(function() {
    var yPos = -( ($window.scrollTop() + 320 ...
  • Bootstrap progresss bars with buttons

    These buttons change the values of the progress bars. All responsive.

    jQuery(function($) {
        $('#illus').click(function() {
                var phs = 80 + '%';
                var ind = 50 + '%';
                var ill = 100 + '%';
                var afe = 30 + '%';
                var prp = 20 ...
  • Image changes on screen resize.

    Dynamic/Responsive change of the image whenever the screen resolution changes.

    function tellAngular() {
        console.log("tellAngular call")
        var e = document.getElementById("image")
        scope = angular.element(e).scope(), scope.$apply(function () {
            scope ...
  • CSS sprite sheet animation #4 is the latest revision

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

    <div class="hi"></div>
  • responsive menu / navigation bar

    css and html only

        <div id="navbar">
            <div id="name">Logo</div>
            <ul class="menu">
                <li>Item one</li>
                <li>Item two</li>
                <li>Item three</li>
                <li>Item four</li>
            </ul>
        </div>
  • responsive menu / navigation bar

    css and html only

        <div id="navbar">
            <div id="name">Logo</div>
            <ul class="menu">
                <li>Item one</li>
                <li>Item two</li>
                <li>Item three</li>
                <li>Item four</li>
            </ul>
        </div>
  • html and css only tab menu

    with preloaded content

    <div class="tabs">    
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>       
           <div class="content">
               content of tab one
           </div> 
       </div>
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>       
           <div class="content">
               content of tab two
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>     
           <div class="content">
               content of tab three
           </div> 
       </div>    
    </div>
  • html and css only tab menu #1 is the latest revision

    with preloaded content

    <div class="tabs">    
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>       
           <div class="content">
               content of tab one
           </div> 
       </div>
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>       
           <div class="content">
               content of tab two
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>     
           <div class="content">
               content of tab three
           </div> 
       </div>    
    </div>
  • CSS3 animation-timing-function property difference

    Shos the diffence between ease, ease-in-out and linear for the animation-timing-function property in CSS3

    <!-- Note: This example does not work in old Internet Explorers and Opera -->
    <p>CSS3 animation-timing-function property difference</p>
    <div id="top"></div>
    <div id="one">mymove 5s (ease) infinite</div>
    <div id="two">mymove 5s ease-in-out infinite</div>
    <div id="three">mymove 5s linear infinite</div>
    <div id="bottom"></div>
  • CSS Keyframes

    Keyframes rule for Gecko and Webkit browsers.

    <p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
    
    <div></div>