View Full Version : Visibility Issues

07-26-2009, 03:56 PM
I am going to try and explain this as best as possible without complete confusion :D

I am trying to develop a website that will allow me to use Javascript to swap around hidden DIV content within the page as well as AJAX calls to external pages. Unfortunately, I have been encountering an issue when switching hidden content that has me stumped.

If you visit the page, http://www.wanamakermedia.com/~s845/, the first page should have a big black square in the middle of it. Hidden in a DIV layer underneath that (via CSS display:none) I have content that is meant to be shown when someone clicks on the button "The Experience".

However, when I click on the button, the page switches the DIV content but does not display the text on the left hand side (which is contained within a DIV with ID "scroll"). If I change that DIVs ID tag to a CLASS tag, the content displays fine during the switch.

I am using a very basic script I found that identifies all of the DIV layers within a DIV, disables all of the ones that have a class of "display" by changing the class to "hidden" and then activates the requested DIV by changing its class to "display". However, I think that it is messing with the one layer labeled "scroll" but am not sure how or why.

The same thing can be seen with the button labeled "Ambassadors". That layer is hidden on page load and has a sub DIV layer with a class label of "text". When it is coded this way, I can see the word AMBASSADOR without a problem, however, when I change the sub DIV layer CLASS tag to an ID tag, the text no longer displays.

Any ideas on how I can switch out DIV layers on the same page without running into this problem? It looks like it should be a simple fix, but I have been unable to open my eyes enough to see the problem!

07-26-2009, 04:28 PM
It's right there in your Switch function:

var divname = divcount[i].id;
if(divname != ""){
var el = document.getElementById(divname);

All the divs having an id will be hidden, and afterwards only the one containing the activated content will be shown again. So, either use ids only on those containers or change that piece of code.

07-26-2009, 06:43 PM
I'm an idiot! Thanks! I was more focused on the className part of it that I didn't think to look a bit higher!

I changed the code on the page so that it reads:

if(divname != "" && divname != "scroll"){