Reputation: 729
I'm trying to learn about window height and viewport. I made the following:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
for(var count=0; count < 100; count++)
$("body").append("<div><button class=\"hhh\">HELLO</button></div>");
});
$(document).on("click",".hhh",function(event) {
console.log($(window).height());
console.log($(window).scrollTop());
});
$(window).resize(function() {
console.log($(window).height());
});
</script>
</head>
<body>
</body>
</html>
When I resize the window and click the button the $(window).height() always remains the same. I would have expected this value to change... Can anyone please tell me why it's remaining constant. I'm using the latest version of Chrome on a mac.
Upvotes: 1
Views: 890
Reputation: 729
Ok this article explains things. I've never included a < !DOCTYPE HTML> on my html I guess this was a mistake...
http://viralpatel.net/blogs/jquery-window-height-incorrect/
Upvotes: 1
Reputation: 1962
Just give it a shot to this code:
$(window).resize(function() {
console.log($(window).height());
});
that works for me but I'm not sure if this is what you are looking for.
EDIT:
Could you please close the developer tools and include an alert in your code? You are getting back a different context for your height (you are getting the height for the debugger console not for the window). Try it and let us know if it doesn't work.
EDIT 2:
Just tried your exact same code compared to one of my test and the only difference I can see is that I have this at the top of my HTML document:
When I remove that from the document on Chrome I get the full height of the window (not zero) if I add it back I get the different sizes based on the resizing I do. What specific browser are you using? could it be that you are using an old browser?
Upvotes: 1