/    Sign up×
Community /Pin to ProfileBookmark

hiding all other div layers upon showing one

Copy linkTweet thisAlerts:
May 20.2004

Hello, I’m creating a page which has alot of links on it. Each link will show a hidden div layer. I keep all the layers in the same position, so when more than one is shown, they overlap each other and it looks messy. To get around this, I guess I need some sort of code that will hide all other visible layers upon showing one. Is this possible?

please help ?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@theBody44May 20.2004 — Store the div's ID's in an array and then create a loop over the length of that array which makes ALL of the DIV's invisible. Then make your 1 div visible.
Copy linkTweet thisAlerts:
@W8_4meauthorMay 20.2004 — If only I knew how to do all of that..... ?
Copy linkTweet thisAlerts:
@VirbatemMay 20.2004 — create a div layer with a style of:

style="display:none;"

This makes the div not only invisible but non-existant as far as a page presence is concerned. it's still there but takes up no space. This allows you to stack them on top of each other, or so it seems.

If all the DIVs have a ID incremental such as:

<div id=link0 style="display:none; position:relative;"></div>

<div id=link1 style="display:none; position:relative;"></div>

<div id=link2 style="display:none; position:relative;"></div>

you can use a script to iterate through them all and turn all off but the one you wanted.

eg:

if you have an image:

<img src="one.jpg" onmouseover="show(1);">ONE</a>

and a companion function:

fumction show(n)

{ for(i=0;i<3;i++)

document.getElementById("link"+i).style.display="none";

document.getElementById("link"+n).style.display="";

};

This will iterate through divs 0 to 2 and turn them off. Then we turn the requested div back on again.

For each new div you add to the document change the loop:

for(i=0;i<6;i++)

for 6 link divs as an example.

Dion...

[o]


[i]Originally posted by W8 4me [/i]

[B]Hello, I'm creating a page which has alot of links on it. Each link will show a hidden div layer. I keep all the layers in the same position, so when more than one is shown, they overlap each other and it looks messy. To get around this, I guess I need some sort of code that will hide all other visible layers upon showing one. Is this possible?



please help ? [/B][/QUOTE]
Copy linkTweet thisAlerts:
@W8_4meauthorMay 20.2004 — Is there anything a simpleton like me can understand?!! sorry.

What exactly would I modify in the code on the link below?


http://homepage.ntlworld.com/a.mcleod4/pleasehelpme.txt
Copy linkTweet thisAlerts:
@PittimannMay 21.2004 — Hi!

Virbatem's code, slightly modified:[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function show(n){
for(i=1;i<=3;i++){
document.getElementById("layer"+i).style.display="none";
document.getElementById("layer"+n).style.display="block";
}
}
//-->
</script>
</head>
<body>
<div>
<a href="#" onclick="show(1);return false;">show layer1 but hide all the others</a>
<p><a href="#" onclick="show(2);return false;">show layer2 but hide all the others</a>
<p><a href="#" onclick="show(3);return false;">show layer3 but hide all the others</a>
</div>
<div id="layer1" style="display: none">blah blah blah blah blah</div>
<div id="layer2" style="display: none">This is a layer baby!!!!!</div>
<div id="layer3" style="display: none">some other info here...etc etc etc</div>
</body>
</html>[/code]Cheers - Pit
Copy linkTweet thisAlerts:
@W8_4meauthorMay 21.2004 — *bows*
×

Success!

Help @W8_4me spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...