Hi,
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).
+1
A:
hi there, 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
Ali
2009-06-09 19:36:13
A:
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>
artlung
2009-06-09 19:54:26
A:
He asked for bottom of the browser - not bottom of the page. These are two different things (a browser can't always display the whole page at once, without scrolling).
Jonny
2009-08-10 07:26:31