title: Error in my jquery arrow menu animation
body: <p>I'm working on a project where i try to use a moving arrow navigation.
  Now there is something wrong in my jquery.
  The original of the arrow is not working but if i resize the window it does work.
  So de window.resize function works, but the window.load doesn't.
  i also tried to replace the window.load bij document.ready but that doesn't work to.
  I hope someone can help me.</p>
  
  <p>The site is online here: <a href="http://jesseu.nl/madein030/" rel="nofollow">http://jesseu.nl/madein030/</a>
  JSfiddle: <a href="http://jsfiddle.net/dgLthkjy/" rel="nofollow">http://jsfiddle.net/dgLthkjy/</a>
  The HTML code is:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Made in 030&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="style.css" rel="stylesheet" media="all" type="text/css" /&gt;
      &lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/myscript.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="menu_container"&gt;
              &lt;menu&gt;
                  &lt;ul class="left_menu" &gt;
                      &lt;li class="left" &gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="left active" &gt;&lt;a href="#"&gt;Over&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="left"&gt;&lt;a href="#"&gt;Probeerlijst&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="logo_container"&gt;
                          &lt;div class="logo"&gt;
                              &lt;img src="img/logo.png" alt=""/&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="right"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="right"&gt;&lt;a href="#"&gt;Shop&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="right"&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                      &lt;li id='magic-line'&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/menu&gt;
          &lt;/div&gt;
          &lt;div class="banner"&gt;
              &lt;img src="img/banner.jpg" class="banner_image"/&gt;
              &lt;img src="img/skyline.png" class="skyline_image"/&gt;
          &lt;/div&gt;
          &lt;div class="banner_footer"&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>The Jquery code is:</p>
  
  <pre><code>$(window).load(function() {
  
  window.setTimeout(function(){
      var bannerHeight = ($(".banner_image").height()+'px')
      $(".banner").css({'height': bannerHeight});
      console.log(bannerHeight);
  }, 1);
  
  var $el, leftPos, newWidth,
      $mainNav = $("menu ul");
  var $magicLine = $("#magic-line");
  var menuLinkWidth = $('menu ul li.active a').width() / (2);
  
  $magicLine
      .width($("menu ul li.active").width())
      .css("left", $("menu ul li.active a").position().left)
      .data("origLeft", $magicLine.position().left)
      .data("origWidth", $magicLine.width());
  
  $("menu ul li a").hover(function() {
      $el = $(this);
      leftPos = $el.position().left;
      newWidth = $el.parent().width();
      $magicLine.stop().animate({
          left: leftPos,
          width: newWidth
      },500);
  }, function() {
      $magicLine.stop().animate({
          left: $magicLine.data("origLeft"),
          width: $magicLine.data("origWidth")
      },500);    
  });
  
  var value = $('body').width() / (11);
  $('menu ul li a').css('font-size',$('body').width()/85);
  $('#magic-line').css('top',value - 9);
  
  var outerHeight = $('menu ul li').height();
  var innerHeight = $('menu ul li a').height();
  $('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);
  
  });
  
  $(window).resize(function(){
  
  var $el, leftPos, newWidth,
      $mainNav = $("menu ul");
  var $magicLine = $("#magic-line");
  $magicLine
      .width($("menu ul li.active").width())
      .css("left", $("menu ul li.active a").position().left)
      .data("origLeft", $magicLine.position().left)
      .data("origWidth", $magicLine.width());
  
  $("menu ul li a").hover(function() {
      $el = $(this);
      leftPos = $el.position().left;
      newWidth = $el.parent().width();
      $magicLine.stop().animate({
          left: leftPos,
          width: newWidth
      },500);
  }, function() {
      $magicLine.stop().animate({
          left: $magicLine.data("origLeft"),
          width: $magicLine.data("origWidth")
      },500);    
  });
  
  var value = $('body').width() / (11);
  $('menu ul li a').css('font-size',$('body').width()/85);
  $('#magic-line').css('top',value - 9);
  
  var BannerHeight = ($(".banner_image").height()+'px')
  $(".banner").css({'height': BannerHeight});
  console.log(BannerHeight);
  
  var outerHeight = $('menu ul li').height();
  var innerHeight = $('menu ul li a').height();
  $('menu ul li a').css('margin-top', (outerHeight - innerHeight)/2);
  
  });
  </code></pre>
  
  <p>The CSS code is:</p>
  
  <pre><code>#magic-line { 
  position: absolute; 
  left: 0; 
  height: 10px; 
  background-image:url(img/active.png);
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:25px;
  }
  </code></pre>