Some Useful JavaScript & jQuery Snippets

How to refresh the src of an image with jQuery?

1.$(imageobj).attr('src', $(imageobj)
2.           .attr('src') + '?' + Math.random() );


How to see if an image is loaded or not with jquery

1.var imgsrc = 'img/image1.png';
2.$('<img/>').load(function () {
3.    alert('image loaded');
4.}).error(function () {
5.    alert('error loading image');
6.}).attr('src', imgsrc);


And if a set (example : 10 images) of images are loaded
1.var totalimages  = 10;
2.var loadedimages = 0;
3.$("<img/>").load(function() {
4.    ++loadedimages;
5.    if(loadedimages == totalimages){
6.        //All 10 images are loaded
7.    }
8.});


How to remove selected text after mouse double click event
01.clearSelection      : function () {
02.    if(document.selection && document.selection.empty) {
03.        document.selection.empty();
04.    } else if(window.getSelection) {
05.        var sel = window.getSelection();
06.        sel.removeAllRanges();
07.    }
08.}
09.$(element).bind('dblclick',function(event){
10.    //do something
11.    clearSelection();
12.});

Validate email address:
1.var email = 'info@tympanus.net'
2.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)))
3.alert('Invalid Email');


How to order a <ul> element using jQuery
01.<ul>
02.<li>cloud</li>
03.<li>sun</li>
04.<li>rain</li>
05.<li>snow</li>
06.</ul
07.
08.var items = $('.to_order li').get();
09.items.sort(function(a,b){
10.    var keyA = $(a).text();
11.    var keyB = $(b).text();
12.
13.    if (keyA < keyB) return -1;
14.    if (keyA > keyB) return 1;
15.    return 0;
16.});
17.var ul = $('.to_order');
18.$.each(items, function(i, li){
19.    ul.append(li);
20.});

Passing parameters to a function called with setTimeout
1.timeout = setTimeout(function(){myFunction(param)},time);

Disable right mouse click
1.$(document).ready(function(){
2.    $(document).bind("contextmenu",function(e){
3.        return false;
4.    });
5.});


Fade out an image, and fade in another one (replacing the previous one)
1.$('imageelement').fadeOut(function() {
2.    $(this).load(function() {
3.        $(this).fadeIn();
4.    }).attr('src', AnotherSource);
5.});


Write your own selectors
01.//extend the jQuery functionality
02.$.extend($.expr[':'], {
03.
04.    //name of your special selector
05.    moreThanAThousand : function (a){
06.        //Matching element
07.        return parseInt($(a).html()) > 1000;
08.    }
09.});
10.
11.$(document).ready(function() {
12.    $('td:moreThanAThousand').css('background-color', '#ff0000');
13.});


Run a function 5 times with intervals of 20 seconds
1.var count = 0;
2.function myFunction() {
3.    count++;
4.    if(count > 5) clearInterval(timeout);
5.    //do something
6.}
7.var timeout = setInterval(myFunction, 20000);


Check if an element exists
1.if ($("#elementid").length) {
2.    //it does!
3.}


Cancel an ajax request
01.var req = $.ajax({
02.type:     "POST",
03.url:     "someurl",
04.data:     "id=1",
05.success: function(){
06.//something
07.}
08.});
09.//Cancel the Ajax Request
10.req.abort()