hi,
I have seen on several sites that have some image on the right hand side
where it would continue to scroll down as you scroll down. I was wondering
if anyone know the script of how that is done. Thanks.
mark
Printable View
hi,
I have seen on several sites that have some image on the right hand side
where it would continue to scroll down as you scroll down. I was wondering
if anyone know the script of how that is done. Thanks.
mark
Here's one way. The CSS properties background-image, background-position,
and background-attachment let you specify an image, its placement, and its
behavior when the page scrolls. Here's an example that forces the background
image to remain in the same position relative to the page when the user
scrolls the page. Replace yourImageHere in the URL below with your own
background image. I positioned the image at 400 x 20, but you can place it
anywhere you like. The image remains steady while the page content scrolls
over it.
<HTML>
<HEAD>
<style type="text/css">
.fixImg { background-attachment: scroll}
</style>
</HEAD>
<BODY style="background-image: url(YourImageHere.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 400px 20px;">
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
<p>This is a test containing text that will scroll over the image in the
background whenever the user moves the scrollbar.</p>
<p> </p>
</BODY>
</HTML>
"Mark" <mthead28@hotmail.com> wrote in message
news:3b8c11e4$1@news.devx.com...
>
> hi,
>
> I have seen on several sites that have some image on the right hand side
> where it would continue to scroll down as you scroll down. I was
wondering
> if anyone know the script of how that is done. Thanks.
>
> mark
>
Thanks for the tip, what if I want an active X control to keep scrolling.
I was thinking of inserting the active x control in a layer and as the user
scrolls down the web page, the layer would scroll with it. Is there a way
to do this. Would CSS properties work? thanks.
Mark
"Russell Jones" <arj1@northstate.net> wrote:
>Here's one way. The CSS properties background-image, background-position,
>and background-attachment let you specify an image, its placement, and its
>behavior when the page scrolls. Here's an example that forces the background
>image to remain in the same position relative to the page when the user
>scrolls the page. Replace yourImageHere in the URL below with your own
>background image. I positioned the image at 400 x 20, but you can place
it
>anywhere you like. The image remains steady while the page content scrolls
>over it.
No. Other than for the background image, as shown in my previous post, CSS
properties won't work. You can write a script to reposition the layer (or
the control itself, for that matter) whenever the user scrolls the page. Use
the document.body.scrollTop and document.body.scrollLeft properties to
determine the offset for the item relative to its inital position on the
page.
Typically, images and other items flicker or jump when you use this
technique. One way to minimize that is to make them invisible whenever the
user scrolls the page. Check the scroll value periodically, say ever 50
milliseconds, with a timer (see window.setTimeout) until you get two
identical values in a row. At that point, the user has (at least
temporarily) stopped scrolling, and you can make the item(s) visible again
in their new positions.
"Mark" <mthead28@hotmail.com> wrote in message
news:3b8dd1f2$1@news.devx.com...
>
> Thanks for the tip, what if I want an active X control to keep scrolling.
> I was thinking of inserting the active x control in a layer and as the
user
> scrolls down the web page, the layer would scroll with it. Is there a way
> to do this. Would CSS properties work? thanks.
>
> Mark
>
>
> "Russell Jones" <arj1@northstate.net> wrote:
> >Here's one way. The CSS properties background-image, background-position,
> >and background-attachment let you specify an image, its placement, and
its
> >behavior when the page scrolls. Here's an example that forces the
background
> >image to remain in the same position relative to the page when the user
> >scrolls the page. Replace yourImageHere in the URL below with your own
> >background image. I positioned the image at 400 x 20, but you can place
> it
> >anywhere you like. The image remains steady while the page content
scrolls
> >over it.
>