SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    Barcelona
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Script to make a div move down/up as the user scrolls the page

    Hi, I am looking for a way to make a div (using position:absolute) stay visible on the page as the user scrolls up or down. Can anyone help?

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's one

    Yikes! I changed my site colors recently - now the menu color on that page really clashes! I need to fix that.


    Edit:

    Ok, it's a little better now

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    Barcelona
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I need a bit of help with this. What are the basic steps to get it working?

    BTW: Your page has headings in English and text in latin.

    Best,

    Mark

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mark,

    It will be easy to adapt the script to your page - but first we need to see your page layout. We need to know where you want the floater (it needs to be positioned relative to some element on the page). For example, in my demo I have the page floating in the rightColumn DIV (I position it relative to the leftColumn DIV). Do you already have a basic page layout? Or just an idea of what layout you want?

    Download the X Library. You'll need 3 library files for this demo: x_core.js, x_slide.js, and x_event.js. Put them in the same folder as your page's html file - or you may have a specific folder where you keep js files - that's fine, just let us know.

    btw... The latin is Lorem Ipsum - just "filler" text

  5. #5
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks like you need to download the whole of the net there ...

    just using scrollTop would probably be enough ...

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Scroll</title>
    <script type='text/javascript'>
    function ScrollDiv(){
    document.getElementById('Mydiv').style.top=document.body.scrollTop+10
    }
    </script>
    
    </head>
    <body onscroll="ScrollDiv()">
    <div style="position:absolute;top:10px;background-color:red;" id="Mydiv">
    hello
    </div>
    <div style="position:absolute;top:5000px;">
    hello
    </div>
    </body>
    </html>

  6. #6
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I don't really like the uneven scrolling effect...
    So I just use css:
    Code:
    <html>
    <head>
    <title>Mon bouton mouvant</title>
    <style type="text/css">
    body         { overflow: hidden; 
                   margin: 0px }
    #menu        { position: absolute;
                   top: 10px;
                   left: 0px;
                   width: 200px;
                   text-align: center; 
                   border: 1px solid green;
                   background-color:white; }
    </style>
    </head>
    <body>
    <div id="menu">
    TITRE 1<br/>
     sous titre 1.1<br/>
     sous titre 1.2<br/>
    <br/>
     TITRE 2<br/>
     sous titre 2.1<br/>
     sous titre 2.1<br/>
    </div>
    <div id="cont" style="width:100%; height:100%; overflow:auto;">
    <div style="height:1200px;">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h1>WEB SITE TITLE</h1>
    <p>Scroll Up and down.</p>
    </div>
    </div>
    </body></html>
    nice and smooth ...

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting trick

    looks like you need to download the whole of the net there ...
    [rant]
    Not just picking on you SpaceFrog, but it amazes me that there is this rampant misunderstanding about Javascript libraries. I don't have time to build a custom js file for everyone, so I bundle the functions in files. During development this is convenient. And if it's for a hobby/personal site then it's not a big deal. If it's for a client/commercial site then at deployment you should naturally minimize the size of downloaded js by creating a js file that contains only the functions your app needs (and retaining the copyright/license statement). In fact I have a tool that does this automatically

    I don't force my js toys on anyone. If someone asks me how to use them I try to help, that's all.
    [/rant]

    nice and smooth ...
    Actually that's misleading. The menu is not moving at all.

  8. #8
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    MF => It's just that when I started to code in javascript I tended to download all the js tools available and ended up with gigantic js files attached to my websites ... I couldn't tell what part I needed and what part I didn't...

    The menu is in fact not moving at all...
    the secret is to have an overflow scroll div behind... the contents of the site being in that div ...

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the secret is to have an overflow scroll div behind... the contents of the site being in that div ...
    Very interesting technique. I tried it in Opera7.51, Mozilla1.7.2, and IE6 (on Win2K) - works well in all except Moz doesn't support the scroll-wheel in the DIV.

    pretty slick

  10. #10
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    Barcelona
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, this css method is perfect. Going to have to go with this one.

    Thanks anyway Mike,

    Mark


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •