www.webdeveloper.com
Results 1 to 7 of 7

Thread: positioning at the bottom of the window

  1. #1
    Join Date
    Jan 2010
    Posts
    230

    positioning at the bottom of the window

    hi

    im wondering what the best way of positioning something at the bottom of the window is, by that i mean it should allways be on the bottom even if i scroll, just like its a menu at the bottom following u everywhere. Can this be done by just css or do i need to use jquery scroll events to position it allways at the bottom?

    what is the best way to do this?

  2. #2
    Join Date
    Oct 2005
    Location
    Cambridgeshire, UK
    Posts
    191
    If it's following the user as they scroll i'm afraid using Javascript would be the only way (that I can think of anyway)

  3. #3
    Join Date
    Jan 2010
    Posts
    230
    i see, i did that with a div box but not every browser does this as good as chrome :/ on firefox it keeps blinking when i scroll. =/

    i do it like this:

    Code:
        // makes the 160x600 rightside ad to follow the screen when scrolled
        $(window).scroll(function() {
            
            var scrollTopHeight = $(window).scrollTop();
            var setHeight = scrollTopHeight-148;
            
            if (scrollTopHeight >= 151)  {
                $("#c160wrapper_adFixed").css({'top' : setHeight+'px'});
            }
            else {
                $("#c160wrapper_adFixed").css({'top' : '0'});
            }
        });
    can this be done in a better way? (im sure it can but how ^^)

    i wonder how facebook does it.

  4. #4
    Join Date
    Dec 2009
    Posts
    24
    try using css using fixed positioning, such as

    Code:
    #div {position: fixed;
            bottom: 0px;
            left: 0px;
    }

  5. #5
    Join Date
    Jan 2010
    Posts
    230
    Quote Originally Posted by skullsnest View Post
    try using css using fixed positioning, such as

    Code:
    #div {position: fixed;
            bottom: 0px;
            left: 0px;
    }
    but it doesnt update itself when scrolling, u need to use js

  6. #6
    Join Date
    Mar 2007
    Posts
    946
    Try this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div style="position: relative; z-index: 1; width: 200px; margin: auto;">
    	<div style="position: fixed; bottom: 0; background-color: red;">
        	Bottom of the page
        </div>
    </div>
    <div style="width: 400px; border: 1px solid black; margin: auto;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget erat elit, id tristique erat. Integer sodales elit eu erat cursus eu convallis est aliquam. Fusce a hendrerit ligula. Nulla vitae sapien neque, in semper nunc. Proin ultricies arcu sit amet lorem interdum in pellentesque lorem consequat. Integer mattis porttitor ipsum et tristique. Maecenas vitae lorem eros. Curabitur ornare nisl non tellus ultrices lacinia. Proin nunc urna, mattis sed feugiat ut, porttitor et eros. Curabitur a odio ipsum. Sed lacinia blandit sem in lacinia. Proin sapien leo, feugiat nec aliquet a, semper quis urna. Morbi quis odio tortor. Proin quis libero non urna malesuada laoreet. Curabitur sed odio at ipsum tristique cursus et eu nulla.
    
    Proin rutrum accumsan feugiat. Praesent vehicula, sem non porta varius, mauris ipsum eleifend leo, nec mattis ligula est a massa. Nullam euismod orci quis augue commodo convallis. Duis gravida tempus ligula, eget ornare lacus elementum ut. Quisque vel fringilla tellus. Fusce nunc turpis, viverra eget consequat in, gravida sed felis. Fusce nunc nibh, blandit eget elementum et, luctus et velit. Curabitur sed sapien sapien, vel auctor dui. Proin cursus eros sed dolor varius commodo. In at nibh lacus, in condimentum ligula. Proin porta laoreet justo eget egestas. Ut euismod malesuada metus, ut placerat nisl pretium et.
    
    Quisque dignissim arcu at orci semper placerat. Donec vestibulum suscipit dui in interdum. Fusce aliquet dignissim leo quis elementum. Aenean massa arcu, porta ut porta non, fringilla at purus. Donec tortor libero, euismod quis blandit in, adipiscing in tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam interdum neque vulputate lacus tristique et facilisis leo ultrices. Suspendisse potenti. Sed commodo pretium orci id commodo. Mauris nulla est, commodo in sagittis id, mattis vitae tellus. Fusce vitae feugiat lectus. Pellentesque aliquet arcu eu nunc congue et blandit ipsum ornare.
    
    Praesent ac faucibus nisi. In hac habitasse platea dictumst. Sed vel turpis et neque sollicitudin imperdiet eu at sapien. Aenean volutpat sapien ac urna vulputate eu varius lacus luctus. Morbi eget lacus nunc. Duis hendrerit gravida nibh, sed mattis metus accumsan nec. Etiam ligula sapien, pellentesque ac consequat ut, tempus eget dolor. Phasellus turpis velit, scelerisque a bibendum sed, ultrices at odio. Suspendisse viverra sodales enim, vitae mattis lacus tempor ac. Nam eros purus, viverra vitae facilisis interdum, adipiscing non ante. Phasellus tristique turpis vitae nibh semper pulvinar.
    
    Nulla sit amet erat vel dui blandit auctor at at magna. Pellentesque ac augue nulla, accumsan sagittis lectus. Etiam lacinia rhoncus lectus, eget aliquet dui ornare ac. Curabitur et tortor malesuada nisl varius ullamcorper eget quis lorem. Sed ut enim nulla, at tempor nisl. Proin malesuada ullamcorper convallis. Quisque adipiscing, nunc a scelerisque porta, nulla massa tincidunt enim, quis imperdiet dolor tellus in quam. Duis pellentesque lacinia nisl gravida dignissim. Aliquam erat volutpat. Cras posuere eros vitae augue suscipit a venenatis nunc mollis. Nunc in diam eu justo dictum euismod non porta ipsum. Cras et libero velit. Duis fringilla ultricies elit sit amet dignissim. Sed euismod aliquam erat, eu varius lorem tristique sit amet. Morbi nisi magna, viverra vel tincidunt nec, pellentesque convallis lectus. Aliquam ac augue id tellus imperdiet elementum sed ut enim. Mauris tortor dolor, convallis vel hendrerit ut, rhoncus ac nisi. Aenean sodales sapien in velit dictum dapibus. Quisque ornare, massa a ornare porta, augue felis dignissim diam, a eleifend libero turpis quis elit. 
    </div>
    </body>
    </html>

  7. #7
    Join Date
    Jan 2010
    Posts
    230
    oh, that was neat , thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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



Recent Articles