css script doesn't work in FF

[darkdusky]

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:

<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>

This is the webpage where I got the sample:
http://www.dynamicdrive.com/style/cs...dd-color-tabs/

[WyCnet]

Hello, I am interested in the complete solution myself, to be used to foster theme changes when using my website user toolkit!

[chryaner]

if you put the var menuid in a alert box right after the innerText.. what is the output in FF and IE?

[darkdusky]

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>

[darkdusky]

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:

 <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>

[nathanwall]

Hey, glad you found a solution. If I may offer a "better" solution:

<script type="text/javascript">

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

        window.onload = setActiveMenu;  

</script>

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.

var menuid = control.innerText || control.textContent; will simply set the menuid value to whichever property is available.

[darkdusky]

thanks for better solution. I'll implement it now.

[chryaner]

you welcome

[jedaisoul]

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?

[WyCnet]

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?

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.

[jedaisoul]

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.

But you do not need JS to change the colour of menu items depending on the page selected! So I reiterate: why use it?