Search code examples
javascriptjquerywindowdoctype

$(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 this question as reference, however the solution there 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.

Solution

  • 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>