PDA

View Full Version : 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...


<!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. ;)