Welcome to WebmasterWorld Guest from 54.198.69.193

Forum Moderators: open

Message Too Old, No Replies

Move Iframe When User Scrolls Down in Web Browser

want to see how i can move an iframe while user scrolls

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

10+ Year Member



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!

10:16 pm on Aug 14, 2009 (gmt 0)

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



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'});
});
 

Featured Threads

Hot Threads This Week

Hot Threads This Month