homepage Welcome to WebmasterWorld Guest from 54.204.127.59
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
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
tqatsju




msg:3953017
 3:22 pm on Jul 15, 2009 (gmt 0)

hey i have a question about iframes

here is the barebones code
<tr>
<td>
--big list thats variable and generated with php
--this big list is longer than the iframe's height
</td>
<td>
<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
</td>
</tr>

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!

 

whoisgregg




msg:3972283
 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