Script for scrolling


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 4 of 4

Thread: Script for scrolling

  1. #1
    Mark Guest

    Script for scrolling


    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


  2. #2
    Russell Jones Guest

    Re: Script for scrolling

    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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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
    >




  3. #3
    Mark Guest

    Re: Script for scrolling


    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.



  4. #4
    Russell Jones Guest

    Re: Script for scrolling

    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.

    >




Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center