Some Useful JavaScript & jQuery Snippets

How to refresh the src of an image with jQuery? $(imageobj).attr('src', $(imageobj) .attr('src') + '?' + Math.random() ); How to see if an image is loaded or not with jquery var imgsrc = 'img/image1.png'; $('<img/>').load(function () { alert('image loaded'); }).error(function () { alert('error loading image'); }).attr('src', imgsrc); And if a set (example : 10 images) […]

snippets

  • How to refresh the src of an image with jQuery?
  • $(imageobj).attr('src', $(imageobj)
               .attr('src') + '?' + Math.random() );
  • How to see if an image is loaded or not with jquery
  • var imgsrc = 'img/image1.png';
    $('<img/>').load(function () {
        alert('image loaded');
    }).error(function () {
        alert('error loading image');
    }).attr('src', imgsrc);
  • And if a set (example : 10 images) of images are loaded
  • var totalimages  = 10;
    var loadedimages = 0;
    $("<img/>").load(function() {
        ++loadedimages;
        if(loadedimages == totalimages){
            //All 10 images are loaded
        }
    });
  • How to remove selected text after mouse double click event
  • clearSelection      : function () {
        if(document.selection && document.selection.empty) {
            document.selection.empty();
        } else if(window.getSelection) {
            var sel = window.getSelection();
            sel.removeAllRanges();
        }
    }
    $(element).bind('dblclick',function(event){
        //do something
        clearSelection();
    });
  • Validate email address:
  • var email = 'info@tympanus.net'
    if(!(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(email)))
    alert('Invalid Email');
  • How to order a <ul> element using jQuery
  • <ul>
    <li>cloud</li>
    <li>sun</li>
    <li>rain</li>
    <li>snow</li>
    </ul
    
    var items = $('.to_order li').get();
    items.sort(function(a,b){
        var keyA = $(a).text();
        var keyB = $(b).text();
    
        if (keyA < keyB) return -1;
        if (keyA > keyB) return 1;
        return 0;
    });
    var ul = $('.to_order');
    $.each(items, function(i, li){
        ul.append(li);
    });
  • Passing parameters to a function called with setTimeout
  • timeout = setTimeout(function(){myFunction(param)},time);
  • Disable right mouse click
  • $(document).ready(function(){
        $(document).bind("contextmenu",function(e){
            return false;
        });
    });
  • Fade out an image, and fade in another one (replacing the previous one)
  • $('imageelement').fadeOut(function() {
        $(this).load(function() {
            $(this).fadeIn();
        }).attr('src', AnotherSource);
    });
  • Write your own selectors
  • //extend the jQuery functionality
    $.extend($.expr[':'], {
    
        //name of your special selector
        moreThanAThousand : function (a){
            //Matching element
            return parseInt($(a).html()) > 1000;
        }
    });
    
    $(document).ready(function() {
        $('td:moreThanAThousand').css('background-color', '#ff0000');
    });
  • Run a function 5 times with intervals of 20 seconds
  • var count = 0;
    function myFunction() {
        count++;
        if(count > 5) clearInterval(timeout);
        //do something
    }
    var timeout = setInterval(myFunction, 20000);
  • Check if an element exists
  • if ($("#elementid").length) {
        //it does!
    }
  • Cancel an ajax request
  • var req = $.ajax({
    type:     "POST",
    url:     "someurl",
    data:     "id=1",
    success: function(){
    //something
    }
    });
    //Cancel the Ajax Request
    req.abort()

    Message from TestkingIf want to learn how to use javascript and JQuery to create powerful websites then join testking 70-647 online designing course and get expert testking 350-018 reviews and and testking 640-553 tutorials to learn how to create effective web lauouts.
    Previous:
    Next:

    Tagged with:

    Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

    View all contributions by

    Website: http://tympanus.net/codrops/author/cody/

    Related Articles

    Receive our bi-weekly Collective or blog updates right in your inbox.

    Which newsletter would you like to receive?

    CSS Reference

    Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

    It doesn't matter if you are a beginner or intermediate, start learning CSS now.