CODEWITHSUNDEEP
jquery
Blankman
Blankman

Reputation: 266910

In jQuery, how to get the bottom position of the browser?

In my CSS I set the position of an element to the top of the page using CSS top 0px.

How can I figure out the position of the bottom of the browser? (I want to force an element to the bottom of the page, that is, bottom viewable).

Upvotes: 2

Views: 30751

Answers (4)

artlung
artlung

Reputation: 34013

Here's my approach for a basic item that needs to stay at the bottom of the page.

First the JavaScript. The "centerBottom" function is where the action happens.

<script type="text/javascript">
/**
 * move an item to the bottom center of the browser window
 * the bottom position is the height of the window minus
 * the height of the item
 */
function centerBottom(selector) {
    var newTop =   $(window).height() - $(selector).height();
    var newLeft = ($(window).width()  - $(selector).width()) / 2;
    $(selector).css({
        'position': 'absolute',
        'left': newLeft,
        'top': newTop
    });
}

$(document).ready(function(){

    // call it onload
    centerBottom("#bottomThing");

    // assure that it gets called when the page resizes
    $(window).resize(function(){
        centerBottom('#bottomThing');
    });

});
</script>

Some styles to make it clear what we're moving around. It can be tricky moving items absolutely if one does not know the height and width. DIVs usually have a width of 100% if unspecified, which may not be what you want.

<style type="text/css">
body {
    margin: 0;
}
#bottomThing {
    background-color: #600; color: #fff; height:40px; width:200px;
}
</style>

And the body of the page:

<body>
<div id="bottomThing">
    Put me at the bottom.
</div>
</body>

Upvotes: 1

Ali
Ali

Reputation: 253

bottom position of the browser is the distance from top:0 to bottom which equals the height of the document for the client. it can be easily calculated like :

        $(document).ready(function() {
        var bottomPosition = $(document).height();
        alert(bottomPosition);
    });

hope this is helping

Upvotes: 3

lucas
lucas

Reputation: 6971

Do you want some item to stay at the bottom of the browser window as the user scrolls down the page, or an item to "stick" to the bottom of the page, wherever that might be?

If you want #2, a cross browser CSS method could be found here.

Upvotes: 0

helloandre
helloandre

Reputation: 10721

you should be able to use css: bottom: 0px;

Upvotes: 4

Related Questions