title: Getting Uncaught TypeError: Cannot read property 'left' of null in js
body: <p>I have this jquery code that goes through the nav bar and the selected link has a box around it. It only works on the middle link, none of the others. Any ideas? Thanks in advance.</p>
  
  <pre><code>navigation arrow starts
  var $el, leftPos, newWidth,
      $mainNav = $("#nav");
  
  $mainNav.append("&lt;li id='magic-line'&gt;&lt;/li&gt;");
  var $magicLine = $("#magic-line");
  
  $magicLine
      .width($(".current_page_item").width())
      .css("left", $(".current_page_item a").position().left)
      .data("origLeft", $magicLine.position().left)
      .data("origWidth", $magicLine.width());
  
  //scroll arrow
  
  function update_location(){
      $el = $('#nav').children('li.current');
      leftPos = $el.position().left;
      newWidth = $el.width();
      $('#nav li:nth-child(4) a').addClass('button-style');
      if(window.top.scrollY == 0)
      {
          setTimeout(function(){
          $magicLine.stop().animate({
              left: 8,
              width: 355
          });},1000);
          $('#nav li:nth-child(4) a').removeClass('button-style');
  
      }
      else
      {
          setTimeout(function(){
          $magicLine.stop().animate({
              left: leftPos,
              width: newWidth
          });},1000);
      }
  }
  
  $('#magic-line').css('left', '-15px', 'width','411px');
  $(window).scroll(function(){
      update_location();
  });
  
      &lt;div class="navbar-fixed-top navbar" &gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;ul class="nav nav-pills pull-right" id="nav"&gt;
                  &lt;li class="current_page_item" style="width: 355px;"&gt;&lt;a href="#home" class="logo" style="display:block; width: 355px;"&gt;&lt;img src="images/logo.jpg" class="current_page_item" width="355" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#vision"&gt;VISION&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#services"&gt;SCHOOLS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#apply"&gt;REQUEST AN EVALUATION&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#how-it-works"&gt;HOW IT WORKS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#contact-us"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Getting the error after <code>leftPos = $el.position().left;</code> under <code>function update_location()</code></p>