Overlay for web pages

**Morthian** · Mar 21, 2009 15:13

On my website, I have a section for sharing links. When a user views the link, I want an overlay frame from my site at the top of the page.

This is a little hard to explain, so here is an example of a shared link:

http://shroomtown.com/index.php?page=link&id=1

When the user clicks 'View this link', they should be taken to the link, but with an overlay from my site at the top like this:

http://shroomtown.com/link_overlay.php?id=1

What is the best way to go about doing this?

**bholli** · Mar 21, 2009 22:29

You'll need to create a page on your site that contains an iframe. Set all of your wallpaper hyperlinks to link to the page with the iframe and set the iframe's source dynamically. This will allow you to place any html components or css styles to the outer extremities of the page.

**Morthian** · Mar 22, 2009 00:51

Originally Posted by bholli

You'll need to create a page on your site that contains an iframe. Set all of your wallpaper hyperlinks to link to the page with the iframe and set the iframe's source dynamically. This will allow you to place any html components or css styles to the outer extremities of the page.

How do I get the height of the iframe to fill the rest of the window?

**bholli** · Mar 22, 2009 11:14

Originally Posted by Morthian

How do I get the height of the iframe to fill the rest of the window?

I'm sure there are a tone of errors in this code, but something along these lines should work:

Code:

<body style="position:relative; height:100%; width:100%;">
<iframe source="http://www.google.com" style="height:100%;width:100%;position:absolute;top:0;z-index:0" />
<div style="width:100%;height:100px;position:absolute;z-index:100;top:0;">
<a href="http://www.google.com">Break out of this frame</a>
</div>
</body>

**Morthian** · Mar 22, 2009 17:39

I think I may have been a little unclear; overlay was probably not a good word to use for this situation.

The iframe should go right underneath the table at the top of this page (http://shroomtown.com/link_overlay.php?id=1) and should fill the entire empty space.

Google Image Search is pretty good example of what I am looking for.
http://images.google.com/imgres?imgu...OdaQmQet57TRCw

**Morthian** · Mar 23, 2009 15:03

Alright, I figured out how to get it working; thread closed.

User Tag List

Thread: Overlay for web pages

Thread Tools

Display

Overlay for web pages

Bookmarks

Bookmarks

Posting Permissions