Overlay for web pages
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:
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:
What is the best way to go about doing this?
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?
Originally Posted by bholli
I'm sure there are a tone of errors in this code, but something along these lines should work:
Originally Posted by Morthian
<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" />
<a href="http://www.google.com">Break out of this frame</a>
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.
Alright, I figured out how to get it working; thread closed.