Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Swapping two divs

    Hi everyone,

    Simple question. I have two divs, one is on the left, the other on the right:

    DIV1 - DIV2

    What I am looking for, is a button, and when clicked, both divs are swapped. So the position of the first div goes to where the second is, and vice versa.

    DIV2 - DIV1

    So after clicking the button, both divs should swap places entirely, not just change the content.

    (Both divs have dropdowns which people can select and I want to preserve what they selected when swapping the divs).

    Any help would be much appreciated. I have been googling all morning, but to no avail

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    how are the DIVs positioned?

    best to provide the HTML and CSS
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    If you haven't decided yet on how to do the left/right stuff, try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #side1 {
        position: relative;
        float: left;
        width: 40%;
        border: solid red 1px;
        background-color: wheat;
    }
    #side2 {
        position: relative;
        float: right;
        width: 40%;
        border: solid blue 1px;
        background-color: yellow;
    }
    </style>
    </head>
    <body>
    <form id="theForm">
    Stuff at the top.<br/>
    Stuff at the top.<br/>
    Stuff at the top.<br/>
    <input type="button" value="Swap sides" name="swapper" />
    <hr/>
    <br/>
    <div id="side1">
    This is content in side 1<br/>
    Name: <input name="name" />
    </div>
    <div id="side2">
    This is content in side 2<br/>
    Address: <input name="addr" /><br/>
    City: <input name="city" /><br/>
    etc.
    </div>
    </form>
    
    <script type="text/javascript">
    (
      function() 
      {
          var swapped = false;
          var form = document.getElementById("theForm");
          form.swapper.onclick = function( )
          {
              swapped = ! swapped; // flip the flag
              var s1 = document.getElementById("side1");
              var s2 = document.getElementById("side2");
              s1.style.float = swapped ? "right" : "left";
              s2.style.float = swapped ? "left" : "right";
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Hardist (10-01-2013)

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    You can swap any two nodes, no matter where they are in the document,
    as long as each has a parent that can contain the moved element.
    (If the two elements have the same tag they can always be swapped.)


    Code:
    function swap(a, b){
    	var p= b.parentNode, sib= b.nextSibling;
    	if(sib=== a) sib= sib.nextSibling;
    	a.parentNode.replaceChild(b, a);
    	return sib? p.insertBefore(a, sib):p.appendChild(a);
    }

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You might need to adjust not just the float but other styles when the divs are swapped. In that case, using CSS class is recommended.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #side1 {
        position: relative;
        float: left;
        width: 293px;
        border: solid red 1px;
        background-color: wheat;
        margin-right: 10px;
    }
    #side2 {
        position: relative;
        float: right;
        width: 293px;
        border: solid blue 1px;
        background-color: yellow;
    }
    #container {
    	width: 600px;
    	border: 1px solid blue;
    	background-color: silver;
    }
    #container.swapped #side1 {
    	float: right;
    	margin-right: 0;
    }
    #container.swapped #side2 {
    	float: left;
    	margin-right:10px;
    }
    .clearfix:after {
    	content: ".";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	line-height: 0;
    	height: 0;
    }
    </style>
    </head>
    <body>
    <form id="theForm">
    Stuff at the top.<br/>
    Stuff at the top.<br/>
    Stuff at the top.<br/>
    <input type="button" value="Swap sides" name="swapper" />
    <hr/>
    <br/>
    <div id="container" class="clearfix">
    	<div id="side1">
    	This is content in side 1<br/>
    	Name: <input name="name" />
    	</div>
    	<div id="side2">
    	This is content in side 2<br/>
    	Address: <input name="addr" /><br/>
    	City: <input name="city" /><br/>
    	etc.
    	</div>
    </div>
    </form>
    
    <script type="text/javascript">
    (
      function() 
      {
          var form = document.getElementById("theForm");
          form.swapper.onclick = function()
          {
              var container = document.getElementById("container");
              container.className = (/\bswapped\b/).test(container.className) ? container.className.replace(/\bswapped\b/, '') : container.className + ' swapped';
          }
      }
    )();
    </script>
    </body>
    </html>
    Using classes allows you also not to require extra boolean flag for checking swap state.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    What you could do that is very simple, put them both in a container div that just fits them side by side, float them both left on one condition, float them both right on the other condition. Or has someone already suggested this ?
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I think we can all agree that all of the above will work.

    I know my suggestion was just something off the top of my head.

    Until and unless Hardist comes back and replies we can't know exactly what he/she wants.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks for all the replies, I got it to working now, thanks a lot!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •