Toggle Elements From One Position to the Other using jQuery




With these cool script frameworks around, it is a breeze to drag and drop and move elements on a page. A common usage of the drag drop behavior is also seen in Shopping Cart applications where items are ‘dropped’ into the Cart.

Well what if you want to move an element from one position to the other, by just clicking on it. The element should move back when a user clicks on it again – similar to an undo behavior. Although this may look like a lot of scripting has to be done to achieve this, but with the jQuery API’s, this requirement can be achieved easily. Here’s how to move the position of elements on the page using jQuery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Toggle Elements From One Position to the Other using jQuery</title>
<
script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
<
script type='text/javascript'>
$(document).ready(function() {
$(".smallDiv").toggle(
function() {
$(this).animate({ 'left': '600px' }, 'slow');
},
function() {
$(this).animate({ 'left': '0px' }, 'slow');
});
});
</script>

<
style type="text/css">
.smallDiv
{
height:150px;
width:150px;
position:relative;
border:solid 1px Silver;
background-color:Gray;
}
</style>
</
head>
<
body>
<
div class="smallDiv">
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
</div>
<
br />
<
div class="smallDiv">
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
</div>
<
br />
<
div class="smallDiv">
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
</div>
</
body>
</
html>



See a Live DEMO here.

Clicking on any div changes its position. Clicking it back, brings it to its original position.

OUTPUT

image



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

5 Responses to "Toggle Elements From One Position to the Other using jQuery"
  1. Anonymous said...
    August 21, 2009 at 6:30 AM

    Most. Pointless. Article. Ever

  2. biznavigator said...
    August 21, 2009 at 12:02 PM

    Very helpful.

    I needed a pointer on how to move blocks around a page.

  3. gergly said...
    August 21, 2009 at 8:33 PM

    I wonder what is pointless in this article. I think Mr. Anonymous has learnt everything and needs no more tutorials!

    Nice stuff.

  4. The Uprising said...
    June 7, 2012 at 3:50 AM

    Excellent post and just what I was looking for!

    I am having just 1 problem though...

    Links within the div that changes position do not work! The div simply returns to its original position.

    Is there any way around this?

    Hope you can help

  5. Suprotim Agarwal said...
    June 7, 2012 at 7:32 AM

    You want them to be retained on page refresh?

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions