Win a copy of Clojure in Action this week in the Clojure forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Dynamically moving the DIV

 
Saathvik Reddy
Ranch Hand
Posts: 228
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,

I have two DIV's let say div1 and div2.
div2 is placed right underneath div1. div1 can be hidden on a user action. when div1 is hidden that space is reserved (i get empty space on the page).

when div1 is hidden i want to move div2 to div1's palce.

How do i acheive this? I tried div2 style="position: relative; but it doesnt work?
 
Bauke Scholtz
Ranch Hand
Posts: 2458
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Use the display property instead of the visibility property.
 
Rashmi Anand
Greenhorn
Posts: 11
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Srikanth,

Here is the sample code for your reference.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"><!--
function replaceDiv()
{
document.getElementById("div1").style.display="none";
}
</script>
</head>
<body>
<div id="div1" style="height:200px; width:200px;border: medium double black ">
This is DIV 1
</div>
<div id="div2" style="height:200px; width:200px;border: medium double blue;">
This is DIV 2
</div>
<input type="submit" onclick="replaceDiv()" value="Replace Div">
</body>

Hope you could resolve this.
 
Saathvik Reddy
Ranch Hand
Posts: 228
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks a lot guys. I was doing:

document.getElementById('divID').style.visibility = 'hidden';

but changing this to

document.getElementById('divID').style.display = 'none';

as per your sugessions worked perfect. Thanks a lot again.
 
Bauke Scholtz
Ranch Hand
Posts: 2458
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It makes sense, don't it?

You're welcome.
 
Saathvik Reddy
Ranch Hand
Posts: 228
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Oh! That only works in fire fox. I tried with IE and it doesnt hide the div. Any suggessions please...
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Should work fine in IE. Are you cached?

Eric
 
Saathvik Reddy
Ranch Hand
Posts: 228
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric Pascarello wrote:Should work fine in IE. Are you cached?

Eric


Please find the complete code listing below. It behaves differently in IE and Fire Fox. In IE after i check the check box it doesnt hide the div but, if i click anywhere on the page then it hides it.



Please test this code both in IE and Firefox.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
you should ALWAYS use quotes


should be



Use onclick instead on onchange.

Eric
 
Saathvik Reddy
Ranch Hand
Posts: 228
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks eric. Its works now.
 
I agree. Here's the link: http://aspose.com/file-tools
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic