change DIV position

**reck** · 11-12-2009, 07:49 PM

how do I dynamically change the DIV1 and DIV2 position As you can see to image 1 to image 2?

**coothead** · 11-13-2009, 10:16 AM

Hi there reck,

and a warm welcome to these forums.

Try it like this...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>untitled document</title>

<style type="text/css">
#changer {
    float:right;
    width:280px;
    padding:5px;
    border:3px double #c60;
    background-color:#fc9;
    color:#300;
    text-align:center;
    cursor:pointer;
 }
#container {
    clear:both;
    width:276px;
    height:1%;
    padding:0 4px 4px;
    border:3px double #000;
    margin:auto;
    overflow:hidden;
 }
#red,#green {
    float:left;
    width:154px;
    height:74px;
    margin-top:4px;
    background-color:#ca1817;
    font-weight:bold;
    color:#fff;
    text-align:center;
    line-height:74px;
 }
#blue {
    float:right;
    width:118px;
    height:152px;
    margin-top:4px;
    color:#fff;
    background-color:#17a1ea;
    font-weight:bold;
    color:#fff;
    text-align:center;
    line-height:152px;
 }
#green {
    background-color:#006b4b;
 }
</style>

<script type="text/javascript">

function changeDivs(){
   obj1=document.getElementById('changer');
   obj2=document.getElementById('red');
   test=true;
obj1.onclick=function(){
if(test==true) {
   obj2.style.width='276px';
   obj1.firstChild.nodeValue='click to restore original positions';
   test=false;
 }
else {
   obj2.style.width='154px';
   obj1.firstChild.nodeValue='click to change the divs position';
   test=true;
   }
  }
 }

if(window.addEventListener){
   window.addEventListener('load',changeDivs,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',changeDivs);

  }
 }

</script>

</head>
<body>

<div id="changer">click to change the divs position</div>

<div id="container">

 <div id="red">DIV 1</div>
 <div id="blue">DIV 2</div>
 <div id="green">DIV 3</div>

</div>

</body>
</html>

coothead

**reck** · 11-13-2009, 11:21 AM

is exactly what I wanted
thanks

**coothead** · 11-13-2009, 11:25 AM

No problem, you're very welcome.

Thread: change DIV position

Thread Tools

Search Thread

change DIV position

Bookmarks

Bookmarks

Posting Permissions