www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] drop down menu script doesn't work in all browsers

  1. #1
    Join Date
    Aug 2013
    Posts
    3

    resolved [RESOLVED] drop down menu script doesn't work in all browsers

    I downloaded a JavaScript script to create drop-down menus (I know little if anything about JS).

    I amended it to display how I wanted and it works fine in some browsers (eg, IE, Firefox, Opera) but not in others (eg, Chrome, Safari).

    http://home.btconnect.com/thetopper/dropdown_menu_1.htm

    In the ones where it fails, it works OK on the first drop-down menu it produces (Sparky - one drop-down menu), but then falls over, putting the rest of the menu on the left hand side of the browser window. Those subsequent sub-menus can be seen on mouseover.

    It's frustrating, as it works once - why not the rest? (the original script had 1 menu + 3 sub-menus, so probably down to my code for the second drop-down menu onwards).

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,637
    i don't think there will be many volunteers to dig out what is in the linked scripts somewhere in the internet and to guess what was changed by you in the unbeknownst original script... if the original script worked good then post it here and show what exactly was changed
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Aug 2013
    Posts
    3
    Hi, thanks very much for getting back to me.
    I haven't changed any of the JavaScript (wouldn't know where to start), only the HTML / CSS. When I said " I amended it" I meant the HTML / CSS that was also downloaded. On re-reading my post, I realise now that it's not clear and it's my fault. Apologies.

    To recap -the whole thing works on all the drop-down menus in certain browsers and works on the first in the others. I was hoping that someone might have an idea what was wrong by looking at how the script(s) run or come across something similar before.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,262

    Question

    Quote Originally Posted by steveoh View Post
    Hi, thanks very much for getting back to me.
    I haven't changed any of the JavaScript (wouldn't know where to start), only the HTML / CSS. When I said " I amended it" I meant the HTML / CSS that was also downloaded. On re-reading my post, I realise now that it's not clear and it's my fault. Apologies.

    To recap -the whole thing works on all the drop-down menus in certain browsers and works on the first in the others. I was hoping that someone might have an idea what was wrong by looking at how the script(s) run or come across something similar before.
    By "certain browsers" what do you mean? Which browsers are giving you the fits?

    Also, what parts are working right and which are not to your satisfaction?
    Vague questions tend to get vague responses.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,262

    Lightbulb

    Here is a different version I have changed so many times that I forget where it came from,
    but you can probably find the original with a google search of: cross browser css menu
    or some combination.

    I have the CSS and JS imbedded in the code below, but I show how it would actually be in external files.
    Most of the links have been removed for non-sense reasons, but you should be able to modify the HTML to your needs.


    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Homestead </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <!-- <link rel="stylesheet" type="text/css" href="MenuCommon.css"> -->
    <style type="text/css">
    /*---- CROSS BROWSER DROPDOWN MENU ----*/
     ul#nav {
       margin: 0 0 0 0px;}
     ul.drop a {
       display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
     ul.drop, ul.drop li, ul.drop ul {
       list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #888; color: #fff;}
     ul.drop {
       position: relative; z-index: 597; float: left; }
     ul.drop li {
       float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
     ul.drop li.hover, ul.drop li:hover {
       position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
     ul.drop ul {
       visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 155px; /* 245px; */
       background: #888; border: 1px solid #fff; }
     ul.drop ul li {
       float: none; }
     ul.drop ul ul {
       top: -2px; left: 100%; }
     ul.drop li:hover > ul {
       visibility: visible }
    
    /* This rule will be applied to hide element on the page */
     .hidden { display: none; }
     #toggled_0 { height:100px; width:300px; border:1px solid  blue; overflow:auto; }
    </style>
    
    
    <!-- <script type="text/javascript" src="MenuCommon.js"></script> -->
    <script type="text/javascript">
    /*---- CROSS BROWSER DROPDOWN MENU ----*/
    // Checks that the class 'className' is defined for the element 'el'
    function hasClass(el, className) {
        var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
        return re.test(el.className);
    }
    
    // Adds the class 'className' to the element 'el'
    function addClass(el, className) {
        if ( ! hasClass(el, className) ) {
            el.className += ' ' + className;
        }
    }
    
    // removes the class 'className' from the element 'el'
    function delClass(el, className) {
        var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
        el.className = el.className.replace(re, ' ');
    }
    
    // Toggles the class 'className' to the element 'el'
    function toggleClass(el, className) {
        if ( hasClass(el, className) ) { delClass(el, className); }
                                  else { addClass(el, className);
        }
    }
    </script>
    
    </head>
    <body>
    <ul id="TOP" class="drop">
    
     <li><a href="#TOP">Home</a>
      <ul>
       <li><a href="#">About Me</a></li>
       <li><a href="#">CV</a>
        <ul>
         <li><a href="#">Brief</a></li>
         <li><a href="#">Extended</a></li>
         <li><a href="#">Portfolio</a>
          <ul>
           <li><a href="#">Teaching</a></li>
           <li><a href="#">Administrative</a></li>
           <li><a href="#">Updates</a></li>
          </ul>
         </li>
         <li><a href="#">4-Fun</a></li>
        </ul>
       </li>
       <li><a href="#">Projects</a>
        <ul>
         <li><a href="#">ePub/iBook</a></li>
         <li><a href="#">Tips</a>
          <ul>
           <li>Android</li>
           <li>iPad</li>
          </ul>
         </li>
        </ul>
       </li>
      </ul>
     </li>
    
     <li><a href="#">About Us</a>
      <ul>
       <li><a href="http://www.nova.edu">NSU</a></li>
       <li><a href="http://www.nova.edu/hpd">HPD</a></li>
       <li><a href="http://www.nova.edu/library">Library</a></li>
       <li><a href="http://optometry.nova.edu">Optometry</a>
        <ul>
         <li><a href="http://www.nova.edu/optometry/placement">Opportunities</a>
          <ul>
           <li><a href="http://www.nova.edu/optometry/placement/jobs.htm">Practice</a></li>
           <li><a href="http://www.nova.edu/optometry/placement/FillIn.html">Fill-in</a></li>
           <li><a href="http://www.nova.edu/optometry/placement/Ostaff.html">Staff</a></li>
          </ul>
         </li>
         <li><a href="#">Faculty</a></li>
        </ul>
       </li>
       <li>Portals
        <ul>
         <li><a href="http://sharklink.nova.edu">SharkLink</a></li>
         <li><a href="http://blackboard.nova.edu">Blackboard</a></li>
        </ul>
       </li>
      </ul>
     </li>
    
     <li><a href="#">Courses</a>
      <ul>
       <li><a href="#">OTM</a>
        <ul>
         <li><a href="http://www.nova.edu/hpd/otm/otm-a">OTM-1</a></li>
         <li><a href="http://www.nova.edu/hpd/otm/otm-b">OTM-2</a></li>
         <li><a href="http://www.nova.edu/hpd/otm/otm-c">OTM-3</a></li>
         <li><a href="http://www.nova.edu/hpd/otm/otm-d">OTM-4</a></li>
         <li><a href="http://www.nova.edu/hpd/otm/cop">COP</a></li>
        </ul>
       </li>
       <li><a href="#">Optics</a>
        <ul>
         <li><a href="#">Theoretical</a></li>
         <li><a href="#">Physical</a></li>
        </ul>
       </li>
       <li><a href="http://www.nova.edu/hpd/otm/cl/Calc.html">Tables, Graphs & Calculators</a></li>
      </ul>
     </li>
    
     <li><a href="#">Resources</a>
      <ul>
       <li class="dir"><a href="#">Javascript</a>
        <ul>
         <li><a href="#">Ajax</a></li>
         <li><a href="#">Calculators</a></li>
         <li><a href="#">Calendars</a></li>
         <li><a href="#">JSON offline</a></li>
         <li><a href="#">Test</a></li>
         <li><a href="#">Utilities</a></li>
        </ul>
       </li>
       <li><a href="#">Forums</a>
        <ul>
         <li class="dir">
          <div>
           <a href="http://www.webdeveloper.com">WebDeveloper</a>
           <a href="http://www.codingforums.com">CodingForums</a>
           <a href="http://www.dreamincode.net">Dream In Code</a>
           <a href="http://www.coderbyte.com">CoderByte</a>
          </div>
         </li>
        </ul>
       </li>
      </ul>
     </li>
    
     <li><a href="#">Contacts</a>
      <ul>
       <li style="width:250px">
        <div> First Contact </div>
       </li>
       <li style="width:250px">
        <div> Second Contact </div>
       </li>
      </ul>  
     </li>
    
    </ul>
    <p style="clear:both">&nbsp;<p>
    
    </body>
    </html>
    Last edited by JMRKER; 08-15-2013 at 11:40 AM.

  6. #6
    Join Date
    Aug 2013
    Posts
    3
    Thanks very much for getting back to me.

    I did say in my original post that it worked in IE, Firefox, Opera but not in Chrome, Safari and described what was happening and provided a link so that the problem could be seen.

    While I've been away I've spent quite a bit of time revisiting the problem and discovered that the problem was in the CSS and not the code. I set the divs to "float: left" and it now works in the other browsers it didn't.

    Thanks very much the script, I'll take it onboard and have a good look at 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