Drop down menu across frame border

 djbusychild is right, this is also the quickest and cleanest way to do what you want but it probably won't give the look you want.

  Another option is to split the menu in two and have part appear in both frames.  The code for this however would be very messy unless you know the exact appearance and location of the menu. It would also only look right if the frameborder is set to 0.

  Can you make the intranet upgrade to IE5.5?  If so, this version has a new function called createPopup() which has support for going over frames, (and also iFrames which used to always appear on the top most z-index).  IE5.5 is still beta and microsoft haven't confirmed how this function works, but at the minute this is how it would be done:

 <script language="JScript">
  function showMenu(height,width,left,top,contentname){
   var oPopup = window.createPopup();
   var oPopBody = oPopup.document.body;
    oPopBody.innerHTML = contentname.outerHTML;
   oPopup.show(height, width, left, top, document.body);
  }
 </script>

 Calling showMenu(100,100,120,20,myDiv) would create a popupMenu from a Div called myDiv of width 100, height 100 at 120 pixels from the left and 20 pixels from the top.  This would then flow over the top of any frameborder and over the other framed page.  (It would also flow over the window border if the window is smaller than the menu. I think.)  I cannot test this as I don't have IE5.5

  I would wait and see what becomes of this function when IE5.5 is released to the general pubic and then use it.  If you need to do this now though, use djbusychild's solution as it's easiest.

Dog42

Sorry, made a few mistakes in my last post.  the correct function would be:

 <script language="JScript">
  function showMenu(left,top,width,height,contentname){
   var oPopup = window.createPopup();
   var oPopBody = oPopup.document.body;
    oPopBody.innerHTML = contentname.outerHTML;
   oPopup.show(left,top,width,height,document.body);
  }
 </script>

The document.body bit in the show() function is the name of the element to where the top and left co-ordinates are relative.  If this isn't put in the co-ords are relative to the top-left corner of the screem.
The menu can also be hidden by using oPopup.hide().

Dog42

djbusychild, you offer a solution that works, but I already tried something similar and it looked terrible.  It would be usable if the top frame only contained the navigation bar, but it has to take up 250px to hold a logo and couple of other graphics. It ends up with a big gap between the bar and the menus, or I have to move the bar to the bottom of the top frame and the whole thing looks out of balance.

Thanks for trying
COBOLdinosaur

dog42, even id IE5.5 was available now, it would still take memonths to get the signoffs I need to implement.

It always seems that what I need is in the next release of something.  Maybe I'll release without the frames and wait for IE5.5, but that means adding in all the stuff in the top frame to 6 pages, and they will load slower.

Thanks
COBOLdinosaur

Could you post the code or even better a link to the pages you have so far?
This would help to see what could be done.

Dog42

 Sorry dog42, a link is not possible the pages are in a secured area.

Chunks of code I can provide.

  The style sheet contains:

   .toplevel {position:absolute;left:5;top:1}
   .toplevel IMG {cursor:hand;filter:alpha(opacity=20)}
   .menucell { display:none;font-family:arial;font-size:xx-small;
               z-index:10;position:absolute;left:15;top:37;
               background-color:#eeeeee;color:black;
               border-left:5px silver solid;
               border-top:5px silver solid;
               border-right:5px navy outset;
               border-bottom:5px navy outset;cursor:hand}
   .menucell TD {border:1px white solid;
                 border-right:1px silver solid;
                 border-bottom:1xp teal solid}

The buttons for the navigation bar reside in a table thus:


   <TABLE ID="BUTTONBAR" CLASS="toplevel" BORDER=0>
   <TR><TD>
      <IMG SRC="url1.gif" border=0
         onclick="CloseAll(0)"
         onMouseover="this.filters.alpha.opacity=100;MENU(0,1)"
         onMouseout="this.filters.alpha.opacity=20">
      <IMG SRC="url2.gif" border=0
         onclick="CloseAll(1)"
         onMouseover="this.filters.alpha.opacity=100;MENU(1,1)"
         onMouseout="this.filters.alpha.opacity=20">
      <IMG SRC="url3.gif" border=0
         onclick="CloseAll(3)"
         onMouseover="this.filters.alpha.opacity=100;MENU(3,1)"
         onMouseout="this.filters.alpha.opacity=20">
   </TD></TR>
   </TABLE>
   There are actually six of them but you get the idea.

 
The menu blocks sit each in their own table this way
<The left position is adjusted for each block>

   <TABLE ID="Menu1" CLASS="menucell" STYLE="left:230"
          CELLSPACING=5>
      <TR>
         <TD onMouseover="dohover(this,0);CloseAll(3)"
             onMouseout="dohover(this,1)"
             onClick="url, function call or a window.open">
             description
         </TD>
      </TR>
      <TR>
         <TD onMouseover="dohover(this,0);CloseAll(3)"
             onMouseout="dohover(this,1)"
             onClick="could be anything">
             description
         </TD>
      </TR>
      <TR>
         <TD onMouseout="dohover(this,1)"
             onMouseover="dohover(this,0);MENU(7,103)"
             onClick="void(0)">
             open a child menu &nbsp; &nbsp;
             <FONT FACE="webdings">4
             </FONT>
         </TD>
      </TR>
   </TABLE>
 
The child menus are defined the same way

The script contains an array with the menu name (MenuTabs) and an
array of boolean menu status flags (MenuStatus)



      function CloseAll(keeper)
      {
        // This function closes all open menus except for keeper
        // which is normally its parent
         var i=0;
         while (i<MenuStatus.length)
         {
            if ((MenuStatus[i]) && (i!=keeper))
            {
               MenuStatus[i]=false;
               var Mname=document.all[MenuTabs[i]];
               Mname.style.display="none";
            }  
            i++;
         }
      }
         
      function MENU(EL,CLflag)
      {
        // This function opens a menu after closing all other menus
        // except its parent (if it has one)

         var altKEEP = CLflag;
         if (altKEEP==1)
         {
            altKEEP=99;
         }
         else
         {
            if (altKEEP != 0)
            {
               altKEEP = altKEEP-100;
            }
         }
         if (CLflag)
         {
            CloseAll(altKEEP);
         }
         var menu=document.all[MenuTabs[EL]];
         menu.style.display="block";
         MenuStatus[EL]="true";
      }

      function dohover(EL,flg)
      {
         // standard rollover -- highlight on and off
         // as the makes a trip thru the cell
         var locEL=EL.style;
         if (flg==0)
         {
            locEL.border=STDborder;
            locEL.background=STDbgcolor;
            locEL.color=STDtextcolor;
            menuACTIVE=true;
         }
         else
         {
            locEL.border=NORMborder;
            locEL.borderRight=NORMborderR;
            locEL.borderBottom=NORMborderB;
            locEL.background=NORMbgcolor;
            locEL.color=NORMtextcolor;
            menuACTIVE=false;
         }
      }
 

It works fine except it stays in the frame.

The user like the way it looks and responds, but up to now they
have been using it in pages without frames.

Hope this gives you what you need, and thanks for the effort.

COBOLdinosaur

Right, this will, or should,  work in IE4+.  In bottom frame, add all the menus.  Then add this code to the MENU function, at the end after the rest of the code:

    visibleh = - document.body.clientHeight + menu.offsetTop;
    var menuBot = parent.main.document.all[MenuTabs[EL]];
        menuBot.style.top = visibleh;
        menuBot.style.display="block";

Also, change the hideAll function to:

   function CloseAll(keeper){
    var i=0;

    while(i<MenuStatus.length){
     if ((MenuStatus[i]) && (i!=keeper)){
      MenuStatus[i]=false;
      var Mname=document.all[MenuTabs[i]];
          Mname.style.display="none";

     // This is the added code:

      var MnameBot=parent.main.document.all[MenuTabs[i]];
          MnameBot.style.display="none";
     }
     i++;
    }
   }

This will work for the main menus, I'm not too sure about the subMenus.  These code changes won't allow for the doHover function yet.  I'm still working on how to do this and you have used the 'this' reference which makes it a bit harder the repeat the function in the other frame.

Take a look at http://www.jneill.f9.co.uk/framepopup/frame.htm to see this.  Put the mouse over the broken image icon on the far left (menu1).

This code will adapt automatically if you change the frameheight or the position of the menu.

Hope this helps
Dog42

Sorry, 'main' in the code above is the name of the bottom frame.

e.g. var MnameBot=parent.main.document.all[MenuTabs[i];

Dog42

dog42, let me think about this. Adding the menus to the bottom frame adds some load time and creates maintenance issues.  The solution in the link has a minor flaw in the way the bottom entry only highlights half of the cell at a time, but it's solveable.

Let me play with it a little before I accept it as an answer.

thanks

COBOLdinosaur

Right, I've played about with the code.  take a look at that page again.

http://www.jneill.f9.co.uk/framepopup/frame.htm

Dog42

Comment accepted as answer

Thanks dog42.

I've still got some integration to do but overall it will give me what I need.

Thanks, if you need any more help, just ask.

bored today ... just browsing ...
the link above: http://www.jneill.f9.co.uk/framepopup/framepopup.zip
no longer exists ... does anyone still have this source?
Thanks

lol.......  That was the first question I ask on this site.  Unfortuantely I don't think the code is around any more.  I'll look and see if it got archived, but I doubt it. We use it for about  3 months, and did not like the limitations imposed by framing so it got tossed in favour of doing it right with dymnamic generation.

The way I got treated in this Q is one of the reason that I decided to stick around and see how much I could learn. :^)

Cd&

Nah, don't worry about it ... if it was that hard to maintain I probably won't use it either -- I was just surprised to see that there was a working solution at all.

I first signed on in June 98, then I totally forgot about the site for 8 months.  When I stumbled on it again, I had them email my username/password to me (I had forgotten that too) and then I asked my first Q and had a similar good experience, so I stuck around :)

It worked okay.  The problem is that you still have to have layers in the bottom frame to display the menu, so you still end up with have to maintain those pages as well.  it was sort of one of those "gee whiz isn't this a neat trick" that lose its appeal fairly quickly.

Now when I want to go across a frame I just use a select. Zero hassle. The control does what it is designed to do and stays on top... but mostly I just avoid frames, because I can use CSS and scrollable divs to to do much better layout.  

Back then I didn't know hwo to do a lot of the stuff I cna do now, which is a good reason for me to contineu staying to see what I can learn. :^)

Cd&

mee too, I've learned so much here ... and I had a thing or two to learn about EE etiquette back then too.  We won't go there  ;-]

Though this seems to be old questions neverthless, please visit the URL below for coding example on this.

http://www.deepakchitnis.com/Techniques/t3.aspx