Finding the Height in jQuery

Question

I'm just trying to learn jQuery and JavaScript. I am starting to get concepts and I feel like real world issues are the best ways of learning.

I downloaded the One Page Wonder Bootstrap template and I'm just trying to find the outerHeight of the nav and just call the height in pixels on an alert.

I'm trying to find the height with this:

$('nav').outerHeight();

Then I've tried a few ways to alert that height:

alert(nav);
alert('nav');
alert($(nav));
alert($(nav));

I know it's probably really easy, but this isn't working. Do I need to make this a function?

Here is the HTML, although I'm not sure that it's needed. It uses a standard nav.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>One Page Wonder - Start Bootstrap Template</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/one-page-wonder.min.css" rel="stylesheet">
    <script src="js/one-page-wonder.js"></script>
  </head>

  <body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Sign Up</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Log In</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <header class="masthead text-center text-white">
      <div class="masthead-content">
        <div class="container">
          <h1 class="masthead-heading mb-0">One Page Wonder</h1>
          <h2 class="masthead-subheading mb-0">Will Rock Your Socks Off</h2>
          <a href="#" class="btn btn-primary btn-xl rounded-pill mt-5">Learn More</a>
        </div>
      </div>
      <div class="bg-circle-1 bg-circle"></div>
      <div class="bg-circle-2 bg-circle"></div>
      <div class="bg-circle-3 bg-circle"></div>
      <div class="bg-circle-4 bg-circle"></div>
    </header>

    <section>
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="p-5">
              <img class="img-fluid rounded-circle" src="img/01.jpg" alt="">
            </div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <div class="p-5">
              <h2 class="display-4">For those about to rock...</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="p-5">
              <img class="img-fluid rounded-circle" src="img/02.jpg" alt="">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="p-5">
              <h2 class="display-4">We salute you!</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 order-lg-2">
            <div class="p-5">
              <img class="img-fluid rounded-circle" src="img/03.jpg" alt="">
            </div>
          </div>
          <div class="col-lg-6 order-lg-1">
            <div class="p-5">
              <h2 class="display-4">Let there be rock!</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="py-5 bg-black">
      <div class="container">
        <p class="m-0 text-center text-white small">Copyright &copy; Your Website 2018</p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->

    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>

Share the script in `` if the answers you have do not work. `alert($('nav').first().outerHeight());` would normally work. — Mark Schultheiss, Feb 17 '18 at 04:48
Note you may need to wrap in a document ready event handler `$(function(){alert($('nav').first().outerHeight());});` due to the placement of your script in the header which is why we need to see that script, not just the few lines (which are wrong BTW) — Mark Schultheiss, Feb 17 '18 at 04:54

score 2 · Answer 1 · edited Sep 09 '22 at 16:21

Assign your $('nav').outerHeight() into a variable and then try to use it later... To get the value in pixels, just concatenate it at the end of the variable.

var nav = $('nav').outerHeight();
console.log(nav + 'px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-custom fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Log In</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I think your response was detailed enough to answer. I'll give you a +1 to cancel it out ;) — ketchupisred, Feb 17 '18 at 05:15

score 1 · Answer 2 · edited Sep 09 '22 at 16:18

1

You need to assign this height to some variable to use it later:

let height = $("nav").outerHeight();
alert(height);

nav {
    height: 150px;
    width: 90%;
    background-color: cyan;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav></nav>

Make sure that you call $("nav").outerHeight(); when your HTML content is rendered - put the <script> to the end of the HTML or wrap the code with window.onload = function() { ... };

edited Sep 09 '22 at 16:18

Peter Mortensen

30,738
21
105
131

answered Feb 17 '18 at 04:23

Kirill Simonov

8,257
3
18
42

what is the let for? I tried that, and I'm getting an undefined. – Mitchell Feb 17 '18 at 04:28
1

@brk `let` defines a new variable. it is ES6 syntax, something similar to `var`. The main difference is that the scope of a `var` variable is the entire enclosing function, when the scope of `let` is the block in which they are defined – Kirill Simonov Feb 17 '18 at 04:32
`` to link to my external sheet, then `$('nav').outerHeight();` to find the outerHeight. Just don't have the way of accurately displaying it. `` is also included. – Mitchell Feb 17 '18 at 04:46
1

This script (as it is placed in the header) is executed when your rest html is not rendered yet. Hence the `nav` element doesn't exist, and you get `undefined`. Try to put your ` – Kirill Simonov Feb 17 '18 at 04:51
That's the reason. I had it right all along, but my ` – Mitchell Feb 17 '18 at 05:07
@Mitchel I was glad to help – Kirill Simonov Feb 17 '18 at 05:09

score 1 · Answer 3 · edited Sep 09 '22 at 16:19

1

console.log($('nav').outerHeight());
console.log($('nav').height());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
  </ul>
</nav>

Try using the console instead of alert. It's better a approach and is easy to debug.

edited Sep 09 '22 at 16:19

Peter Mortensen

30,738
21
105
131

answered Feb 17 '18 at 04:26

Black Mamba

13,632
6
82
105

thanks, but I'm still getting an undefined on the console. – Mitchell Feb 17 '18 at 04:33
Concentrate on the quotes `$('nav')` – Black Mamba Feb 17 '18 at 04:52

score 0 · Answer 4 · edited Sep 09 '22 at 16:13

0

I had it right all along, but my <script> tag was in the <head> rather than just above the </body> tag. A rookie mistake.

I have been working with WordPress and Gravity Forms at work where there needs to be a call in the <head>, otherwise console errors pop up. Start with the basics I guess.

edited Sep 09 '22 at 16:13

Peter Mortensen

30,738
21
105
131

answered Feb 17 '18 at 05:14

Mitchell

111
15

Finding the Height in jQuery

4 Answers4