Make a Div layer appear across different layers (POPUP question)

[ahmun]

Hi all,

I'm wondering if there is way to make a Div layer (absolute positioning) appear across frames and layers.

To be more specific:

the Div is declared like this:

<div id=&quot;popup&quot; style=&quot;position:absolute; width:97%; height:95%; z-index:2; top: 5px; left: 5px; background-color: #666666; layer-background-color: #666666; border: 1px none #000000; visibility: hidden&quot;>

I have javascript in a button that causes this layer to be visible/invisible.

My problem is that the div is located on a different page embeded into the main page via an IFRAME. When I click the button to reveal the popup, it is limited by the boundaries of the IFRAME. I would like the popup to appear positioned relative to the whole browser window.

I'm also trying to write a re-usable "icon bar" that I will

<!--#include...-->

in my pages. This icon bar also has a javascript popup, and isn't embedded in an IFRAME, but all the same, the popup appears limited to the boundaries of the 50 pixel high table the code was included into.

Any thoughts?
I've also tried playing around with the Z-index, but to no avail.

Earnie Eng
If you are born once, you will die twice.
If you are born twice, you will die once

 

[dwarfthrower]

A <DIV> is limited in it's display to the boundaries of the window object which contains it, in this case your <IFRAME>. If you want the div to appear over the main frame, then it should be defined in the main frame.

As for the popup bar, have you got any code that will shift the icon bar around the page, or only to show/hide it. A div won't automatically move itself to where you want it.

Dwarfy,

You are born once, you die once - But why don't we try to concentrate more on the living?

 

[ahmun]

Code to move it around is easy... but...

Currently all my web pages include this one icon bar page. I want to be able to make the changes to this include file, and have the changes be apparent in all web pages.

I guess I can go to all the web pages and add that line of code to define the &quot;invisible&quot; div layer. But I wanted to avoid that.

ps.. I like your sig... about concentrating on living... yep.. that's probably the most important thing we can do here on earth...

Earnie Eng
If you are born once, you will die twice.
If you are born twice, you will die once

 

[dwarfthrower]

Is it defined as a server-side include or as a linked .js file? I'm not as up to speed as I should be with the ins and outs of script in server-side includes. The only thing I can think of would be to take a look at the colour-picker FAQ I wrote for the JavaScript forum. It has a colour palette that pops up at the current mouse position.

 

[ahmun]

it's a linked ASP file. Not server-side. Just a simple link so I don't have to write extra lines of code in every page to make a simple update...

I created a sorta messy test case if you want to see.
I don't have much time to comment things, but hopefully it's self explanatory.

check out:

http://www22.brinkster.com/ahmun/testLayerOverlapping/

I've discovered that the link in the IFRAME can control a layer on its parent web page if I refer to it properly
(window.parent.layerName)

I'd like to avoid having to add a layer into every page... but that seems to be one of the limitations.

Earnie Eng
If you are born once, you will die twice.
If you are born twice, you will die once