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

    Feedback 18

    Comments are closed.
    1. Pingback: Some Useful JavaScript & jQuery Snippets | Codrops

    2. Pingback: Some Useful JavaScript & jQuery Snippets | Codrops « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

    3. Pingback: Some Useful JavaScript & jQuery Snippets - Part 2 | Codrops

    4. Pingback: Some Useful JavaScript & jQuery Snippets | Codrops : Popular Links : eConsultant

    5. Pingback: Some Useful JavaScript & jQuery Snippets - Part 3 | Codrops

    6. Pingback: Some Useful JavaScript & jQuery Snippets | Codrops » Web Design

    7. Pingback: links for 2010-01-08 | Digital Rehab

    8. Pingback: jQuery et Javascript : quelques snippets utiles

    9. Pingback: Astuces (Snippets) pratiques pour Javascript et jQuery » Javascript & Web Design - Tous les jours le meilleur des ressources Javascript pour intégrateurs web front-end (avec parfois un soupçon de PHP)

    10. Pingback: 2010/01/09???????? | debeso

    11. Pingback: Snippets de Javascript y jQuery para ahorrar tiempo - elWebmaster.com

    12. Pingback: IT???? | 2009?12/27?2010?1/9?????????

    13. Pingback: links for 2010-01-11 « 2LeggedSpider

    14. Pingback: ??????? » [Web] ????

    15. Pingback: links for 2010-01-17 « Web????????? Web??????????? S5-Style

    Comments are closed.