Sunday, August 8, 2010

swapable - jQuery plugin

The jQuery UI Swapable plugin makes selected elements swapable by dragging with the mouse.


Enable a group of DOM elements to be swapable. Click on and drag an element to a new spot within the list; drag element and drop one will swap and the other items will not affected. By default, swapable items share sortable properties.


Similar to "Sortable", but only two elements of the selected group are affected: dragged and dropped which are swapped. All other elements stay at their current positions. This plugin is built based on existing "Sortable" jQuery plugin and inherits all sortable options except "cursorAt" one which is hard-coded.
Based on jquery.ui.sortable.js
  • jquery.ui.core.js
  • jquery.ui.mouse.js
  • jquery.ui.widget.js
  • jquery.ui.sortable.js
To add the feature to a group of elements:
Minimal configuration:

$("#swappable").swappable({items: '.itemClass',cursorAt: {top:-10} });

Option's specific: 

  • Always set option "cursorAt: {top: -nn} " as a negative Integer.
  • Always set option "items" with items' class name, not element or filter.


  <ul id="foo">
     <li class="bar"><li>
     <li class="bar"><li>
     <li class="bar"><li>

   items:'.bar', // Mandatory option, class only.
   cursorAt: {top:-20}, // MUST be set to negative. Default doesn't work!

Saturday, August 7, 2010

smartupdater (jQuery periodicalupdater)

Smartupdater jQuery plugin performs periodical updating functionality and can be used in all sorts of applications which need “polling” mechanisms.


  • stop updating.
  • restart updating after stop.
  • dynamically reprogram current timeout
  • remotely set timeout ( server controls polling period )
  • state attribute shows current state ( ON | OFF | undefined )
  • timeout attribute shows current timeout
Smart Behavior:
  • smart updateing - updates only if new data is different from the old one (text or json only.)
  • multiplies polling interval - multiplies polling interval each time data is not changed (text or json only.)
  • handle ajax failures - stop to request data after "maxFailedRequests".

List of available functions

  • smartupdaterStop() - to stop polling
  • smartupdaterRestart() to run polling again
  • smartupdaterSetTimeout() - to set a new polling interval

List of available attributes

  • smartupdaterStatus.state current state ( ON | OFF | undefined )
  • smartupdaterStatus.timeout current timeout

List of available options

  • url - URL for the ajax request. (Required!)
  • type - Can be either GET or POST (see jQuery.ajax for details)
  • data - Array of values to be passed to the page (see jQuery.ajax for details)
  • dataType - Response type – can be text, xml, json etc. (see jQuery.ajax for details)
  • minTimeout - Starting value for the timeout in milliseconds.
  • maxTimeout - Maximum length of time between requests.
  • multiplier - Sets the amount of decay between ajax requests. If this is set to 2, the length of time between each request will double while the response doesn’t change.
  • maxFailedRequests - smartupdater stops after this number of consecutive ajax failures;

See demo at 

get source of smartupdater2 from:

Any questions, comments or suggestions are welcome :)