title: jQuery context is null + IE bug not showing contact/bio boxes
body: <p>I found an open-source code that was perfect for my husbands website. I changed it to our liking, but it keeps giving an annoying error in the console:</p>
  
  <p>Unable to get property "ownerDocument" of undefined of null reference.</p>
  
  <p>In Firefox it says simply: TypeError: context is null</p>
  
  <p>the error is supposedly here: jquery-1.10.2.js, line 1822 character 2</p>
  
  <pre><code>Sizzle.contains = function( context, elem ) {
     // Set document vars if needed
     if ( ( context.ownerDocument || context ) !== document ) {
          setDocument( context );
     }
     return contains( context, elem );
  };
  </code></pre>
  
  <p>I think I am doing something wrong in my code, but I can't seem to say where.</p>
  
  <p>Also there is a weird IE error: The contact and bio page dissappear, when I open the menu, it is there, but it only comes foreward when I select that part of the page, and then it dissappears. I don't know if it is anything to do with the above error.</p>
  
  <p>It works fine on Safari, Firefox, Chrome, but most of the visitors use IE.</p>
  
  <p>HTML CODE</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;title&gt;Franklin Cando - Photographe&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
      &lt;meta name="description" content="Franklin Cando - Photographe" /&gt;
      &lt;meta name="keywords" content=""/&gt;
  &lt;!--I added this as a test, since I saw somewhere that this could help--&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=10" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=9" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=7" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=6" /&gt;
  &lt;link rel="shortcut icon" href="/images/icons/favicon.ico" type="image/x-icon"/&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/&gt;
  &lt;script src="js/jquery-1.10.2.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/cufon-yui.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/Quicksand_Book_400.font.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      Cufon.replace('span,p,h1',{
      textShadow: '0px 0px 1px #ffffff'
       });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
        (function(i,s,o,g,r,a,m) 
         {
            i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},
                 i[r].l=1*new Date();a=s.createElement(o),
         m=s.getElementsByTagName(o)0];
                 a.async=1;
                 a.src=g;
                 m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-
                   analytics.com/analytics.js','ga');
        ga('create', 'UA-44223947-1', 'franklincando.com');
        ga('send', 'pageview');
  &lt;/script&gt;
     &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="st_main" class="st_main"&gt;
  &lt;img src="images/album/AK9A4519.jpg" alt="" class="st_preview" id="bigImage"  
       style="display:none;"/&gt;
  &lt;div class="st_overlay"&gt;&lt;/div&gt;
  &lt;h1&gt;
         &lt;a class="titelLink" href="http://www.franklincando.com/"&gt;Franklin Cando&lt;/a&gt;
      &lt;/h1&gt;
  &lt;div id="st_loading" class="st_loading"&gt;&lt;span&gt;Loading...&lt;/span&gt;&lt;/div&gt;
  &lt;ul id="st_nav" class="st_navigation"&gt;
     &lt;li&gt;
        &lt;span class="st_link"&gt;Biographie&lt;span class="st_arrow_down"&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;div class="st_about st_thumbs_wrapper"&gt;
          &lt;div class="st_subcontent"&gt;
       &lt;table&gt;
        &lt;!--CONTENT--&gt;
       &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
         &lt;span class="st_link"&gt;Contact&lt;span class="st_arrow_down"&gt;&lt;/span&gt;&lt;/span&gt;
         &lt;div class="st_about st_thumbs_wrapper" id="form_div_parent"&gt;
         &lt;div class="st_subcontent" id="form_div_child"&gt;
          &lt;div class="contactinfo" id="contactinfo_div"&gt;
        &lt;h3&gt;Contact&lt;/h3&gt;&lt;br/&gt;
         &lt;!--CONTENT--&gt;
        &lt;form id="contactForm" method="post" action="php/send_form.php" &gt;
          &lt;!--CONTENT--&gt;
          &lt;input class="button" type="button" onclick="validateForm()" 
                       value="Envoyer"/&gt;
          &lt;input class="button" type="reset" onclick="resetForm()" 
                       value="Effacer"/&gt;
        &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
          &lt;/li&gt;
      &lt;li class="album"&gt;
      &lt;span class="st_link"&gt;Photos&lt;span class="st_arrow_down"&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;div class="st_wrapper st_thumbs_wrapper" id="wrapper"&gt;
        &lt;div class="st_thumbs" id="thumbs"&gt;
          &lt;!--IMAGES--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
    &lt;/div&gt; 
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JQUERY-JS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
     $(document).ready(function() {
  
     //the loading image
     var $loader = $('#st_loading');
  
     //the ul element 
     var $list = $('#st_nav');
  
     //the current image being shown
     var $currImage = $('#st_main').children('img:first');
  
     //the facebook button - iris
     var $fb = $('#fb');
     $fb.hide();
  
     //let's load the current image and just then display the navigation menu
     $('&lt;img&gt;').load(function(){
        $loader.hide();
  
    if ($currImage.width() &gt; $currImage.height()){
       $currImage.css({"width":"100%"});
    }
  
    $currImage.fadeIn(3000);
    //slide out the menu
    setTimeout(function(){
      $list.animate({'left':'0px'},500);
      $fb.show();
    },1000);
  
  }).attr('src',$currImage.attr('src'));
  
  //calculates the width of the div element where the thumbs are going to be 
      displayed
  
  buildThumbs();
  
  function buildThumbs(){
      $list.children('li.album').each(function(){
      var $elem = $(this);
      var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
      var $thumbs = $thumbs_wrapper.children(':first');
  
               //each thumb has 180px and we add 3 of margin
      var finalW = $thumbs.find('img').length * 183;
      $thumbs.css('width',finalW + 'px');
  
      //make this element scrollable
      makeScrollable($thumbs_wrapper,$thumbs);
        });
  }
  
  //clicking on the menu items (up and down arrow)
  //makes the thumbs div appear, and hides the current opened menu (if any)
  
      $(document).on('click','.st_arrow_down',function(){
      var $this = $(this);
      hideThumbs();
          $this.addClass('st_arrow_up').removeClass('st_arrow_down');
      var $elem = $this.closest('li');
              $elem.addClass('current').animate({'height':'170px'},200);
      var $thumbs_wrapper = $this.parent().next();
      $thumbs_wrapper.show();
  });
  
  $(document).on('click','.st_arrow_up',function(){
      var $this = $(this);
          $this.addClass('st_arrow_down').removeClass('st_arrow_up');
      hideThumbs();
  });
  
  //clicking on a thumb, replaces the large image
  $(document).on('click','.st_thumbs img',function(){
      var $this = $(this);
      $loader.show();
      $('&lt;img class="st_preview"/&gt;').load(function(){
          var $this = $(this);
          var $currImage = $('#st_main').children('img:first');
          $this.insertBefore($currImage);
          if ($this.width() &gt; $this.height()){    
                          $this.css({"width":"100%"});
                      }
          $loader.hide();
          $currImage.fadeOut(2000,function(){
               $(this).remove();
              });
             }).attr('src',$this.attr('alt'));
  }).bind('mouseenter',function(){
      $(this).stop().animate({'opacity':'1'});
  }).bind('mouseleave',function(){
      $(this).stop().animate({'opacity':'0.7'});
  });
  
  
  //hide image menu upon mouse out - iris
  $list.find('.st_thumbs').bind('mouseleave',function(){
      hideThumbs();
  });
  
  //function to hide the current opened menu  //.css({"display":"none"}) // to hide 
       the bigger text boxes - iris
  function hideThumbs(){
      $list.find('li.current').animate({'height':'50px'},400,
                                       function(){
                          $(this).removeClass('current');
                       })
                       .find('.st_thumbs_wrapper')
                       .hide()
                       .andSelf()
                       .find('.st_link span')
                       .addClass('st_arrow_down')
                       .removeClass('st_arrow_up');
  }
  
  //makes the thumbs div scrollable on mouse move the div scrolls automatically
  
      function makeScrollable($outer, $inner){
      var extra = 800;
      //Get menu width
      var divWidth = $outer.width();
      //Remove scrollbars
      $outer.css({overflow:'hidden'});
      //Find last image in container
      var lastElem = $inner.find('img:last');
      $outer.scrollLeft(0);
      //When user move mouse over menu
      $outer.unbind('mousemove').bind('mousemove',function(e){
                      var containerWidth = lastElem[0].offsetLeft 
                                                 + lastElem.outerWidth() + 2*extra;
                      var left = (e.pageX - $outer.offset().left) 
                                                 * (containerWidth-divWidth) / divWidth - 
                                              extra;
                      $outer.scrollLeft(left);
                  });
              }
          });
  
     &lt;/script&gt;
  </code></pre>
  
  <p>The website: <a href="http://www.franklincando.com/" rel="nofollow">www.franklincando.com</a></p>
  
  <p>PS: really sorry about indentation. I spent a lot of time making it right in this post, and upon posting it still doesn't look like it is supposed to. I hope it is still clear.</p>