homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Move Iframe When User Scrolls Down in Web Browser
want to see how i can move an iframe while user scrolls

10+ Year Member

Msg#: 3953015 posted 3:22 pm on Jul 15, 2009 (gmt 0)

hey i have a question about iframes

here is the barebones code
--big list thats variable and generated with php
--this big list is longer than the iframe's height
<iframe width="675" height="600" src="$url"
image that i want the user to see as they look at the big list in the left cell

Bascially what i want to do is get the iframe to move as the user scrolls down the web page so that while the user is looking at the big list in the left cell the iframe containing an image i want the user to see while they look at the list in the right cell will move down as the user scrolls

One workaround i've seen is to also put the left cell's data in an iframe so that the user actually scrolls in the left cell (the right cell is smaller so it stays even with the left cell's iframe). But i'd like to avoid doing this so i can keep the data from the left side in the actual page rather than an iframe...BUT, If i can't i guess i will have to but i figured i'd post here first thanks in advance!



WebmasterWorld Senior Member whoisgregg us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3953015 posted 10:16 pm on Aug 14, 2009 (gmt 0)

Hello tqatsju!

Basically, you'll want to set up a function to observe the window.onscroll event and, when it changes, get the position of the scroll, then move the iframe to that new position.

I use the Prototype library, so the code below should work if you have that same library. Otherwise, you can use this as pseudocode to put together your own solution. :)

Event.observe(window, 'scroll', function() {
$('iframe_id').setStyle({'position' : 'absolute', 'top' : document.body.scrollTop +'px'});

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved