www.webdeveloper.com
Results 1 to 11 of 11

Thread: css script doesn't work in FF

  1. #1
    Join Date
    May 2012
    Posts
    4

    css script doesn't work in FF

    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>
    This is the webpage where I got the sample:
    http://www.dynamicdrive.com/style/cs...dd-color-tabs/

  2. #2
    Join Date
    Feb 2012
    Location
    youTUBE
    Posts
    234

    iinterested...

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

  3. #3
    Join Date
    Mar 2012
    Posts
    48
    if you put the var menuid in a alert box right after the innerText.. what is the output in FF and IE?

  4. #4
    Join Date
    May 2012
    Posts
    4

    var in alert

    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>

  5. #5
    Join Date
    May 2012
    Posts
    4
    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>

  6. #6
    Join Date
    Apr 2012
    Posts
    55
    Hey, glad you found a solution. If I may offer a "better" solution:

    Code:
    <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.
    joi JavaScript Framework - the sunnier side of JavaScript.

  7. #7
    Join Date
    May 2012
    Posts
    4
    thanks for better solution. I'll implement it now.

  8. #8
    Join Date
    Mar 2012
    Posts
    48
    you welcome

  9. #9
    Join Date
    Mar 2012
    Posts
    1,200
    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?

  10. #10
    Join Date
    Feb 2012
    Location
    youTUBE
    Posts
    234
    Quote Originally Posted by jedaisoul View Post
    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.

  11. #11
    Join Date
    Mar 2012
    Posts
    1,200
    Quote Originally Posted by WyCnet View Post
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles