...

View Full Version : Firefox: className Problem



Xibe
10-14-2008, 11:25 PM
Here's my basic JS function:

function searchtoggle(id) {
var e = document.getElementById(id);
people.className = 'notactive2';
places.className = 'notactive2';
things.className = 'notactive2';
everything.className = 'notactive2';
e.className = 'active2';
}


And here's my HTML:
Search for:
<a onfocus="if(this.blur)this.blur()" href="#" id="everything" onclick="searcheverything('everything')" class="activelong2"><span>Everything</span></a>
<a onfocus="if(this.blur)this.blur()" href="#" id="people" onclick="searchtoggle('people')" class="notactive2"><span>People</span></a>
<a onfocus="if(this.blur)this.blur()" href="#" id="places" onclick="searchtoggle('places')" class="notactive2"><span>Places</span></a>
<a onfocus="if(this.blur)this.blur()" href="#" id="things" onclick="searchtoggle('things')" class="notactive2"><span>Things</span></a>


This script basically changes the class of the <a> tags in each part when triggered. It works brilliantly in IE (both 7 and 8), Google Chrome, and Safari. But not in Firefox. I've read up on some common problems with the className thingy in Firefox, but never got a good working answer to my problem.

Why doesn't this work??

PLEASE Help! Thank you so much for any advice you can give me.

rangana
10-15-2008, 04:41 AM
What's the value of people, places, things and everything variable?

What's not working? Works fine on my end on FF.

Xibe
10-15-2008, 06:01 AM
Those aren't variables are they??? they're identifying the "id" tags of my <A> tags that I wanna change.

The idea of the class change is that it changes the class (the basic style) of each a tag as I click them or whatever... that doesn't happen in FF. Works in all other browsers.

AlexV
10-15-2008, 01:18 PM
Personally I never use something like:
people.className = 'notactive2';
(I remember seeing something like that and It was working but I don't like it)

I use instead:
var objPeople = document.getElementById('people');
if (objPeople)
objPeople.className = 'notactive2';

Always work :) and you aren't cofused with "people" since you declare a var for it...

Bill Posters
10-15-2008, 02:04 PM
Those aren't variables are they??? they're identifying the "id" tags of my <A> tags that I wanna change.
They're only working in IE (and Opera) due to IE's proprietary 'document.all' DOM, which allows you to address an element directly by its id value.

The official standards-based method is to use document.getElementById('');


Personally, I wouldn't bother checking for the existence of the element first, if you're working in a controlled code environment, where you know the elements will be present.

To make the script more scalable, you could consider referencing the anchor elements as children of a parent/ancestor element. This would enable you to loop through them all, deactivating them (rather than individually deactivating one via a dedicated line in the script) - and then re/activate the clicked anchor.

e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Blah</title>
<script type="text/javascript">

function searchtoggle(id) {

var e = document.getElementById(id);
var aEls = document.getElementById('whatever').getElementsByTagName('a');
for (var i = 0, aEl; aEl = aEls[i]; i++) {
aEl.className = '';
}

e.className = 'active';

}

</script>
<style type="text/css">

#whatever a {
color: red;
}

#whatever a.active {
color: green;
}

</style>
</head>
<body>

<ul id="whatever">
<li><a href="#" id="everything" onclick="searcheverything(this.id);return false;" class="active"><span>Everything</span></a></li>
<li><a href="#" id="people" onclick="searchtoggle(this.id);return false;"><span>People</span></a></li>
<li><a href="#" id="places" onclick="searchtoggle(this.id);return false;"><span>Places</span></a></li>
<li><a href="#" id="things" onclick="searchtoggle(this.id);return false;"><span>Things</span></a></li>
</ul>

</body>
</html>

Xibe
10-15-2008, 11:04 PM
Brilliant. Thanks all around!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum