SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Anchor Iframe

  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anchor Iframe

    I have a web page with an iframe that loads a series of thumbnails and when you click on a thumbnail it loads in the same iframe a larger image.

    My problem is when you scroll down the page and hit one of the lower images it loads the image and will go to the top of the iframe but not the top containing page.

    I have tried using named anchors but cannot get it to reference the containing page.

    I would be grateful for some help.
    Simply Alien
    Your Creative Partner

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    If you want to go to the top of the iframe'd page you can set an ID to the top of the page you are including.

    <body>
    <div id="top">

    Then when you reference the iframe make the target URL "page.html#top"

    Hope I helped.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Containing page:

    Code:
    <!doctype html>
    <html>
        <head>
    	<title></title>
    	<style>
    	    body { padding:700px 0 0; }
    	</style>
        </head>
    
        <body id="hrm">
    
    	<iframe src="frame.html" width="500" height="500"></iframe>
    
        </body>
    </html>
    Iframe:

    Code:
    <!doctype html>
    <a href="#">click me!</a>
    <script>
        var a = document.getElementsByTagName('a')[0];
        a.onclick = function() {
    	parent.scrollTo(0,0);
        }
    </script>
    Should suffice methinks.
    Cross browser css bugs

    Dan Schulz you will be missed

  4. #4
    SitePoint Member liam_tmt7's Avatar
    Join Date
    Jan 2008
    Location
    Scotland
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SoulScratch, are you able to describe what the code does, as I am not following.

    thanks
    Liam

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    It scrolls to the top of the iframe to the top left corner, aka giving the illusion of a freshly loaded page
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by liam_tmt7 View Post
    SoulScratch, are you able to describe what the code does, as I am not following.

    thanks
    Liam
    The code in the frame is basically, an event handler is assigned to an anchor element so that when it is clicked, the referenced parent/containing page ( which contains the iframe ) scrolls to the far top and left, which I *think* is what the original poster wanted.
    Cross browser css bugs

    Dan Schulz you will be missed

  7. #7
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your input SoulScratch however it takes me to the top of the iframe not the top of the containg page. Therefore you have to scroll up to see the page title. I guess because it is loading a second page into the iframe it is not picking up the containing page.
    Simply Alien
    Your Creative Partner

  8. #8
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by barrysss View Post
    Thanks for your input SoulScratch however it takes me to the top of the iframe not the top of the containg page. Therefore you have to scroll up to see the page title. I guess because it is loading a second page into the iframe it is not picking up the containing page.
    Using the JS I provided? Are any errors being thrown? Could you paste what you have tried to implement JS-wise?
    Cross browser css bugs

    Dan Schulz you will be missed


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
  •