Win a copy of Svelte and Sapper in Action this week in the JavaScript 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 all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Dynamically moving the DIV

 
Ranch Hand
Posts: 228
  • 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?
 
Ranch Hand
Posts: 2458
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Use the display property instead of the visibility property.
 
Greenhorn
Posts: 11
  • 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
  • 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
  • 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
  • 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...
 
author
Posts: 15385
6
  • 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
  • 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
Posts: 15385
6
  • 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
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks eric. Its works now.
 
Water proof donuts! Eat them while reading this tiny ad:
the value of filler advertising in 2020
https://coderanch.com/t/730886/filler-advertising
    Bookmark Topic Watch Topic
  • New Topic