Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder crmpicco's Avatar
    Join Date
    Jan 2005
    Location
    Mauchline, Scotland
    Posts
    1,094
    Thanks
    15
    Thanked 1 Time in 1 Post

    Unhappy make div stick to the BOTTOM of the browser as you scroll

    Code:
    function movediv()
    {
    	booking_details.style.top = document.body.scrollTop;
    }
    
    ---------------
    
    <style>
    .demo {color:#000000; border-color:#666666; background-color:#FFCC00; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;
    layer-background-color:#cccccc; position:absolute; left:12.5%; bottom:0px; width:100%; height:100px; visibility:hidden; z-index:5; border-color:#FFFFFF; border:inherit;}
    </style>
    
    ---------------
    
    <body onScroll="movediv();">
    
    <div id="booking_details" class="demo" style="visibility:hidden">
    ....
    .... code .....
    ....
    </div>
    
    </body>
    When i scroll the DIV sticks to the TOP of the browser, is there any way to
    make it sticks to the BOTTOM of the browser as you scroll?

  • #2
    New Coder
    Join Date
    Sep 2005
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <div id="myDiv"></div>
    <script>
    var winHeight;
    if ( window.innerHeight ) {
    winHeight = window.innerHeight;
    }
    else if ( document.body.clientHeight ) {
    winHeight = document.body.clientHeight;
    }

    myDiv = document.getElementById("myDiv");
    myDiv.style.top = winHeight - myDiv.height;
    </script>

    Let me know if that works, I pulled it off the top of my head because I'm in a rush (anotherwords, it's NOT tested). Should work in IE and Firefox, probably most other browsers.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    Toronto, ON, Canada
    Posts
    231
    Thanks
    0
    Thanked 0 Times in 0 Posts
    FF example, see crazygamer's comment for cross browser compatibility.

    Code:
    <html>
    <head>
        <title>Div on Bottom</title>
        <script>
            function movediv() {
                var divElem = document.getElementById('booking_details');
                divElem.style.top = (window.scrollY + window.innerHeight - parseInt(divElem.style.height)) + 'px';
            }
            function stupid() {
                document.getElementById('booking_details').style.height = '100px';
                movediv();  //sync reload
            }
        </script>
        <style type="text/css">
            #booking_details {
                color: #000000; 
                border-color: #666666; 
                background-color: #FFCC00; 
                font-family: Verdana, Arial, Helvetica, sans-serif; 
                font-weight: bold;
                layer-background-color: #cccccc; 
                position: absolute; 
                left:12.5%; 
                bottom:0px; 
                width: 87.5%; 
                height: 100px;
                /*
                visibility:hidden; 
                */
                z-index:5; 
                border-color:#FFFFFF; 
                border:inherit;
            }
        </style>    
    </head>
    <body onload="stupid();" onscroll="movediv();">
    <div id="booking_details">
    Stay on Bottom of the Page
    </div>
    <script>
    for(var i=0; i<100; i++) {
        document.write('line: ' + i + '<br>');
    }
    </script>
    </body>
    </html>
    rm -f /

  • #4
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey ,

    you do not need to use in script you can use only CSS to make that happens.

    #mydiv {
    position: fixed;
    z-index: 2;
    bottom: 0px;

    }


    let me know if it works for you.

    Hassan


  •  

    Posting Permissions

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