?
Solved

JavaScript menu Over frame

Posted on 2003-03-25
40
Medium Priority
?
459 Views
Last Modified: 2007-12-19
Hi all,

       I use three frame on my Intranet, in left frame there is an arborescent menu, in top there is a welcome banner. I want to add an interactive drop down (javascript) menu, but when the menu open and it cross the line between my two frames it goes under the frame, how can i make a frame the "master frame" that will make the menu appears over other frames.

Thanks
0
Comment
Question by:Goliath_
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 22
  • 15
  • 2
  • +1
40 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205127
You can try setting the z-index of the menu so it is higher than that of the frames. I am looking into changing the z-index of the frames now. I know that IE supports the specification of an iFrame, but I am not sure about regular frames.

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205130
I am also not certain that an element from one frame can overlap onto another. You may need a redisign.

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205338
It's looking pretty grim....

Fritz the Blank
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:jaysolomon
ID: 8205407
try this link here. It is an example of a menu using frames

http://www.f-terheijden.nl/frameindex1.html

Maybe you can view source and get an idea
0
 

Author Comment

by:Goliath_
ID: 8205426
Ok... so if i cannot do that, do you have any idea how i should proceed?

How microsoft do on his web site? how many sites are doing? they are sure not writing their menu to each page that appears... how they can manage that without frame?

thanks!
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205447
As for:

http://www.f-terheijden.nl/frameindex1.html

it is like I said in my second point. The frames are designed in such a way that the menu does not overlap the boundries of the frame.

Fritz the Blank
0
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 1500 total points
ID: 8205481
The microsoft site is not using frames.

The way to go about this is to use  a table instead (this is the way that I always do it):

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=600 BORDER=0 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD colspan=2 height=200 valign=center align=center>
               Put banner here
          </TD>
     </TR>
     <TR>
          <TD width=100 valign = top>Put menu stuff here</TD>
          <TD width=500 valign= top>Put page content here</TD>
     </TR>
</TABLE>


</BODY>
</HTML>


Fritz the Blank

0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205550
With this approach, you don't have to worry about how your dhtml is going to act in three different browsers over four diffent versions with the frames complication.

Fritz the Blank
0
 

Author Comment

by:Goliath_
ID: 8205561
Ok... so if i cannot do that, do you have any idea how i should proceed?

How microsoft do on his web site? how many sites are doing? they are sure not writing their menu to each page that appears... how they can manage that without frame?

thanks!
0
 

Author Comment

by:Goliath_
ID: 8205582
Is there any way to #include another html file to a cell of the table?

thanks
0
 

Author Comment

by:Goliath_
ID: 8205587
Is there any way to #include another html file to a cell of the table?

thanks
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205599
Are you running server-side code? If so, then it is easy. What I do is I create a template like above with navigation and banner includes so that maintainance is a breeze. However, my sites use .asp, so I just do this:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=600 BORDER=0 CELLSPACING=1 CELLPADDING=1>
     <TR>
          <TD colspan=2 height=200 valign=center align=center>
               <!--#include virtual="/includes/siteheader.asp"-->
          </TD>
     </TR>
     <TR>
          <TD width=100 valign = top><!--#include virtual="/includes/pagenav.asp"--></TD>
          <TD width=500 valign= top>Put page content here</TD>
     </TR>
</TABLE>


</BODY>
</HTML>


Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205629
Here is a link for one of the sites that I did that way:

www.mbmi.org

Fritz the Blank
0
 

Author Comment

by:Goliath_
ID: 8205713
May i include an ordinary html file instead of a asp file?

Exemple:
="top.htm"

??
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205810
I don't believe you can do that unless you are running server-side code. With straight html, you can do javascript includes, and style sheets as well. I am pretty certain, however, that you cannot do other sorts of include files because they get executed server-side.


Fritz the Blank
0
 

Author Comment

by:Goliath_
ID: 8205867
Ok,

   Do you think you can send me "Guillaume.Genest@qc.teknion.com" an exemple of your: siteheader.asp that you will include as top in the table.

thanks!
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205890
I am afraid that I can't do that because it is property of the client. But just give some thought to what you want to appear on each page, and include that code there. If you like, design your page just the way that you like it, and then cut the code out of the top cell, paste it into the include file, and then you're done!!!


Fritz the Blank
0
 

Author Comment

by:Goliath_
ID: 8205919
It's don't working....
i try this....

send me just an asp file, with "Hi there" write in bold on the asp file that i can include from default.htm page...

thanks!
0
 

Author Comment

by:Goliath_
ID: 8205920
It's don't working....
i try this....

send me just an asp file, with "Hi there" write in bold on the asp file that i can include from default.htm page...

thanks!
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205961
Ah, but your page has to be an .asp page for this to work, because all of the scripting happens server-side.

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8205984
Can you make your home page a default.asp and have it work?

Fritz the Blank
0
 

Author Comment

by:Goliath_
ID: 8206343
Ok, i successfully have it to work...

but now... my arborescent menu in my left frame... are write to get a frame name... they reset my entire page to be there....

I think i can manged it by myself...

But i was wondering if:

pagenav.asp

this page is a asp page that include the good html page to show following the links that we press? how did you do that?

may you paste me sample code here!
thanks!
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8206369
There are a number of really good ways to do this. The one I commonly use is the code from:

http://www.dhtmlcentral.com/projects/coolmenus/

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8206381
With that menu code, the whole menu structure is kept in one javascript code that I keep in an include file. That way, I can maintain the navigation for the whole site in one place.

Fritz the Blank
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8213549
Another way: useing popupWindow instead of creating DIV.

popup window can not only over frames, it can even go out of your IE Window.

Cool?  just FYI.

Here is the example:


<HTML>
<HEAD>
<TITLE>Popup Example</TITLE>

<SCRIPT LANGUAGE="JScript">

var oPopup = window.createPopup();
function ButtonClick()
{
    var oPopBody = oPopup.document.body;
    oPopBody.style.backgroundColor = "lightyellow";
    oPopBody.style.border = "solid black 1px";
    oPopBody.innerHTML = "Click outside <B>popup</B> to close.";
    oPopup.show(100, 100, 180, 50, document.body);
}
</SCRIPT>
</HEAD>

<BODY>
Resize this window small enough and:
<BUTTON onclick="ButtonClick()">Click Me!</BUTTON>
</BODY>
</HTML>
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8213657
Okay, but how does that help with the dynamic menu item straddling frames? Are you suggesting that the menu goes on a pop-up?

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8213660
Okay, but how does that help with the dynamic menu item straddling frames? Are you suggesting that the menu goes on a pop-up?

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8213667
Sorry for the double post--itchy mouse finger!!!

Fritz the Blank
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8213676
put your menu items in a popup, the popup can straddling frames.
0
 

Author Comment

by:Goliath_
ID: 8217737
In fact one of my friends (who don' work on computing) give me the soluce and it was so simple......


Here is how my page work...

<p align="center"><b><i><font size="6">Site Intranet Du Groupe Teknion</font></i></b><font size="6"><i><b>/<font color="#6699CC">Roy&amp;Breton</font></b>
</i></font>
<!-- /Footer -->
<!-- menu script itself. you should not modify this file -->
<script language="JavaScript" src="menu.js"></script>
<!-- items structure. menu hierarchy and links are stored there -->
<script language="JavaScript" src="menu_items.js"></script>
<!-- files with geometry and styles structures -->
<script language="JavaScript" src="menu_tpl1.js"></script>
<script language="JavaScript">new menu (MENU_ITEMS, MENU_POS1, MENU_STYLES1); </Script>
<!--mstheme--></font><!--msnavigation--></td></tr><!--msnavigation--></table><!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><!--mstheme--><font face="Book Antiqua, Times New Roman, Times">
<p align="center">

<!--mstheme--></font></td></tr><!--msnavigation--></table><br>
<br>
<center>
<iframe border="0" src="menu_empty.html" name="menu" scrolling="" height="100%" width="30%">
</iframe>
<iframe border="0" src="accueil.html" name="text" scrolling="" height="100%" width="70%">
</iframe>
</center>
</body>
</html>


I write my menu, then i separated my page in iframe bottom of this... So because the page who call the two other page in frame is the one who write the menu (so the menu don't came from another page) then the menu open over other frame... (Father and son principe...)

So simple...
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8217860
Not all browsers support iframes, so if you go with that solution, be prepared for it not to work for all users.

Fritz the Blank
0
 

Author Comment

by:Goliath_
ID: 8217895
There is no problem about it...

it's for Intranet and everyone in this compagny have at least ie 5.5 because we use Windows Scripting Host (vbscript) at logon script and it's need at least ie5.5.

Is there anyone who know how i can sign my script to be an signed activex for IE...?? i don't have any idea how it's work....
0
 

Author Comment

by:Goliath_
ID: 8262700
thanks for your help!
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8265521
Glad to have helped, but am dissapointed about the B.

Fritz the Blank
0
 

Author Comment

by:Goliath_
ID: 8269459
sorry...

you really help me but you don't give me a soluce... it is one of my friend (not on experts-exchange) who giove me the perfect solution for that so, that why you got "B"

Sorry,

I wish we'll meet again on other problems!
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8269868
This is where I disagree with you. I did give you a great solution that will work with all browsers, but you chose a different approach (if you have any doubt about that, try mine out). Your method will look fine with more recent browsers but will fail with older ones. If you don't care about that, well that's up to you.

Fritz the Blank
0
 

Author Comment

by:Goliath_
ID: 8270178
It is true but your solution means a complete redesign for my intranet...

other solution just takes me about 15 minutes to put it online...

and it is true i don't care for older browser because it is an intranet on a Active Directory Network using Windows Scripting Host, meaning that every station have IE5.5 or greater.

thanks!
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8270224
It's too bad you didn't put all of that information in your question, I wouldn't have had to volunteer so much of my time teaching you how to design cross-browser code.

Fritz the Blank
0
 

Author Comment

by:Goliath_
ID: 8270407
really sorry...
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8270495
I'm sorry, I am over reacting here.

None of the people who answer questions here get paid--it is all volunteer work. We do so to help people out, and sometimes, to learn things in the process. For many of us, when we put a lot of time into a question, and someone gives a grade of B, it seems like they are being somewhat ungrateful.

However, as I read through this thread, I see that is not the case.

Good luck with your project!

Fritz the Blank
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question