?
Solved

Z-index overlapping a frame

Posted on 2003-03-10
17
Medium Priority
?
5,444 Views
Last Modified: 2010-05-18
I have a drop down menu bar that I created with JavaScript and CSS.  I'm using frames to separate the menu from the body and I was wondering if there was a way to have the menu overlap the frame.  Would you use the z-index?  If not, what is the workaround.  My company is using I.E. 5.5 (this is an internal website)

Thanks in advance
0
Comment
Question by:boody
[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
  • 5
  • 3
  • 2
  • +3
17 Comments
 
LVL 17

Accepted Solution

by:
dorward earned 252 total points
ID: 8103363
No, elements can not exist across frames. This is one of their limitations.

You could write some scripting that would create an identical element in the other frame and line them up very carefully, but this would be very complex.

Getting rid of the frames would probably be the best bet.

http://david.us-lot.org/frames.php
0
 

Author Comment

by:boody
ID: 8103679
What about fixed positioning?  Is something like this supported in IE 5.5?
0
 
LVL 17

Expert Comment

by:dorward
ID: 8104729
No very os MSIE currently supports fixed positioning, however the link I provided references a JavaScript that emulates it.
0
Technology Partners: 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 17

Expert Comment

by:dorward
ID: 8104738
very os? What am I thinking. "No version of MSIE"
0
 
LVL 1

Expert Comment

by:Gusto
ID: 8105073
I have used the following menu from dynamic drive.  It is pretty complex, but can overlap frames.  And the complexity part you don't really have to deal with, they define all the variables and what they do for you.

http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm

0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 248 total points
ID: 8106605
In addition to being very complex and the difficulty in getting them to work cross-frame menus have two other very serious drawabacks.  The can be very difficult to maintain if the addition of a new item changes any of the sizing, a lot of code may have to be reworked.  The biggest problem is that the script for th body has to be linked into every page, so the idea of using a frame to reduce have to repeat code in each page becomes moot.  

This is a design that has been tried by thousands (including me) and then been abandoned because making it work reliably is al most impossible.  Font size changes, resolution changes, and cross-browser issues almost guarantee that it will generate help desk calls on a daily basis.  If you are set on using frames for this, then use selects for the menu because they will cross the frame boundaries, but of course their is not much styling you can do with them.  

OR enter the 21st century and lose the frames.

Cd&
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8106646
frame == windows and elements are stuck to their own window.
you can use IFRAMES with z-Index - at least in MSIE.

<html>
<head>
<title>Searching</title>
</head>
<body bgcolor="#FFFFFF">
<iframe src="anyfile.txt" width="100" height="100" style="position:absolute:left:10;top:10px;display:block;z-index:0;"></iframe>
<div style="position:absolute;left:50;top:50;width:200px;z-index:5;background-color:yellow;border:1px solid navy;">I'm yellowish overlapping the IFRAME with my nice blue border</div>
</body>
</html>

CirTap
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8106661
to get this cler: from witin the IFRAME your menu can't overlap its *window*, unlike the DIV, which is in the _same_ window as the IFRAME. Got the picture? <g>
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8106954
You may do sth. like this: static menubar on top, scrolling DIV for the content below. No FRAMES no IFRAMES, CSS and a few lines of JS.
SCROLL="NO" in the body is required.
A full-flavoured dropdown-menu is (of course) missing.

CirTap

<html>
<head>
<title>Styling</title>
<style type="text/css">
html,body {
     margin:0px; padding:0px;
     font-size:10pt;
}
#menuBar {
     position:absolute;
     left;0px;top:0px;
     width:100%;
     height:22px;
     background-color:palegoldenrod;
     margin:0px; padding:3px;
}
#menuBar span {
     cursor:hand;
     display:inline-block;
     padding:0px 4px 0px 0px;
     margin-left:4px;
}
#main {
     position:absolute;
     left:0px;
     top:22px;
     width:100%;
     height:200px; /* initial value only */
     margin:0px;
     padding:10px;
     overflow-x:auto;
     overflow-y:auto;
     z-index:0;
}
.pullDown {
     display:none;
     background:palegoldenrod;
}
.pullDownOn {
     display:block;
     cursor:hand;
     position:absolute;
     top:22px;
     width:100px;
     background:palegoldenrod;
     padding:0px;
     border:1px solid peru;
     z-index:100;
}
.pullDownOn p {
     color:navy;
     font-weight:bold;
     margin:0px;
     padding:0px 3px;
     }
</style>
<script language="JavaScript">
function fixDoc() {
     document.recalc()
}

function fixDiv() {
/* use IE dynamic properties to resize the DIV's height  
   accordingly and make ot "look" like the BODY*/
     main.style.setExpression("height", "(document.body.clientHeight-22)+'px'");
}
function showMenu(elt,YesNo) {
/* tiny menu code, just for demo */
     popDiv = document.getElementById("pulldown_"+elt.id.split("_")[1]);
     if (YesNo==0) {
          popDiv.className="pullDown"
     } else {
          popDiv.style.left=elt.offsetLeft+"px"
          popDiv.className="pullDownOn"
     }
}
onload=fixDiv; // will do the magic
onresize=fixDoc; // may be ommited, test it without
</script>
</head>
<body bgcolor="#FFFFFF" SCROLL="NO">
<div id="menuBar">
<span id="mitem_1" onmouseover="showMenu(this,1)" onmouseout="showMenu(this,0)">Hover Me</span>
<span id="mitem_2" onmouseover="showMenu(this,1)" onmouseout="showMenu(this,0)">Hover Me</span>
<span id="mitem_3" onmouseover="showMenu(this,1)" onmouseout="showMenu(this,0)">Hover Me</span>
<div id="pulldown_1" class="pullDown"><p>PullDown 1<br>PullDown 1<br>PullDown 1</div>
<div id="pulldown_2" class="pullDown"><p>PullDown 2<br>PullDown 2<br>PullDown 2</div>
<div id="pulldown_3" class="pullDown"><p>PullDown 3<br>PullDown 3<br>PullDown 3</div>
</div>
<div id="main">
<h1>Content goes here</h1>
<p>make this page LOONNNG!</p>
<p>make this page LOONNNG!</p>
<p>make this page LOONNNG!</p>
<p>fill it up with some crap so you can see the scrollbars...
<br>most people want them to disappear :-)</p>
</div>
</body>
</html>
0
 
LVL 3

Expert Comment

by:hexagon47
ID: 8109982
I might have not understood what needs to be done, but if boody needs to work only in ie5.5. and above why not use this

<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(60, 60, 180, 425, document.body);
}
</SCRIPT>

and more generally get all the info in the microsoft library at the microsoft site (the code is copied from there)

This object is available in script as of Microsoft® Internet Explorer 5.5.

Examples

The following example demonstrates the use of the popup object. The code creates a pop-up window and displays it.

<SCRIPT LANGUAGE="JScript">
  var oPopup = window.createPopup();
  var oPopupBody = oPopup.document.body;

  oPopupBody.innerHTML = "Display some <B>HTML</B> here.";
  oPopup.show(100, 100, 200, 50, document.body);
</SCRIPT>

The popup object goes over everything (<object>, <select>, <frame>) and you can define content, x, y, top and left.

I know that there is no public standard that applies to this object, but it works on ie5.5 upwards.

h47

0
 
LVL 5

Expert Comment

by:cirtap
ID: 8111445
[just read the docs for it]
cool, another goodie thrown in with MSIE5.5, let's see if it does the job.

CirTap
(maybe I should go and read the "what's new" section in the MSIE5.5 and 6 SDKs?)
0
 
LVL 3

Expert Comment

by:hexagon47
ID: 8111488
cirtap I tested it and it would zindex over <object> <select> and it even spans over frames :)

never had the time to check it in netscape though

let me know your results

boody did it help?
0
 

Author Comment

by:boody
ID: 8111835
I abandoned the frames altogether.  My manager and I both felt that it wouldn't be a necessity.
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8111907
@hexagon: no popup-like thing in the Gecko DOM Reference
For Mozilla there may be a XUL equivalent but as it's required to run in MSIE5 only (intranet) - who cares? ;-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 9118765
This question has been classified abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.

<note>
Unless it is clear to me that the question has been answered I will recommend delete.  It is possible that a Grade less than A will be given if no expert makes a case for an A grade. It is assumed that any participant not responding to this request is no longer interested in its final disposition.
</note>

If the user does not know how to close the question, the options are here:
http://www.experts-exchange.com/help/closing.jsp


Cd&
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses
Course of the Month13 days, 19 hours left to enroll

801 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