Displaying a div layer over a frameset? - HTML Forums

ucm · 03-12-2003, 09:03 PM

Hi, this is my first post on this forum...

I have a 5 frame site that I am working on...

It uses only IE right now but will also be more cross browser compatable in the fair to near future...

I have a div layer and would like to be able to display this div layer on top of anything in the browser window includeing different frames...

Any ideas on how to do this?

scoutt · 03-13-2003, 09:21 AM

you do this by changeing the z-index of the div and everything on the page that you want to go behind it. to make the div (above) everyting I believe it should have a z-index higher than everythign else. I might have that backwards, not sure

leoo24 · 03-13-2003, 11:44 AM

scoutt is as always correct, z-index of 1 would be at the bottom, and a z-index of say 20 would be at the top (ofcourse depending on how many layers you have

)

ucm · 03-13-2003, 04:19 PM

I've tried z-index of 100 and 200....

You are both correct for the div layer being on a web page...

But, I'm trying to get the div layer to be displayed on top of all of the frames:

+--------------+-----------------------+
|frame.........|..................frame|
|....****************..................|
|....****************..................|
+----** My Div ******------------------+
|....*** Layer ******..................|
|....**** Here ******..................|
|....****************..................|
|....****************..................|
|....****************..................|
|....****************..................|
|....****************..................|
|....****************..................|
|.......|..............................|
|.......|..............................|
|.......|..............................|
|.......|..............................|
|frame..|.........................frame|
+-------+------------------------------+
|................frame.................|
+--------------------------------------+

scoutt · 03-14-2003, 12:49 AM

and you have to set the fram so teh z-index os lower than the div. can't just do one and not the others.

ucm · 03-14-2003, 09:29 AM

Thanx, but it still wouldn't bring it up right...

This is what I got so far:

Quote:

index.html:
-----------
<frameset rows="30,*" style="z-index=4">
<frame src="topframe.html" style="z-index=50">
<frameset cols="30,*" style="z-index=5">

<frame src="topframe.html" style="z-index=10">
<frame src="topframe.html" style="z-index=11">

</frameset>
<frame src="topframe.html" style="z-index=12">
</frameset>
-----------

Quote:

topframe.html:
-----------
<html>
<head>
</head>
<body>

<div id='dude' class='' style="position:absolute;float:left;top=5;left=25;display='none';z-index=200;">***this is my content...***</div>
<script>
document.all.dude.style.visibility='visible';
document.all.dude.style.display='none';
</script>

<a onclick="document.all.dude.style.display=''">Go!</a>

</body>
</html>
-----------

More suggestions please

leoo24 · 03-14-2003, 11:43 AM

it should be z-index:200; not z-index=200, and for the rest of them!!z-indez:5; z-index:6; etc

ucm · 03-14-2003, 12:00 PM

lol! forgot bout the ':'

I changed it to the following but still no dice :-/

Can any one get an example to work on their system w/ IE ?

Quote:

index.html
----------

<frameset rows="30,*" style="z-index:4">
<frame src="topframe.html" style="z-index:50">
<frameset cols="30,*" style="z-index:5">

<frame src="topframe.html" style="z-index:10">
<frame src="topframe.html" style="z-index:11">

</frameset>
<frame src="topframe.html" style="z-index:12">
</frameset>

Quote:

index.html
----------

<html>
<head>
</head>
<body>

<div id='dude' class='' style="position:absolute;float:left;top=5;left=25;display='none';z-index:200;">***<br><br>***this is my content...***<br><br>***</div>

<a onclick="document.all.dude.style.display=''">Go!</a>

</body>
</html>

leoo24 · 03-14-2003, 12:06 PM

hhmmm, to make things easier make all the frames the same index, 1, and the div 2, and try changing it to visible m8, at the mo you've got it hidden!!!!

ucm · 03-14-2003, 12:17 PM

Thanx for working with me on this one leoo24

I've tried modifying it like that but it still doesn't display the div layer on top of all the frames :-/

can you create an example for me please?

leoo24 · 03-14-2003, 12:26 PM

ok, i'll see if i can throw one together for you, i've gotta go out now so i'll post it a bit later on tonight

leoo24 · 03-14-2003, 05:26 PM

after playing around a bit with this prob and looking around with google, alas i've come to the conclusion that this can't be done with a frameset, i think that you maybe should rethink your design in some way or another, if you stil want to use frames, this is the frameset for the layout you illustrated before, changing the % to meet your needs:

<frameset rows="20%,60%,20%">

<frameset cols="30%,70%">
<frame src="topleft.html">
<frame src="topright.html">
</frameset>

<frameset cols="15%,75%">
<frame src="middleleft.html">
<frame src="middleright.html">
</frameset>

<frameset>
<frame src="bottom.html">
</frameset>

</frameset>

however with iframes it is easy to place a layer above them,
if you want to use an iframe or two you would just place them in divs and then set your other divs above them, sorry i couldnt solve your problem, maybe i am wrong and someone knows if it's actually possible and how to do it, i would be interested to find out

/edit
to further on the iframes, you could only place a div above the iframe in the parent page, you could not place a div inside the iframe above anything in the parent, in hindsite i should have realised that nothing inside a frame can be displayed beyond it's border

ucm · 03-14-2003, 08:09 PM

dude!!! sweeet!!!! I got it!!!!!

First off, thanx leoo24, I really appreciate your working w/me on this one...

when you mentioned iframes, I remembered considering it but after thinking about it for a moment, I realized that using multiple iframes would get "too" teadious for anyone wanting to modify my code for their purposes and would create a lot more work than just having a frameset do it...

But!! here's the nifty trick to it, try createing 4 ( not 3 ) files with the following names and code then open the index.html in IE

index.html
---------------------------------
<html>
<head>
<title>this is my title</title>
</head>

<frameset rows="*" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<frame name="divframe" src="go.html" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" noresize scrolling="no">
</frameset>

<noframes>
<body>
sorry your browser doesn't accept frames
</body>
</noframes>
</html>

oldindex.html
---------------------------------
<frameset rows="30,*" style="z-index:1">
<frame src="topframe.html" style="z-index:1">
<frameset cols="30,*" style="z-index:1">

<frame src="topframe.html" style="z-index:1">
<frame src="topframe.html" style="z-index:1">

</frameset>
<frame src="topframe.html" style="z-index:1">
</frameset>

topframe.html
---------------------------------
<html>
<head>
</head>
<body>

<a onclick="top.divframe.document.all.dude.style.display=''">Go!</a>

</body>
</html>

go.html
---------------------------------
<html>
<body>

<div id='dude' class='' style="position:absolute;float:left;top=5;left=25;display='none';z-index:2;"><table bgcolor='009900'><tr><td>***<br><br>***this is my content...***<br><br>***</td></tr></table></div>

<iframe src="oldindex.html" width=100% height=100% marginwidth=0>

</body>
</html>

ucm · 03-15-2003, 01:01 AM

Additional NOTE:
----------------
  come to think of it...

  As long as you make the z-index of the div layer higher than the iframe's z-index then you shouldn't even need to put in any other z-indexes to achieve the same desired result...

This thread is a victory!

/edit:

Again, this thread IS a victory!!

please note 1 additional modification, I have been using for a long time ( due to a bug in a very VERY old browser that nobody uses anymore, cept for one of my close associates ) the style setting "visibility:hidden;" and then using ol' JavaScript to set it 'visible' because the old browser did not have a default setting for layers of any kind until they came out with a fix for it about a year after I started working with it, their newer ver 3.x and up worked fine ( now that I get around to testing it )...

I have changed that style setting in my posts here to:
"display='none';" as that old browser may no longer be used by anyone in the world ( or at least I'm recently explained 'in so may words' by by my associate, man she's strict about using that old browser

course, if I get this web app I've been working with for a while done then I may just convince her to give up that ol clunker )

As this is the first solution that has functioned correctly ( least in my IE 5.x at work), there may be some browser incompatabilities or some other unforseens...

If you notice any issues or have any suggestions , please post in this thread and I will work on it as I get time...

If you do encounter any bugs or problems, please do not allow them to get to you, just post your findings here and I'll see what I can do to get it working for you as well as everyone else in the world...

I want to thank everybody for their politeness and suggestions as this has been one of the most interesting and entertaining challenges I've dealt with in a while...

Thanx again everybody!!

/edit:

scoutt · 03-15-2003, 01:33 AM

well for one you didn't get the frame to work because your code isn't even right. of course it didn't work because you had the div hidden and it gave all kinds of errors in the javascript debugger. next time you say it doesn't work make sure you cod eis correct first. although I am glad you got it to work, also remember, iframes are not supported in all browsers.