/    Sign up×
Community /Pin to ProfileBookmark

css script doesn’t work in FF

Copy linkTweet thisAlerts:
May 04.2012

Hi I am using the following snippet in my website to have tabs along the top. The tabs change colour if the user is on a particular page. This works in IE, Chrome and Safari, but not FireFox.
Here is the relevant code:

[CODE]<script type=”text/javascript”>

function setActiveMenu() {
var control = document.getElementById(‘tabid’);
var menuid = control.innerText;
var menu = document.getElementById(menuid);
menu.className = ‘current’;
}

window.onload = setActiveMenu;

</script>[/CODE]

This is the webpage where I got the sample:
[url]http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs/[/url]

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@WyCnetMay 04.2012 — Hello, I am interested in the complete solution myself, to be used to foster theme changes when using my website user toolkit!
Copy linkTweet thisAlerts:
@chryanerMay 04.2012 — if you put the var [B]menuid[/B] in a alert box right after the innerText.. what is the output in FF and IE?
Copy linkTweet thisAlerts:
@darkduskyauthorMay 04.2012 — In FireFox the alert is not fired (So javascript error)

In chrome the alert fires and correctly returns the name of the inner page (e.g. page1) , which relates to the tab:

In the example below the alert returns "page1"

Tabs:

<div id="ddcolortabs">

<ul>

<li id="page1" .....

Inner Page:

<span id="tabid" style="display: none">page1</span>
Copy linkTweet thisAlerts:
@darkduskyauthorMay 04.2012 — Found a solution using textContent instead of innerText. Thanks for pointing me in right direction.

Here is solution in-case any one else comes on this:
[CODE] <script type="text/javascript">

function setActiveMenu() {
var control = document.getElementById('tabid');


if (document.all) {
//browsers other than FireFox
var menuid = control.innerText;
var menu = document.getElementById(menuid);
menu.className = 'current';
// alert("not FF " + menuid);
} else {
var menuidFF = control.textContent;
var menuFF = document.getElementById(menuidFF);
menuFF.className = 'current';
// alert("FF " + menuidFF);
}

}

window.onload = setActiveMenu;


</script>[/CODE]
Copy linkTweet thisAlerts:
@nathanwallMay 04.2012 — Hey, glad you found a solution. If I may offer a "better" solution:

<i>
</i>&lt;script type="text/javascript"&gt;

<i> </i> function setActiveMenu() {
<i> </i> var control = document.getElementById('tabid');
<i> </i> var menuid = control.innerText || control.textContent;
<i> </i> var menu = document.getElementById(menuid);
<i> </i> menu.className = 'current';
<i> </i> }

<i> </i> window.onload = setActiveMenu;

&lt;/script&gt;

The reason I say this is better is because it chooses whether to use innerText or textContent based on which one is available. It doesn't require testing for document.all, which -- although in practice does well at detecting IE -- doesn't ensure that all browsers will work in the future and doesn't deal with the real issue. For instance, what if Firefox suddenly decides to implement document.all but not innertText? Then your script will break.

[B]var menuid = control.innerText || control.textContent;[/B] will simply set the menuid value to whichever property is available.
Copy linkTweet thisAlerts:
@darkduskyauthorMay 04.2012 — thanks for better solution. I'll implement it now.
Copy linkTweet thisAlerts:
@chryanerMay 04.2012 — you welcome ?
Copy linkTweet thisAlerts:
@jedaisoulMay 06.2012 — This can be done in CSS or (better) in PHP. Why use JS in the first place? What happens on browsers that do not support JS or if JS is switched off?
Copy linkTweet thisAlerts:
@WyCnetMay 06.2012 — This can be done in CSS or (better) in PHP. Why use JS in the first place? What happens on browsers that do not support JS or if JS is switched off?[/quote]

My response is that JS is an integral part of the web surfing experience, and those who switch it off should go back to the textbook experience! As such Web Developers should ignore that small sub-section of the populace which should be deemed irrevelant to a modern WEB lifestyle.
Copy linkTweet thisAlerts:
@jedaisoulMay 06.2012 — My response is that JS is an integral part of the web surfing experience, and those who switch it off should go back to the textbook experience! As such Web Developers should ignore that small sub-section of the populace which should be deemed irrevelant to a modern WEB lifestyle.[/QUOTE]
But you do not need JS to change the colour of menu items depending on the page selected! So I reiterate: why use it?
×

Success!

Help @darkdusky 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.27,
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,
)...