Granny's Programming Pearls
"inside of every large program is a small program struggling to get out"
JavaRanch.com/granny.jsp
Win a copy of Head First Android this week in the Android forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Rob Spoor
  • Bear Bibeault
Saloon Keepers:
  • Jesse Silverman
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • Al Hobbs
  • salvin francis

Dynamically moving the DIV

 
Ranch Hand
Posts: 228
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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?
 
Ranch Hand
Posts: 2458
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Use the display property instead of the visibility property.
 
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It makes sense, don't it?

You're welcome.
 
Saathvik Reddy
Ranch Hand
Posts: 228
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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...
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Should work fine in IE. Are you cached?

Eric
 
Saathvik Reddy
Ranch Hand
Posts: 228
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
you should ALWAYS use quotes


should be



Use onclick instead on onchange.

Eric
 
Saathvik Reddy
Ranch Hand
Posts: 228
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks eric. Its works now.
 
You showed up just in time for the waffles! And this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic