SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Palm Harbor, FL
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    iiicreative.com - Louisiana Web Design
    Innovation. Intuition. Imagination + Creative

    Follow me on twitter!

  3. #3
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Palm Harbor, FL
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bholli View Post
    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?

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Morthian View Post
    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>
    iiicreative.com - Louisiana Web Design
    Innovation. Intuition. Imagination + Creative

    Follow me on twitter!

  5. #5
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Palm Harbor, FL
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by Morthian; Mar 23, 2009 at 14:25.

  6. #6
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Palm Harbor, FL
    Posts
    348
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, I figured out how to get it working; thread closed.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •