shaam shaam - 1 month ago 10
Javascript Question

$(window).height() not working

JQuery Links being used:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="jquery.min.js"></script>


JS:

var windowHeight = $(window).height();
var menuBarHeight = $("#menubar").height();
alert(windowHeight);
alert(menuBarHeight);


HTML:

<!DOCTYPE html>...


CSS:

#menubar {
width: 100%;
height: 40px;
background-color: #e0e0e0;
border-bottom: 1px solid grey;
}


I have used the following to help me: Jquery $(window).height() function does not return actual window height

The solution doesn't work for me. I'm trying to workout the distance of the window and a menu bar and using the data I will subtract one from the other so as to give me the height to use for another container on the rest of the page.

If it helps I've attached the HTML Doctype tag at the top and have also attached the css stylying of the #menubar. I've tryed on chrome and Firefox on a windows 10 machine.

Answer

Check this code (with the correct jquery lib):

$(function() {
  var windowHeight = $(window).height();
  var menuBarHeight = $("#menubar").height();
  alert(windowHeight);
  alert(menuBarHeight);
});
#menubar {
    width: 100%;
    height: 40px;
    background-color: #e0e0e0;
    border-bottom: 1px solid grey;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<div id="menubar"></div>