Combine more than one effects in jQuery to animate and remove an element from DOM. $(“#myButton”).click(function() { $(“#myDiv”).fadeTo(“slow”, 0.01, function(){ //fade $(this).slideUp(“slow”, function() { //slide up $(this).remove(); //then remove from the DOM }); }); });
Category: jQuery
Hover On/Off
If you want to find the wrapping DIV element (regardless of the ID on that DIV) then you’ll want this jQuery selector: $(“a”).hover( function () { // code on hover over }, function () { // code on away from hover } ); source
Getting Parent DIV using closest
If you want to find the wrapping DIV element (regardless of the ID on that DIV) then you’ll want this jQuery selector: $(“#searchBox”).closest(“div”); jQUery.com – Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree. $(‘li.item-a’).closest(‘ul’).css(‘background-color’, ‘red’);
Center an element on the Screen
jQuery.fn.center = function () { this.css(“position”,”absolute”); this.css(“top”, ( $(window).height() – this.height() ) / 2+$(window).scrollTop() + “px”); this.css(“left”, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + “px”); return this; } Use the above function as: $(element).center();
Alternate way of Document Ready
Instead of $(document).ready(function() { //document ready }); Use $(function(){ //document ready });
Add dynamically created elements into the DOM
Use following code snippet to create a DIV dynamically and add it into the DOM. Further Reading: Dynamically Add/Remove rows in HTML table using JavaScript var newDiv = $(”); newDiv.attr(“id”,”myNewDiv”).appendTo(“body”);
Live Event Handlers
Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load: $(‘button.someClass’).live(‘click’, someFunction); This allows you to load content via ajax, or add them via javascript and have the event handlers get set up properly for those elements automatically. Likewise, to stop […]
jQuery Cloning
jQuery supports cloning – you can use the clone() method to create a clone of any DOM element in your web page. Here is an example: var cloneObject = $(‘#divObject’).clone(); The $(document).ready function is called during page render, i.e., while the objects are still being downloaded in the web browser. To reduce CPU utilization while […]
Lazy Loading
Lazy loading is a great feature in jQuery that ebales you to load only the content that is needed. To use this, you should incorporate the jquery.lazyload.js script file as shown below: Next, you can use the lazyload() method as shown below: $(“imageObject”).lazyload();
Chaining Feature
Chaining is a great feature in jQuery that allows you to chain method calls. Here is an example: $(‘sampleElement’).removeClass(‘classToBeRemoved’).addClass(‘classToBeAdded’); You can also use jQuery to store state information of DOM elements in your web page. It contains the data() method that you can use to store state information of the DOM elements in key/value pairs. […]