javascriptkit.com drop down menu LINKS over flash don't work in Firefox

**johnwboyd** · 02-24-2008, 08:47 PM

Can someone please look at my code and let me know what I can do to fix this?

http://johnwboyd.info/drop_down/disciples.htm

Thanks!

**jscheuer1** · 02-24-2008, 09:16 PM

I've been looking at this some more (we started talking about it in another thread but it was getting off topic). It doesn't appear to be the Flash that is the problem, rather the iframe itself. I think the script will need to be edited and an event attached to the iframe to prevent the flyout from disappearing while the mouse is over the iframe. This shouldn't be happening in the first place, so - its being a bit of a bug in FF, there may not be a solution.

Please provide a link to the script's demo page on javascriptkit.

**jscheuer1** · 02-25-2008, 02:28 AM

I would still want to look at the demo page for this script to be sure, but I think I have found a solution.

First of all this:

Code:

<script type="text/javascript" src="cssverticalmenu.js">




<SCRIPT LANGUAGE ="Javascript">

<!--

function openWin0(URL) {
open(URL,"_blank","width=460,height=441,top=0,left=0,resizable=yes,scrollbars=yes");
}

// -->

</SCRIPT><SCRIPT LANGUAGE ="Javascript">

<!--

function openWin(URL) {
open(URL,"_blank","width=550,height=700,top=0,left=0,resizable=yes,scrollbars=yes");
}

// -->

</SCRIPT><SCRIPT LANGUAGE ="Javascript">

<!--

function openWin1(URL) {
open(URL,"_blank","width=500,height=580,top=0,left=0,resizable=yes,scrollbars=yes");
}

// -->

</SCRIPT>

Should be:

Code:

<script type="text/javascript" src="cssverticalmenu.js">

/***********************************************

* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>

<script type="text/javascript">
function openWin0(URL) {
open(URL,"_blank","width=460,height=441,top=0,left=0,resizable=yes,scrollbars=yes");
}

function openWin(URL) {
open(URL,"_blank","width=550,height=700,top=0,left=0,resizable=yes,scrollbars=yes");
}

function openWin1(URL) {
open(URL,"_blank","width=500,height=580,top=0,left=0,resizable=yes,scrollbars=yes");
}
</script>

And later, where you have (just before the opening <body> tag, just after the fade-in script):

Code:

<script type="text/javascript" src="cssverticalmenu.js">

/***********************************************

* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>

Just get rid of it. You could probably remove the fade-in script too, as it doesn't look like you are using it on that page.

Now, replace your existing cssverticalmenu.js file with (additions highlighted):

Code:

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    var spanref=document.createElement("span")
		spanref.className="arrowdiv"
		spanref.innerHTML="&nbsp;&nbsp;"
		ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(e){
    var look;
    if(e&&(look=e.relatedTarget))
    while ((look=look.parentNode))
    if(look==this)
    return;
    this.getElementsByTagName("ul")[0].style.display="none";
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

**johnwboyd** · 02-25-2008, 01:59 PM

Ok it's working fine now in both browsers! There was an error in the openWin script you provided. The } (in bold below) was missing:

<script type="text/javascript">
function openWin0(URL) {
open(URL,"_blank","width=460,height=441,top=0,left=0,resizable=yes,scrollbars=yes");
}

function openWin(URL) {
open(URL,"_blank","width=550,height=700,top=0,left=0,resizable=yes,scrollbars=yes");
}
function openWin1(URL) {
open(URL,"_blank","width=500,height=580,top=0,left=0,resizable=yes,scrollbars=yes");
}
</script>

1) Do you also know how to get the transparency effect to work in firefox?
2) Do you know how to get the arrows and respective drop down function to pre-load?

Thank you.

**jscheuer1** · 02-25-2008, 02:45 PM

Ooops, missed that one, I think I'll go back and fix it. For 1, change:

Code:

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
padding-left:2px;
border:1px #008000;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=90);
-moz-opacity:1;
}

to:

Code:

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
padding-left:2px;
border:1px #008000;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=90);
opacity:0.9;
}

For 2, the initialization would need to be moved from (get rid of this):

Code:

if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

to a script in the body of the page, just after the menu's markup:

Code:

 . . . w.dynamicdrive.com/style/">CSS Library</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
    <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
    </ul>
</li>
</ul><script type="text/javascript">
createcssmenu();
</script>

But I'm not sure if that gets you much, depending upon the browser. The only way to speed its loading up more than that would be to hard code the styles that can be inline to the markup along with the events and added span elements, all of which would defeat the purpose of its being such a simple menu.

**johnwboyd** · 02-25-2008, 05:08 PM

Brilliant! Now if only I can figure out how to code 2 different CSS color schemes for 2 groups of buttons on the same page?

**johnwboyd** · 02-26-2008, 01:34 PM

How do I code 2 different CSS color schemes for 2 groups of buttons on the same page?

**jscheuer1** · 02-26-2008, 03:55 PM

I'm not sure I understand the question. If you want one group to look one way, give it one class or id, and for the other group, use a different class or id, and set the styles accordingly for those classes/ids.