Firefox Iframe Issue with Slide-In Menu Bar I

**Lechon** · 02-07-2005, 11:23 AM

Hello,
I have a problem with firefox and iframe using the slidemenu.

Script:Fold-out external menu
http://www.dynamicdrive.com/dynamici...ideinmenu4.htm

I use this script because you can use a html-page to be sliding in. In my html-page I have a flash-object, which is my menu (using sound and all the funny stuff).

The script is placed on the main page which has an 100% iframe, in this iframe you can surf my side, I did so because I have a forum, chat, galery etc. so I dont have to modify all these pages.
The slide-menu-html-page opens over the iframe, which works great in IE6!

But now I got people using firefox v1 and they report following problem:
The menu opens, but nothing happens then, it wont close when you move-off the mouse and you cant click anything, also the flash-movie (menu) doesnt play.

I checked it and it seems the iframe is the problem. Menu works great without it in firefox, but I need it. Any Ideas?
Heres my code:

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Neue Seite 1</title>
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
border:1.5px solid black;
line-height:20px;
}
-->
</style>
<base target="Hauptframe">
<meta name="Microsoft Theme" content="nature 011, default">
</head>

<body background="_themes/nature/nabkgnd.jpg" bgcolor="#FFFFFF" text="#000000" link="#993333" vlink="#333399" alink="#006633"><!--mstheme--><font face="Trebuchet MS, Arial, Helvetica">
<script language="JavaScript1.2">

/***********************************************
* Fold-out external menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var slidemenu_height=330 //specify height of menu
var slidemenu_width=136 //specify width of menu (in pixels)
var slidemenu_reveal=22 //specify amount that menu should protrude initially
var slidemenu_top=20   //specify vertical offset of menu on page
var slidemenu_url="menu.htm" //specify path to menu file

var ns4=document.layers?1:0
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)
document.write('<iframe id="slidemenubar2" style="left:'+((slidemenu_width-slidemenu_reveal)*-1)+'; top:'+slidemenu_top+'; width:'+slidemenu_width+'; height:'+slidemenu_height+'" src="'+slidemenu_url+'"></iframe>')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' height='+slidemenu_height+' onMouseover="pull()" onMouseout="draw()" src="'+slidemenu_url+'" visibility=hide></layer>')
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((slidemenu_width-slidemenu_reveal)*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}

window.onload=regenerate2

rightboundary=0
leftboundary=(slidemenu_width-slidemenu_reveal)*-1

if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}

function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}

function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}

</script>


<IFRAME name="Hauptframe" HEIGHT=100% WIDTH=100% MARGINWIDTH=50 SRC="start.html" frameborder="0">
<!-- Alternate content for non-supporting browsers -->
<H3><!--mstheme--><font color="#336633">Dein Browser muss iframes unterstützen!<!--mstheme--></font></H3>

</IFRAME>




<!--mstheme--></font></body>

</html>

This is my main-page, you see it has the menu and the iframe.

Code:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<style>
<!--
}
a:hover{
color:red;
}
-->
</style>
<title>Menu</title>


			<script language='javascript' ></script>

</head>

<body background="_themes/nature/nabkgnd.jpg" onMouseover="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.pull()"
onMouseout="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.draw()" topmargin="5" leftmargin="0"
marginwidth="5" marginheight="5">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0"
  id="navi" width="128" height="301">
  <param name="movie" value="navi.swf">
  <param name="bgcolor" value="#FFFFCC">
  <param name="quality" value="high">
  <param name="allowscriptaccess" value="samedomain">
  <embed type="application/x-shockwave-flash"
   pluginspage="http://www.macromedia.com/go/getflashplayer"
   width="128" height="301"
   name="navi" src="navi.swf"
   bgcolor="#FFFFCC" quality="high"
   swLiveConnect="true" allowScriptAccess="samedomain"
  ></embed>
</object>
</body>
</html>

<script language='javascript'>postamble();</script>

This is my menu-page, it uses the flash object.

Please help me, because I want to use firefox myself.

**ddadmin** · 02-08-2005, 02:32 AM

Unfortunately Flash most likely is the problem, which I'm not exactly knowledgable in. My theory is that Flash objects don't fire the onMouseover event in FF, resulting in the script unable to detect when the user has moved the mouse out of it (and hence to close the menu).

**Lechon** · 02-08-2005, 02:42 AM

Mh, but it works with IE6. And it works with Firefox without the iframe (menu is sliding and linking without an iframe at backround.)
So you think flash and Firefox are conflicting?

**Lechon** · 02-09-2005, 06:20 PM

Here is a test page:
without irame at the back
with iframe

What do you think?
IE6 works. Firefox doesn't.

**Lechon** · 02-09-2005, 07:25 PM

I fgured out that indeed has to do something with the onMouseout or over.
Even without flash, the menu won`t slide out again in Firefox. Can anybody help me there? Please.

**Lechon** · 02-09-2005, 08:51 PM

Now I found the problem, but not a solution. The menu is using an iframe for itself (do not know why I didnt see it before). So because the menu iframe is sliding over my iframe, firefox doesnt know which iframe is on top and thinks its one iframe. Anybody got a solution for that?
Hope somebody will answer.

**userOne** · 05-26-2005, 06:44 PM

Not sure if this will work for you but...
Go to http://www.flashkit.com and look for a movie called "panel movement"
Use that in place of the dynamic drive script to slide in your flash menu....
Not sure why the menu shouldn't really be visible at all times though...
Have you explored the transparent window publish option of Flash MX with this you can place the Flash nav in it's own layer (not Iframe) and give it a level... then you could place the Iframe Page on it's own layer and you should be able to define which layer is on the top..... There's all kinds of container's Layer's would be better instead of simply Iframe which still is sorta glitchy.

Thread: Firefox Iframe Issue with Slide-In Menu Bar I

Thread Tools

Search Thread

Firefox Iframe Issue with Fold-out external menu

Bookmarks

Bookmarks

Posting Permissions