Appearing infront of frame

[Mike4x4s]

Hi i have a popup code that appears when the page is loaded, is there a way to modify the code is it appears in the frame called chatframe and it appears infront of everything inside the frame:

<div id='mypopup' name='mypopup' style='position: relative; width: 179px; height: 36px; display: none;'>
<img src="images/membersonlymessage.gif">
</div>

thanks.

[kish]

I don't understand your question. Can you clarify?

[AlexDawson]

Mike4x4s, if you want something to appear over the iframe (from the outside) you should use absolute positioning with a z-index (giving it priority on top of everything else), that way you can effectively overlap the frames contents with the message you want to display.

[Mike4x4s]

sorry i changed it to absolute but that didnt change anything what do you mean with a z index

[AlexDawson]

Using the CSS property z-index, it allows you to stack elements so they overflow on top of each other (best way to explain it).

[Mike4x4s]

ok in the head of my css i got this:

<style>
img
{
position:absolute;
left:50px;
top:50px;
z-index:-1;
}
</style>

but its still not showing

[kish]

Hi

A Z index of -1 will put it behind other elements. You need a higher number for it to be infront of everything. Try a z index of 1 or 2.

You probably want to set this property for the whole div, not just the image. So you should have:

<style>
#mypopup
{
position:absolute;
left:50px;
top:50px;
z-index:2;
}
</style>

Cheers

[Mike4x4s]

hmm still not working

[kish]

hmm still not working

sorry, i just edited my post above. check again.

[Mike4x4s]

nothing and at bottom of ie it says done but errors on page

[kish]

Did you also change the inline css that you have on the original div?

Currently it reads:

<div id='mypopup' name='mypopup' style='position: relative; width: 179px; height: 36px; display: none;'>
<img src="images/membersonlymessage.gif">
</div>

but you'll need to remove the positioning from it, since you're already declaring an absolute position in your head CSS. Unfortunately, your inline CSS will override it. SO, best thing is remove all CSS inline, so you only have:

<div id="mypopup" name="mypopup">
<img src="images/membersonlymessage.gif">
</div>

Then for your head css:

<style type="text/css">
#mypopup
{
position:absolute;
left:50px;
top:50px;
z-index:2;
width: 179px;
height: 36px;
display: block;
}
</style>

Let us know if this works for you.

Notice also that I set the display property to "block", so it's not hidden while you test this. I assume you'll later be using javascript to switch between hidden and block?

[Mike4x4s]

hmm i attached a screenshot that image on the right is supposed to overlap the frame on the left but i cant position it infront

[kish]

Can you show on your screenshot where it should appear?

One thing I would say, that if it's not appearing where you want it to, even though you have specified an absolute position, could it be because you have nested the div inside another (or several) divs?

[Mike4x4s]

i am trying to get the image on the right to overlap the center of the 2 users in the window, they are both in seperate frames.

[kish]

Frames, yuk! But anyway, I would say that you must put the div and the CSS in the same frame that you want it to appear. I don't believe there is a way to overlay a div from one frame, over another frame.

It way work with overlaying on to an IFRAME, though I've never tried it...

[Mike4x4s]

this is my code to show the frames: chat frame is the 1 on the left and function1 is the one on the right

<iframe src="startavatarselect.php" name="chatframe" scrolling="no" frameborder="no" align="left" height = "100&#37;" width = "100%">
</iframe>
<iframe name="function1" scrolling="no" frameborder="no" align="left" height = "500" width = "500">
</iframe>

[Mike4x4s]

ive moved the frames together but when i load the page i only see 1 frame not both

[Mike4x4s]

well its only an image i want displayed on the parent frame is there another code, so when the page loads it loads an image on top of everything else in its parent frame

[kish]

I really need to see the whole thing live in a browser to make any further comment. Do you have it online?

[Mike4x4s]

sorry its not possible to go online at this stage, hmm was thinking is it possible to load a floating iframe over another iframe then close the floating one after a few seconds automaticly

[kish]

I just tried it on my system. I can successfully overlay a DIV on to an IFRAME.
So, if it's not working for you, then you must be implementing it incorrectly.
You'll need to post up the code.

Here's my test page, by the way:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#mypopup
{
position:absolute;
left:50px;
top:50px;
z-index:2;
width: 179px;
height: 36px;
display: block;
border:1px #000000 solid;
background-color:#990000;
}
#mypopup2
{
position:absolute;
left:330px;
top:50px;
z-index:2;
width: 179px;
height: 36px;
display: block;
border:1px #000000 solid;
background-color:#0033CC;
}

</style>
</head>

<body>

<div id="mypopup">This is a popup</div>
<div id="mypopup2">This is another popup</div>
<iframe src="embedded.html" width="300" height="350"></iframe>
<iframe src="embedded2.html" width="300" height="350"></iframe>
</body>
</html>

[Mike4x4s]

with the alert function it appears over the top of everything, isnt there a simple way to show an image on top of everything instead of an alert:

[Mike4x4s]

ill try your code i think it might work

[Mike4x4s]

hmm its still not overlapping the other frame

[kish]

can you post the code that you used? :-)