Javascript help needed

Reply Subscribe

Thread Tools

Search this Thread

Sep 27, 2007 | 03:39 PM

GazTheHat

Thread Starter

Scooby Regular

Joined: Aug 2005

Posts: 7,638

Likes: 0

From: 392/361 MY04 STi

Javascript help needed

I've done an FAQ page, using some (accordion-style) script to make the answer appear/disappear. It currently has a role over to indicate which question.

The problem i have is trying to change the question that has been clicked (answer showing) to be bold.

Code snippet:

<style type="text/css">
.menuOut {cursor: pointer; color:#000000; solid #000000; font-family: verdana; margin-bottom: 10px;}
.menuOver {cursor: pointer; color:#fa2922; solid #fa2922; font-family: verdana; margin-bottom: 10px;}
.submenu {background: #e9eef2; font-family:verdana; font-size:12px; padding: 5px 20px 5px 20px;}
</style>
<script type="text/javascript">
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("faq").getElementsByTagNam e("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function ChangeClass(menu, newClass) {
if (document.getElementById) {
document.getElementById(menu).className = newClass;
}
}
document.onselectstart = new Function("return true");
</script>

.
.
.
.

<div id="faq">
<p id="faq1" class="menuOut" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('faq1','menuOver')" onmouseout="ChangeClass('faq1','menuOut')">Why do birds suddenly appear?</p>
<div class="submenu" id="sub1" style="display:none;">
Ask the carpenters, they know.
<br/></div>

<p id="faq2" class="menuOut" onclick="SwitchMenu('sub2')" onmouseover="ChangeClass('faq2','menuOver')" onmouseout="ChangeClass('faq2','menuOut')">Is the world round?</p>
<div class="submenu" id="sub2" style="display:none;">
Some columbus chap seems to think so.
<br/></div>

</div>

Sep 27, 2007 | 04:03 PM

ryn004

Scooby Regular

Joined: Apr 2005

Posts: 1,085

Likes: 0

From: Malta

Is there a seperate css that the script uses? Usually Links have 4 states - unactive, hover, visited, active.
What I can understand is that you want teh current viewed question to be bold, hence you would edit the font-weight property to bold for when a link is active on the page.

Sep 27, 2007 | 04:42 PM

GazTheHat

Thread Starter

Scooby Regular

Joined: Aug 2005

Posts: 7,638

Likes: 0

From: 392/361 MY04 STi

There is the style in the head, as shown above, (While i'm testing) and an external css file.

I tried changing the question tags from p to a, then putting a:active, a:hover styles but it didn't work, or i wasn't doing it right.

The next thing i tackled, with my very limited JS knowledge was...

Changed all the questions to bold. Then in the script, after a question has been clicked, where it checks all the tags and changes the display value to none.

for (var i=0; i<ar.length; i++){
ar[i].style.display = "none";
}

I tried adding in there, saying change all the questions to not bold.

Something like ar[i].font.weight = "bold";

Sep 27, 2007 | 06:06 PM

RichB

Scooby Regular

Joined: Apr 1999

Posts: 3,666

Likes: 0

From: Bore Knee Muff

its a bit of a pain this but i did something similar only yesterday....

I'll PM you

Sep 27, 2007 | 06:25 PM

RichB

Scooby Regular

Joined: Apr 1999

Posts: 3,666

Likes: 0

From: Bore Knee Muff

i think your mouseover and mouseouts are confusing things a bit. Here is your example working where the title stays bold until you click on the other.

<head>
<style type="text/css">
.menuOut {cursor: pointer; color:#000000; solid #000000; font-family: verdana; margin-bottom: 10px;}
.menuOver {cursor: pointer; color:#fa2922; solid #fa2922; font-family: verdana; margin-bottom: 10px;}
.menuOverB {font-weight:bold;cursor: pointer; color:#fa2922; solid #fa2922; font-family: verdana; margin-bottom: 10px;}
.submenu {background: #e9eef2; font-family:verdana; font-size:12px; padding: 5px 20px 5px 20px;}
</style>
<script type="text/javascript">
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("faq").getElementsByTagNam e("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function ChangeClass(menu, newClass) {
if (document.getElementById) {
document.getElementById(menu).className = newClass;
}
}
document.onselectstart = new Function("return true");
</script>
</head>
<body>

<div id="faq">
<a href="#" id="faq1" class="menuOut" onclick="javascript:SwitchMenu('sub1');ChangeClass ('faq1','menuOverB');ChangeClass('faq2','menuOver' );return false;">Why do birds suddenly appear?</a>
<div class="submenu" id="sub1" style="display:none;">
Ask the carpenters, they know.
<br/>
</div>
<br />
<a href="#" id="faq2" class="menuOut" onclick="javascript:SwitchMenu('sub2');ChangeClass ('faq1','menuOver');ChangeClass('faq2','menuOverB' );return false;" >Is the world round?</a>
<div class="submenu" id="sub2" style="display:none;">
Some columbus chap seems to think so.
<br/>
</div>

</div>

</body>