Posts

Showing posts from January, 2012

JQuery Animated Selector

Description:  Select all elements that are in the progress of an animation at the time the selector is run. Additional Notes: Because  :animated  is a jQuery extension and not part of the CSS specification, queries using  :animated  cannot take advantage of the performance boost provided by the native DOM  querySelectorAll()  method. To achieve the best performance when using :animated  to select elements, first select the elements using a pure CSS selector, then use  .filter(":animated") . Example: Change the color of any div that is animated. <!DOCTYPE html> <html> <head>   <style>   div { background : yellow ; border : 1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }   div . colored { background : green ; }   </style>   <script src = "http://code.jquery.com/jquery-latest.js" ></script> </head> <body>   ...

JQuery Draggable

OVERVIEW The jQuery UI Draggable plugin makes selected elements draggable by mouse. Draggable elements gets a class of  ui-draggable . During drag the element also gets a class of ui-draggable-dragging . If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables. All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): ui.helper  - the jQuery object representing the helper that's being dragged ui.position  - current position of the helper as { top, left } object, relative to the offset element ui.offset  - current absolute position of the helper as { top, left } object, relative to page To manipulate the position of a draggable during drag, you can either  use a wrapper as the draggable helper  and position the wrapped element with abs...