hiding a stack of divs
Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Web Design Discussion
Forum Description: Discussion on web design and development subjects.
URL: https://forums.webwiz.net/forum_posts.asp?TID=15249
Printed Date: 29 March 2026 at 12:00pm
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com
Topic: hiding a stack of divs
Posted By: ctoz
Subject: hiding a stack of divs
Date Posted: 27 May 2005 at 1:36am
|
I have a page which uses a series of divs which start hidden and are made visible with an onClick...these layers illustrate points in the main text. The OnClick also hides the div/s made visible by adjacent links, so it allows for a bit of non-sequential viewing. There's also a "hide all" link, which sits at the top of the z-index stack, and has the whole bunch of layer ids attached individually.It really needs something more economical -- a function that would identify all the layers within a range of z-indexes and hide them; so that the onClick commands would become 'hide all the overlays'; show 'this overlay';.
The basic hide/show script is:
// ********** changing layers , from Brad Hedge's Code_Punk.net
function box(boxname,menustate)
{ if (document.getElementById) {document.getElementById(boxname).style.visibility = menustate } } but I'm stumped about how to code the function, what to do to identify the necessary divs by z-index. Any pointers for this cut'n'paster would be welcome...
example at
http://www-personal.usyd.edu.au/~ctillam/thoughtexp/thought3.htm - http://www-personal.usyd.edu.au/~ctillam/thoughtexp/thought3.htm
|
Replies:
Posted By: ub3rl337ch3ch
Date Posted: 29 May 2005 at 9:14pm
|
you can read zindex in js by using var something
something = document.layer.zIndex
you'd set up a function along the lines of
getallxindex(startindex,endindex){
var tempindex
tempindex = document.layer1.zIndex
if startindex < tempindex < endindex{
//do the visibilty change thingy
}
tempindex = document.layer2.zIndex
if startindex < tempindex < endindex{
//do the visibility thingy
}
}
where startindex and end index are the zIndex's that you want to find layers between.
the obvious drawback of this is that it requires that you code an if for each inidividual layer and doesn't cascade for any new layers... but its the best i can think of.
|
Posted By: ctoz
Date Posted: 30 May 2005 at 3:02am
|
Thank you ub3... but it looks almost as formidable as my hand-coded version. There must be a way to not have to code all those "if" statements, some sort of array maybe? any other takers?
|
Posted By: ub3rl337ch3ch
Date Posted: 30 May 2005 at 7:35pm
|
i don't know the exact coding or if its even possible, but i'm gueesing you could code all of your layers into a string like this:
var layers
layers = ';layer1;layer2;layer3;layer4;'
then do a count for each bit of text between the ;'s soemthing like (here is where the code IS wrong, but you get the gist)
var countoflayers
countoflayers = count(';',';')
then do a loop a number of times equal to countoflayers where you sub in the part between the ;'s for the layer name in the code i wrote above.
don't know if that is possible, probably easier (more likely to be doable) in asp, which is where i spend most of my time...
alternately you could just do this:
getallxindex(layername,startindex,endindex){
var tempindex
tempindex = document.layername.zIndex
if startindex < tempindex < endindex{
//do the visibilty change thingy
}
}
and call that function for each layer... maybe make it quicker to type in by hardcoding the startindex and endindex where possible...
either that or i could stop pretending i know what i'm talking about...   |
Posted By: ctoz
Date Posted: 30 May 2005 at 8:08pm
|
Code_Punk came through with a simple solution...I thought he'd gone bush:
give each of the layers to be hidden the same class and then hide the class--
document.getElementByClass("thesebits").style.visibility = "hidden";
 |
Posted By: ub3rl337ch3ch
Date Posted: 30 May 2005 at 8:48pm
*grumbles something about being shown up*
 |
Posted By: ctoz
Date Posted: 30 May 2005 at 9:13pm
u and me both
 |
Posted By: dfrancis
Date Posted: 31 May 2005 at 10:17am
You guys ROCK!
 (That's a good thing!)
|
ub3rl337ch3ch wrote:Posted By: ub3rl337ch3ch
Date Posted: 31 May 2005 at 6:51pm
| wait, wait, wait... some of that made sense?!?! |
Posted By: ctoz
Date Posted: 31 May 2005 at 9:07pm
|
am having trouble with it... Gave the divs to be hidden the class "veil":
function hider() { if (document.getElementByClass) {document.getElementByClass("veil").style.visibility = "hidden"} } < a href="#" onClick="hider(); " >link< /a > Not working; tried it without the "if" statement, still no go. Have posted similar to Code_Punk. |
Posted By: ctoz
Date Posted: 01 June 2005 at 1:30am
|
...so
isn't a readymade js function: one has to create it, and there are many flavours out there already which might be adaptable. II'll post when it's solved
|
Posted By: ctoz
Date Posted: 03 June 2005 at 10:52pm
|
http://cookiecrook.com/webx/getElementByClass.htm - http://cookiecrook.com/webx/getElementByClass.htm
phoo rules |