PDA

View Full Version : Displaying a div layer over a frameset?

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:

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


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 ?


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>



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!!!!!:D :D :D :D :D

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:
----------------
&nbsp;&nbsp;come to think of it...

&nbsp;&nbsp;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 :rolleyes: 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.
ucm
03-15-2003, 01:38 AM
errors???!

Can you elaborate on what happened when you tried it?

If you got errors then other people will too and I need to get this working as soon as I can...

Course I never personally nor at the office use Netscape but will build compatablity in later. It worked in IE 5 at work, what did you use and what exactly went wrong?

also, I figured out what you mean about the 'hidden' thingy...when the page loads, the layer is supposed to be hidden untill I unhide it with a '' and on an extremely old browser, the only way to do it was the way I had been including in my posts.

I have removed that from the source I've posted on the notion that nobody today uses that old browser ( except for of course my associate and she always has to get things 'her way' :-/ )

However, if you were getting errors, they shouldn't have had anything to do with the 'hidden' thingy, what happened??

what js, html, ect ect debuggers do you use?

any additional information from anyone would be appreciated...
scoutt
03-15-2003, 11:21 AM
no, the last code you posted with the frameset only, no iframe, had teh errors. I didn't try that last code.

I am using mozilla1.3 and it didn't even work form this code

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

for one you called topframe.html all the time and named this file index.html. no topframe found. then when clicked it did nothing. so how can you see if it didn't work.

but if the latter one owrks for you then cool, I won't worry about it. :)
ucm
03-15-2003, 12:23 PM
Ignore all past cade and go with this set...

I was calling topframe.html multiple times to just get a page up on the fly, obviously ( like you ) I would never build a site and have the same page set up like the example I was posting...I was merely trying to keep the post to a minimum, sorry for the confusion on that.

I have posted here a much improved version of this process, just open the index.html file below...

This code should work fine in any IE compatable browser, how does it do you all of you?


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

<frameset rows="*,1" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" noresize scrolling="no">
<frame name="divframe" src="go.html" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" noresize scrolling="no">
<frame name="blankframe" src="blank.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="40,*" style="z-index:1">
<frameset cols="100,*" style="z-index:1">

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

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


blank.html
----------
<html>
</html>


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

<a onmouseover="this.style.cursor='hand'" onclick="top.divframe.document.all.dude.style.display=''">Show!</a><br>
<a onmouseover="this.style.cursor='hand'" onclick="top.divframe.document.all.dude.style.display='none'">Hide!</a>

</body>
</html>


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

<div id='dude' class='' style="position:absolute;float:left;top=10;left=45;display='none';z-index:20;"><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" marginheight="0">

</body>
</html>
scoutt
03-15-2003, 12:44 PM
ahh that looks better. :)
ucm
03-15-2003, 01:11 PM
Niiiice! :verycool: