title: Puting javascript execution script in remote file
body: <p>I found a question similar to my question but the answer didn't work for me.  I have a navigation that I found online that works with JQuery. </p>
  
  <p>I put the navigation execution script in an external file and linked it, but now it doesn't work.  Can someone explain why it wont work?  I also tried the $(document).ready(function that didnt work either.</p>
  
  <p>I put the reference to the file in the head</p>
  
  <p>I've updated my Javascript, this doesn't work either</p>
  
  <pre><code>    $(document).ready(function() {
          $(function() {
              $('#hn_menu &gt; li').bind('mouseenter',function(){
          var $elem = $(this);
              $elem.find('img')
         .stop(true)
         .animate({
         //'width':'170px',
         'width':'120px',
         //'height':'170px',
         'height':'120px',
         'left':'0px'
      },400,'easeOutBack')
      .andSelf()
      .find('.hn_wrap')
      blah blah blah
          });
      });
  </code></pre>
  
  <p>here's the entire document.. I need to convert this mess to an external file script</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Slide Down Box Menu with jQuery and CSS3&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
      &lt;meta name="description" content="Slide Down Box Menu with jQuery and CSS3" /&gt;
      &lt;meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/&gt;
      &lt;link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/&gt;
      &lt;style&gt;
          body{
              background:#333 url(bg.jpg) repeat top left;
              font-family:Arial;
          }
          span.reference{
              position:fixed;
              left:10px;
              bottom:10px;
              font-size:12px;
          }
          span.reference a{
              color:#aaa;
              text-transform:uppercase;
              text-decoration:none;
              text-shadow:1px 1px 1px #000;
              margin-right:30px;
          }
          span.reference a:hover{
              color:#ddd;
          }
          ul.sdt_menu{
              margin-top:150px;
          }
          h1.title{
              text-indent:-9000px;
              background:transparent url(title.png) no-repeat top left;
              width:633px;
              height:69px;
          }
      &lt;/style&gt;
      &lt;script type="text/javascript" src="testexec.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.easing.1.3.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="content"&gt;
          &lt;h1 class="title"&gt;Slide Down Box Menu with jQuery and CSS3&lt;/h1&gt;
          &lt;ul id="sdt_menu" class="sdt_menu"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="images/2.jpg" alt=""/&gt;
                      &lt;span class="sdt_active"&gt;&lt;/span&gt;
                      &lt;span class="sdt_wrap"&gt;
                          &lt;span class="sdt_link"&gt;About me&lt;/span&gt;
                          &lt;span class="sdt_descr"&gt;Get to know me&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="images/1.jpg" alt=""/&gt;
                      &lt;span class="sdt_active"&gt;&lt;/span&gt;
                      &lt;span class="sdt_wrap"&gt;
                          &lt;span class="sdt_link"&gt;Portfolio&lt;/span&gt;
                          &lt;span class="sdt_descr"&gt;My work&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
                  &lt;div class="sdt_box"&gt;
                          &lt;a href="#"&gt;Websites&lt;/a&gt;
                          &lt;a href="#"&gt;Illustrations&lt;/a&gt;
                          &lt;a href="#"&gt;Photography&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="images/3.jpg" alt=""/&gt;
                      &lt;span class="sdt_active"&gt;&lt;/span&gt;
                      &lt;span class="sdt_wrap"&gt;
                          &lt;span class="sdt_link"&gt;Inspiration&lt;/span&gt;
                          &lt;span class="sdt_descr"&gt;Where ideas get born&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="images/4.jpg" alt=""/&gt;
                      &lt;span class="sdt_active"&gt;&lt;/span&gt;
                      &lt;span class="sdt_wrap"&gt;
                          &lt;span class="sdt_link"&gt;Photos&lt;/span&gt;
                          &lt;span class="sdt_descr"&gt;I like to photograph&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="images/5.jpg" alt=""/&gt;
                      &lt;span class="sdt_active"&gt;&lt;/span&gt;
                      &lt;span class="sdt_wrap"&gt;
                          &lt;span class="sdt_link"&gt;Blog&lt;/span&gt;
                          &lt;span class="sdt_descr"&gt;I write about design&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="images/6.jpg" alt=""/&gt;
                      &lt;span class="sdt_active"&gt;&lt;/span&gt;
                      &lt;span class="sdt_wrap"&gt;
                          &lt;span class="sdt_link"&gt;Projects&lt;/span&gt;
                          &lt;span class="sdt_descr"&gt;I like to code&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
                  &lt;div class="sdt_box"&gt;
                      &lt;a href="#"&gt;Job Board Website&lt;/a&gt;
                      &lt;a href="#"&gt;Shopping Cart&lt;/a&gt;
                      &lt;a href="#"&gt;Interactive Maps&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;span class="reference"&gt;
  </code></pre>
  
  <p>More script and css style
  : <a href="http://www.htmldrive.net/" rel="nofollow" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a><br>
              
          </p>
  
  <pre><code>    &lt;!-- The JavaScript --&gt;
     &lt;!-- &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.easing.1.3.js"&gt;&lt;/script&gt;--&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
              /**
              * for each menu element, on mouseenter, 
              * we enlarge the image, and show both sdt_active span and 
              * sdt_wrap span. If the element has a sub menu (sdt_box),
              * then we slide it - if the element is the last one in the menu
              * we slide it to the left, otherwise to the right
              */
              $('#sdt_menu &gt; li').bind('mouseenter',function(){
                  var $elem = $(this);
                  $elem.find('img')
                       .stop(true)
                       .animate({
                          'width':'170px',
                          'height':'170px',
                          'left':'0px'
                       },400,'easeOutBack')
                       .andSelf()
                       .find('.sdt_wrap')
                       .stop(true)
                       .animate({'top':'140px'},500,'easeOutBack')
                       .andSelf()
                       .find('.sdt_active')
                       .stop(true)
                       .animate({'height':'170px'},300,function(){
                      var $sub_menu = $elem.find('.sdt_box');
                      if($sub_menu.length){
                          var left = '170px';
                          if($elem.parent().children().length == $elem.index()+1)
                              left = '-170px';
                          $sub_menu.show().animate({'left':left},200);
                      }   
                  });
              }).bind('mouseleave',function(){
                  var $elem = $(this);
                  var $sub_menu = $elem.find('.sdt_box');
                  if($sub_menu.length)
                      $sub_menu.hide().css('left','0px');
  
                  $elem.find('.sdt_active')
                       .stop(true)
                       .animate({'height':'0px'},300)
                       .andSelf().find('img')
                       .stop(true)
                       .animate({
                          'width':'0px',
                          'height':'0px',
                          'left':'85px'},400)
                       .andSelf()
                       .find('.sdt_wrap')
                       .stop(true)
                       .animate({'top':'25px'},500);
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>