Posts

Handling Events in jQuery – Few Advanced Notes and Faqs

-
Background: We have already discussed about handling client events in jQuery (see earlier post ). Obviously there are more things about jQuery events like binding client events to DOM element which are created dynamically, Cancelling the action of an event conditionally etc. Let’s have a look at few advanced topics on jQuery events. Adding event handler to future elements: In my earlier post we already know about the bind() and unbind() methods provided by jQuery which is used to attach and detach event handlers to various elements on the page. Instead of bind() we can also use the click()/dblclick() methods to add different event handlers. We declare these things in the ready() event because we need that element to be loaded before we attach any event handler to that element. Since we can create DOM element dynamically, can we use this technique to attach event to the element. The answer is no, because when the dynamically created element is not yet present in the DOM when th...
Post a Comment
Read more

Create Animations & Effects using jQuery

-
Background:  We so far have seen different ways to manipulate the DOM . While manipulating DOM elements we can add some basic effects to make the UI more attractive. There are built-in methods that jQuery provides to achieve different effects and simply calling those methods against different selectors we can easily create the animations. Using jQuery we can fade/slide an element using in-built methods. There are ways to create custom animations and add a callback function and to stop the animation whenever required. Let's look briefly about how we can create basic effects using these methods. Hide,Show & Toggle methods: One of the most basic effect we can have using jQuery is to hide/show certain element. In order to hide/show DOM element jQuery provides two method hide() and show(). So to hide/show a particular div we will use : $("#div1").hide();//hides the element with id "div1" $("#div1").show(); //shows the element with id "...
1 comment
Read more