Jump to content

A hair puller disguised as simple CSS...


swirlingDervish
 Share

Recommended Posts

...or it should be simple. Newbie here, trying to apply a style to a <div> element by js. I have js buttons that change visibility on several <div>s which all seem to work fine using the exact switch function to choose the right element to reveal except for two book buttons. The syntax seems correct but neither the display nor class style is applying. Help! Here is the page link:

 

http://siddhicenter.org/Inner/Space/Store.htm

 

I know it has to be something crazy simple, right?

 

Thanks....

Link to comment
Share on other sites

Hi, thanks for responding. Unfortunately, it's not modifying either book button. ;) A little history: about a two weeks ago, these buttons worked; I moved the elements around for a different placement (didn't change any CSS or code referencing) and tested, only to find it not working. I moved the elements back to their previous places, still didn't work. Switch function and CSS code for book buttons is exactly the same prior to and after the move, and the book CSS class "CDs" style is exactly the same as all the other button styles, before and after the move. Note: when using Chrome debugger, I noticed that for all buttons, the element's style class is visibly changed as per switch function when any button is clicked, except the book buttons. :facepalm: "CDs" class style is pulled from external sheet. I've included some of the code:

 

/* debugger results' impact on elements after received button mouse click */

 

<<<div id="Inits" class="CDs" style="display: none;">...</div>

<div id="Guidd" class="CDs" style="display: none;">...</div>

<div id="LovRel" class="CDs" style="display: block;">...</div>

<div id="Book" class="CDs";">...</div> <- NOTE

<div id="Inits" class="CDs" style="display: none;">...</div>

<div id="Inits" class="CDs" style="display: none;">...</div>

>>

 

/* the multiple choice for object visibility */

 

<< switch(chc){

case 1:
document.getElementById("Inits").style.display = "block";
document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = document.getElementById("Book").style.display = "none";
document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none";
break;
case 2:
document.getElementById("Guidd").style.display = "block";
document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Book").style.display = "none";
document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none";
break;
case 3:
document.getElementById("LovRel").style.display = "block";
document.getElementById("Guidd").style.display = document.getElementById("Inits").style.display = document.getElementById("Book").style.display = "none";
document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none";
break;
case 4:
document.getElementById("Book").style.display = "block";
document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none";
document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = "none";
break;
case 5:
document.getElementById("Malas").style.display = "block";
document.getElementById("Ship").style.display = document.getElementById("Book").style.display = "none";
document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = "none";
break;
case 6:
document.getElementById("Ship").style.display = "block";
document.getElementById("Malas").style.display = document.getElementById("Book").style.display = "none";
document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = "none";
break;
}
>>

 

/* ...and external CSS class */

 

.CDs {
position: absolute;
left:197px;
top:187px;
width:755px;
height:511px;
color:green;
font:12px Verdana;
text-shadow:1px 1px #0b0b0b;
z-index:5;
display:none;
}
Any thoughts...? Thanx 4 any help....
Link to comment
Share on other sites

Go through your document again and make sure you don't have any duplicate IDs. When I tested your page the first element with a "Book" ID was being manipulated but not the other one which you intended to change. By changing the ID of the first book element your page should work as you intended.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...