/    Sign up×
Community /Pin to ProfileBookmark

Multiple Layer transparencies

I’ve got a problem that a lot of trial and error has led me to no answer and I didn’t find a thread like this with a quick search online and these forums.

I have a site that uses quite a few layers, as part of the design. I’m using a nav bar on the top to switch layers below with varying content. Each layer with content is the same size and in the same position.

My problem is that when i want one layer to appear, i’d like to have all other layers matching a certain name dissapear, since I’m only looking for one layer to be visible at a time.

Ideally, I’d like to simply have
img src=”about_button.jpg” onclick=”showlayer(‘about’,’1′);”

Where ‘about’ is the section, and page1 is the particular page it shows and all layers are named as div id=”about.page3″ (period included). I’d like to simply write :
function showlayer(section,num)
{
document.all(section.*).style.visibility=”hidden”;
document.all(section.page+num).style.visibility=”visible”;
}
so all layers called about.page4, about.page5 would dissapear. and if i clicked showlayer(‘contact’,’3′), everything would dissapear and the layer called contact.page3 would appear.

Basically its a matter of syntax.

And while its not critical, If someone knows or prefers to write this is a mac-browser friendly syntax, that would help me even more, if not, no biggie.

Thanks for your time.

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@FangMay 14.2005 — Hree are 2 methods; IE and DOM:
function showlayerIE(section,num) {
for(var i=0; i<document.all.length; i++) {
if(!document.all[i].id.indexOf(section)) {
document.all[i].style.visibility='hidden';
}
}
document.all[section+'.page'+num].style.visibility="visible";
}

function showlayerDOM(section,num) {
var oList=document.getElementsByTagName('*');
for(var i=0; i<oList.length; i++) {
if(!oList[i].id.indexOf(section)) {
oList[i].style.visibility='hidden';
}
}
document.getElementById(section+'.page'+num).style.visibility="visible";
}
×

Success!

Help @Lucid 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.23,
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,
)...