SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I make an iFrame autoscroll?

    I've got an iFrame embedded on my page which links to a webcam page on the BBC web site. The problem is, is the user has to scroll to view the camera. Is there any way I can get the content page inside the iFrame to scroll automatically say 100 pixels down?

    The framed page is on the BBC site so I obviouslly have no control over it i.e. to add anchor tags, etc.

  2. #2
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not the best linked source, but is this what you are referring too?

    http://www.w3schools.com/TAGS/att_iframe_scrolling.asp

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi jaspinal

    You would need JavaScript to scroll halfway down, or rather use a name="oneHundredPxDown" and include that in your target of the link when calling the frame. Make sure oneHundredPxDown is about 100 pixels down.

    Cheers.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This can be done very easily without the introduction of JavaScript. All you need is a simple bit of CSS trickery. Just adapt the following code as you require:

    HTML
    Code HTML4Strict:
    <div id='outerdiv'>
    <iframe src="#" id='inneriframe' scrolling=no></iframe>
    </div>

    Just replace '#' with your BBC link (I can't post URLs yet!).

    CSS

    Code CSS:
    <style>
    #outerdiv
    {
    width:446px;
    height:246px;
    overflow:hidden;
    position:relative;
    }
     
    #inneriframe
    {
    position:absolute;
    top:-100px;
    left:-200px;
    width:1280px;
    height:1200px;
    }
    </style>

    That should do the trick, shout up if not...

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Blackpool, UK
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks for the info guys! FinerHome I used your technique, superb, works a treat - just what I was after - thanks a lot!


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
  •