jQuery

Events still working with dynamically added elements

$(".test").live("click", function(){
    alert('yes');
});

Source: http://www.ibm.com/developerworks/web/library/wa-aj-advjquery2/index.html

Disable right-click on image or div

$('.no_download').bind('contextmenu', function(e){
	e.preventDefault();
});

Note: for an image which is also a link, the class has to be applied to the image (not to the link):

<a href="...">
    <img class="no_download" src="..." />
</a>

Source: Cats Who Code: 8 awesome JQuery tips and tricks

Pop-up links

Javascript

$("a[rel='external']").click(function(){
    this.target = "_blank";
});

HTML

<a rel="external" href="http://google.com">
    Google
</a>

hide() buggy in IE6

Example: element after a div hidden dynamically by hide() is stretched. Solution: use toggle().

Test if element exist

$('element').length == 0; // no element found

old IE versions

if($.browser.msie && parseInt($.browser.version,10) <= 7) {
    alert('will appear in IE 7 and lower');
}

sort elements

From this HTML

<ul>
    <li>Banana</li>
    <li>Carrot</li>
    <li>Apple</li>
</ul>

With that Javasript

$('li').sortElements(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});

You'd get

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Carrot</li>
</ul>

The code:

/**
 * jQuery.fn.sortElements
 * http://james.padolsey.com/javascript/sorting-elements-with-jquery/ 
 * --------------
 * @param Function comparator:
 *   Exactly the same behaviour as [1,2,3].sort(comparator)
 *   
 * @param Function getSortable
 *   A function that should return the element that is
 *   to be sorted. The comparator will run on the
 *   current collection, but you may want the actual
 *   resulting sort to occur on a parent or another
 *   associated element.
 *   
 *   E.g. $('td').sortElements(comparator, function(){
 *      return this.parentNode; 
 *   })
 *   
 *   The <td>'s parent (<tr>) will be sorted instead
 *   of the <td> itself.
 */
$.fn.sortElements = (function(){
 
    var sort = [].sort;
 
    return function(comparator, getSortable) {
 
        getSortable = getSortable || function(){return this;};
 
        var placements = this.map(function(){
 
            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,
 
                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );
 
            return function() {
 
                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }
 
                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);
 
            };
 
        });
 
        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });
 
    };
 
}());

Source: http://james.padolsey.com/javascript/sorting-elements-with-jquery/

Fun

Highlight every other row (zebra effect)

$(this).find("tbody > tr").filter(":odd").addClass("highlight");

Reference

Good articles on ibm.com/developerworks by Michael Abernethy:

Feedback

good
azaz
Oct 15, 2010
#1
yeah
zaza
Dec 30, 2010
#2
nice thank u....
Raju
Jul 28, 2011
#3