PDA

View Full Version : How to make an ad scroll down with the page automatically?



skcin7
Feb 11th, 2010, 12:29 PM
Hi all, does anybody know how to make a portion of the page (in this case, a small ad on the right hand side) automatically scroll down as the page scrolls down? I am trying to emulate the effect on the page: http://www.demonoid.com/. Notice how on the page the ad at the right scrolls down as the page scrolls. How is this done?!

I looked at the source code and I found this which looks to be relevant:

<div id="bnslsp3" style="height: 600px; width: 160px; display: block; padding-left: 3px;">
<!-- BEGIN RAW TAG - 160 x 600 - ROS: Run-of-site - DO NOT MODIFY -->
<iframe name="bnr3" id="bnr3" style="position: absolute; z-index: 10; top: 204px;" marginwidth="0" marginheight="0" src="Demonoid.com_files/bnr_right6.htm" scrolling="NO" frameborder="0" height="614" width="160"></iframe>
<!-- END TAG cpxr. -->
</div>

But that code doesn't seem to be working on my page when I try it out. Anybody know what I'm missing? Thanks.

ahallicks
Feb 11th, 2010, 12:36 PM
position: fixed; literally 'fixes' the position of the element from the top, left, bottom or right of the screen:

For example:



#bnslsp3 {
position: fixed;
top: 50px;
right: 100px;
}


would fix the element defined by the ID of 'bnslsp3' 50 pixels from the top and 100 pixels from the right of the screen.

However, one thing to note is that this does not work in IE6.

Donkey
Feb 11th, 2010, 02:17 PM
There are ways of emulating "position: fixed in IE6:
http://www.cssplay.co.uk/layouts/fixed.html

skcin7
Feb 11th, 2010, 02:27 PM
ahallicks: Thanks for your post. That's good and all, but the one thing I really like is how the ad doesn't scroll ALL THE WAY to the top or bottom of the page, it stops just below the header and just above the footer, like it is somehow bound within a certain area. Does anybody know how to do this?

skcin7
Feb 11th, 2010, 02:35 PM
Here is what I am working on:

http://nicholas-morgan.com/sandbox/scroll2/scroll.php

How can I make the picture scroll with the screen, but also stay within the bounds of the site (and not go into the header or footer portion):

ahallicks
Feb 11th, 2010, 03:04 PM
You'll have to do that in javascript then. Try posting in the javascript forum, or Google it. There are plenty of scripts out there that do what you require.

@Donkey


The only problem with this is that you cannot use absolute or relative positions on the moving page but float is allowed.


Oh, and I would also say that tables for layout is not the best practice. I think you should look into using (X)HTML and CSS to style and layout your pages.

Donkey
Feb 11th, 2010, 03:05 PM
Just position it so the top of the ad is below the bottom of the header when you are at the top of the page and the bottom of the ad is above the footer when you are at the bottom of the page.

You are looking at this wrongly, the ad doesn't scroll, everything else scrolls behind it.

ahallicks
Feb 11th, 2010, 03:07 PM
Just position it so the top of the ad is below the bottom of the header when you are at the top of the page and the bottom of the ad is above the footer when you are at the bottom of the page.

You are looking at this wrongly, the ad doesn't scroll, everything else scrolls behind it.

That would work too, and by the looks of the page the footer is tiny so this would be an issue (except for people with a small browser window). But, if the design were to change you'd then struggle. I'd at least suggest a back up with js to get over any teething issues.

Donkey
Feb 11th, 2010, 03:25 PM
@Donkey



The only problem with this is that you cannot use absolute or relative positions on the moving page but float is allowed.


Yes, but that is just a challenge to your ingenuity.

skcin7
Feb 11th, 2010, 09:22 PM
Hi, can somebody please explain better how to do this? This may be easy for you guys but to me its kinda difficult.

I added the "position:fixed" attribute and this is what happens now: http://nicholas-morgan.com/sandbox/scroll2/scroll.php

Is it necessary to use Javascript or can this be done purely in CSS?

ahallicks
Feb 12th, 2010, 10:00 AM
Is that not the effect you wanted?

skcin7
Feb 12th, 2010, 05:06 PM
Is that not the effect you wanted?

It's similar, but not completely correct. Look at the way it works on www.demonoid.com, and compare it to the way it is currently working at http://nicholas-morgan.com/sandbox/scroll2/scroll.php

ahallicks
Feb 12th, 2010, 05:10 PM
Technically yours i better because it doesn't use javascript. The one on that example uses javascript to both, fix the position of the ad (which is why it appears to 'skip' as you scroll (as it has an onscroll event attached)), and stop the ad scrolling above that header.

You might want to try posting in the javascript forum for a script to do that