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

@steveohAug 14.2013

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

~~[url]~~http://home.btconnect.com/thetopper/dropdown_menu_1.htm[/url]

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

to post a comment

JavaScript

5 Comments(s) _↴

@PadonakAug 15.2013 — #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

@steveohauthorAug 15.2013 — #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.

@JMRKERAug 15.2013 — #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.[/QUOTE]

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

@JMRKERAug 15.2013 — #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.

<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt; Homestead &lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;!-- &lt;link rel="stylesheet" type="text/css" href="MenuCommon.css"&gt; --&gt;
 &lt;style type="text/css"&gt;
 /*---- 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 &gt; 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; }
 &lt;/style&gt;
 
 
 &lt;!-- &lt;script type="text/javascript" src="MenuCommon.js"&gt;&lt;/script&gt; --&gt;
 &lt;script type="text/javascript"&gt;
 /*---- 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);
 }
 }
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;ul id="TOP" class="drop"&gt;
 
 &lt;li&gt;&lt;a href="#TOP"&gt;Home&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;CV&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Brief&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Extended&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Teaching&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Administrative&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Updates&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;4-Fun&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;ePub/iBook&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Tips&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;Android&lt;/li&gt;
 &lt;li&gt;iPad&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 
 &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu"&gt;NSU&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/hpd"&gt;HPD&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/library"&gt;Library&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://optometry.nova.edu"&gt;Optometry&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/optometry/placement"&gt;Opportunities&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/optometry/placement/jobs.htm"&gt;Practice&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/optometry/placement/FillIn.html"&gt;Fill-in&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/optometry/placement/Ostaff.html"&gt;Staff&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Faculty&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;Portals
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="http://sharklink.nova.edu"&gt;SharkLink&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://blackboard.nova.edu"&gt;Blackboard&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 
 &lt;li&gt;&lt;a href="#"&gt;Courses&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;OTM&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/hpd/otm/otm-a"&gt;OTM-1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/hpd/otm/otm-b"&gt;OTM-2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/hpd/otm/otm-c"&gt;OTM-3&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/hpd/otm/otm-d"&gt;OTM-4&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/hpd/otm/cop"&gt;COP&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Optics&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Theoretical&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Physical&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="http://www.nova.edu/hpd/otm/cl/Calc.html"&gt;Tables, Graphs &amp; Calculators&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 
 &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;
 &lt;ul&gt;
 &lt;li class="dir"&gt;&lt;a href="#"&gt;Javascript&lt;/a&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Ajax&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Calculators&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Calendars&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;JSON offline&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Utilities&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Forums&lt;/a&gt;
 &lt;ul&gt;
 &lt;li class="dir"&gt;
 &lt;div&gt;
 &lt;a href="http://www.webdeveloper.com"&gt;WebDeveloper&lt;/a&gt;
 &lt;a href="http://www.codingforums.com"&gt;CodingForums&lt;/a&gt;
 &lt;a href="http://www.dreamincode.net"&gt;Dream In Code&lt;/a&gt;
 &lt;a href="http://www.coderbyte.com"&gt;CoderByte&lt;/a&gt;
 &lt;/div&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 
 &lt;li&gt;&lt;a href="#"&gt;Contacts&lt;/a&gt;
 &lt;ul&gt;
 &lt;li style="width:250px"&gt;
 &lt;div&gt; First Contact &lt;/div&gt;
 &lt;/li&gt;
 &lt;li style="width:250px"&gt;
 &lt;div&gt; Second Contact &lt;/div&gt;
 &lt;/li&gt;
 &lt;/ul&gt;  <br/>
 &lt;/li&gt;
 
 &lt;/ul&gt;
 &lt;p style="clear:both"&gt;&amp;nbsp;&lt;p&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@steveohauthorAug 16.2013 — #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.

Also in #JavaScript _↴

validate a textfield help Help - Hiding The Tool Bars in I.E.Manipulating style of layers

Success!

Help @steveoh spread the word by sharing this article on Twitter...

Tweet This

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

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

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

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴