Results 1 to 7 of 7

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

  1. #1
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Firefox Iframe Issue with Fold-out external menu

    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.
    Last edited by Lechon; 02-07-2005 at 10:34 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

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

  3. #3
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

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

  5. #5
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    May 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

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