File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Dynamically moving the DIV Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Dynamically moving the DIV" Watch "Dynamically moving the DIV" New topic
Author

Dynamically moving the DIV

Saathvik Reddy
Ranch Hand

Joined: Jun 03, 2005
Posts: 228
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

Joined: Oct 08, 2006
Posts: 2458
Use the display property instead of the visibility property.
Rashmi Anand
Greenhorn

Joined: Feb 10, 2009
Posts: 11
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

Joined: Jun 03, 2005
Posts: 228
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

Joined: Oct 08, 2006
Posts: 2458
It makes sense, don't it?

You're welcome.
Saathvik Reddy
Ranch Hand

Joined: Jun 03, 2005
Posts: 228
Oh! That only works in fire fox. I tried with IE and it doesnt hide the div. Any suggessions please...
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Should work fine in IE. Are you cached?

Eric
Saathvik Reddy
Ranch Hand

Joined: Jun 03, 2005
Posts: 228
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
you should ALWAYS use quotes


should be



Use onclick instead on onchange.

Eric
Saathvik Reddy
Ranch Hand

Joined: Jun 03, 2005
Posts: 228
Thanks eric. Its works now.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Dynamically moving the DIV