Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Suckerfish dropdown menu working in Chrome but not in IE6.

    I am trying to develop a Suckerfish dropdown menu by following the instructions on the Suckerfish website. My code works in Google Chrome but not in Internet Explorer 6. The following is my code:

    Code:
    <script type="text/javascript">
    
             shHover = function() {
               var sfEls = document.getElementByID("nav").getElementsByTagName("LI");
               for (var i=0; i<sfEls.length;i++) {
                 sfEls[i].onmouseover=function() {
                 this.className+=" sfhover";
                 }
                 sfEls[i].onmouseout=function() {
                   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                 }
               }
             }
      
             if (window.attachEvent) window.attachEvent("onload",sfhover);
    
    </script>
    
    <style type="text/css">
    
    #nav, #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    }
    
    #nav li {
    	float: left;
    	width: 10em;
    }
    
    #nav li ul {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    }
    
    #nav li: hover ul {
    	left: auto;
    }
    
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    
    </style>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title><?php echo $title?></title>
        </head>
        <body>
          <ul id="nav">
            <li><a href="#">Percoidei</a>
              <ul>
                <li><a href="#">Remoras</a></li>
                <li><a href="#">Tilefishes</a></li>
                <li><a href="#">Bluefishes</a></li>
                <li><a href="#">Tigerfishes</a></li>
              </ul>
            </li>
       
            <li><a href="#">Anabantoidei</a>
              <ul>
                <li><a href="#">Climbing perches</a></li>
                <li><a href="#">Labyrinthfishes</a></li>
                <li><a href="#">Kissing gouramis</a></li>
                <li><a href="#">Pike-heads</a></li>
                <li><a href="#">Giant gouramis</a></li>
              </ul>
            </li>
        </body>
    What am I missing here? I'm thinking it may have to do with the JavaScript.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by AdrianRobinson View Post
    I am trying to develop a Suckerfish dropdown menu by following the instructions on the Suckerfish website. My code works in Google Chrome but not in Internet Explorer 6. The following is my code:

    Code:
    <script type="text/javascript">
    
             shHover = function() {
               var sfEls = document.getElementByID("nav").getElementsByTagName("LI");
               for (var i=0; i<sfEls.length;i++) {
                 sfEls[i].onmouseover=function() {
                 this.className+=" sfhover";
                 }
                 sfEls[i].onmouseout=function() {
                   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                 }
               }
             }
      
             if (window.attachEvent) window.attachEvent("onload",sfhover);
    
    </script>
    
    <style type="text/css">
    
    #nav, #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    }
    
    #nav li {
    	float: left;
    	width: 10em;
    }
    
    #nav li ul {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    }
    
    #nav li: hover ul {
    	left: auto;
    }
    
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    
    </style>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title><?php echo $title?></title>
        </head>
        <body>
          <ul id="nav">
            <li><a href="#">Percoidei</a>
              <ul>
                <li><a href="#">Remoras</a></li>
                <li><a href="#">Tilefishes</a></li>
                <li><a href="#">Bluefishes</a></li>
                <li><a href="#">Tigerfishes</a></li>
              </ul>
            </li>
       
            <li><a href="#">Anabantoidei</a>
              <ul>
                <li><a href="#">Climbing perches</a></li>
                <li><a href="#">Labyrinthfishes</a></li>
                <li><a href="#">Kissing gouramis</a></li>
                <li><a href="#">Pike-heads</a></li>
                <li><a href="#">Giant gouramis</a></li>
              </ul>
            </li>
        </body>
    What am I missing here? I'm thinking it may have to do with the JavaScript.
    Is that your code in the same order as you have it in your document?
    Teed

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, same order.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Try moving everything above your doctype to inside your <head></head> tags. As it is, that code is invalid.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title><?php echo $title?></title>
    <script type="text/javascript">
    
             shHover = function() {
               var sfEls = document.getElementByID("nav").getElementsByTagName("LI");
               for (var i=0; i<sfEls.length;i++) {
                 sfEls[i].onmouseover=function() {
                 this.className+=" sfhover";
                 }
                 sfEls[i].onmouseout=function() {
                   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                 }
               }
             }
      
             if (window.attachEvent) window.attachEvent("onload",sfhover);
    
    </script>
    
    <style type="text/css">
    
    #nav, #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    }
    
    #nav li {
    	float: left;
    	width: 10em;
    }
    
    #nav li ul {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    }
    
    #nav li: hover ul {
    	left: auto;
    }
    
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    
    </style>
    
    
        </head>
        <body>
          <ul id="nav">
            <li><a href="#">Percoidei</a>
              <ul>
                <li><a href="#">Remoras</a></li>
                <li><a href="#">Tilefishes</a></li>
                <li><a href="#">Bluefishes</a></li>
                <li><a href="#">Tigerfishes</a></li>
              </ul>
            </li>
       
            <li><a href="#">Anabantoidei</a>
              <ul>
                <li><a href="#">Climbing perches</a></li>
                <li><a href="#">Labyrinthfishes</a></li>
                <li><a href="#">Kissing gouramis</a></li>
                <li><a href="#">Pike-heads</a></li>
                <li><a href="#">Giant gouramis</a></li>
              </ul>
            </li>
        </body>
    </html>
    I also added a closing </html> tag which was missing(?) from your posted code. I added a complete doctype as well.
    Last edited by teedoff; 04-18-2011 at 04:15 PM.
    Teed

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Still wont work correctly though. You still have some errors in your code. If you go back through the tutorial for the suckerfish menu, you will see. You can also run your new code through the validator to see the errors.
    Teed

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <script type="text/javascript">

    shHover = function() {
    var sfEls = document.getElementByID("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length;i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }

    if (window.attachEvent) window.attachEvent("onload",sfhover);

    </script>
    Any clues?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by abduraooft View Post
    Any clues?
    lol yep typoes there too. I didnt even look at his javascript, since his mark-up was a mess.
    Teed


  •  

    Posting Permissions

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