JSFiddle

  • Check if src contains text

    jQuery 1.9.1, HTML, CSS, JavaScript

    // option 1
    var $img = $('.cell-image > span > img[src*="xxx"]');
    if ($img.length) {
        $img.each(function() {
            $(this).addClass('newclass1');
        });
    }
    
    // option 2 ...
  • Section Scroll

    Simple Scroll Test

    $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
                || location.hostname == this.hostname) {
    
                var target = $(this ...
  • Footnote

    Border clipping with border-image

    <div>I could be a footnote.</div>
  • Distance List DEF

    List with distance to current point

    $(function() {
    
      $(document).delegate('.sort-distance.button-unsorted2', 'click', function(e) {
        e.preventDefault();
          $(".button-unsorted2").hide();
          $(".button-sorted").show();
          $(".list-original").toggleClass('hidden');
          $(".list-sorted").toggleClass('hidden ...
  • Sort div with data attribute

    jQuery 1.8.3, HTML, CSS, JavaScript

    var $wrapper = $('.testWrapper');
    
    $wrapper.find('.test').sort(function (a, b) {
        return +a.dataset.name - +b.dataset.name;
    })
    .appendTo( $wrapper );
  • Two Circle animation pure CSS #3 is the latest revision

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

    <div class="axis">
        <div class="rotate">
            <div class="raindrop" id="center"></div>
            <div class="counterrotate">
                <div class="planet" id="circle">A</div>
            </div>
        </div>
    </div>
  • Image Rotation #10 is the latest revision

    jQuery 1.11.0, HTML, CSS, JavaScript

    $('button').click(function(){
        $('.image').toggleClass('active');
    });
  • statusbar css

    jQuery 1.9.1, HTML, CSS, JavaScript

    jQuery('#add').click(function() {
    
        var count = jQuery(".value").length;
    
        if (count < 50){
            jQuery('#wrapper').append("<div class='value'></div>");
        }
    });
  • Hypnose

    css animation

    <div class="wrapper" id="example-01">
            <div class="ball" style="width: 100px; height: 100px; border-radius: 100px; background: white;"></div>
    </div>
  • Show/Hide with Visibility and css transition

    jQuery 1.9.1, HTML, CSS, JavaScript

    var box = $('#box');
    
    $('button').on('click', function () {
      
      if (box.hasClass('hidden')) {
        
        box.removeClass('hidden');
        setTimeout(function () {
          box.removeClass('visuallyhidden');
        }, 20 ...