title: JQuery hide/show function stops working when I put all my components together
body: <p>My project has to do with color keying video.  I'm using an UL for navitagion between screens where I fine tune the key, and to hide/show a div where  I'm using a slider to change the number of colors that are keyed out.<br>
  All of these things work great separately.  But when I try to get them to all work on the same page, the hide/show stops working. I've tried taking it apart and putting it back together a piece at a time, but I always get stuck at this point.  The code is below.</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;!--[if lt IE 7]&gt; &lt;html class="ie6 oldie"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;    &lt;html class="ie7 oldie"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;    &lt;html class="ie8 oldie"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt;
  &lt;html class=""&gt;
  &lt;!--&lt;![endif]--&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="boilerplate.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="videoSetup.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;link rel="stylesheet" href="FGSlider/css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" /&gt;
      &lt;link rel="Stylesheet" href="FGSlider/css/ui.slider.extras.css" type="text/css" /&gt;
      &lt;style type="text/css"&gt;
          /*body {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }*/
          fieldset { border:0; margin: 6em; height: 12em;}    
          label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
          select {margin-right: 1em; float: left;}
          .ui-slider {
      clear: both;
      top: 5em;
  }
  
  .wrap-slider {
      padding: 50px;
      font-family: Georgia, serif;
      display: none;
  }
  
  &lt;/style&gt;
  
  &lt;script src="http://code.jquery.com/jquery-latest.min.js"
          type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;!--[if lt IE 9]&gt;
  &lt;script src="//html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;script src="respond.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="gridContainer clearfix"&gt;
    &lt;header id="top" class="fluid"&gt; 
  
      &lt;!--  &lt;div id="container"&gt;
      &lt;video autoplay id="videoElement"&gt;
  
      &lt;/video&gt;
  &lt;/div&gt;--&gt; 
      &lt;!--from Jeff Burtoft--&gt;
      &lt;div class="row"&gt;
        &lt;!--&lt;div class="span5"&gt;--&gt;
          &lt;video id="videoElement" controls&gt; 
  
          &lt;/video&gt;
          &lt;canvas id="hiddenCanvas" width="640" height="386"&gt;&lt;/canvas&gt;
      &lt;!-- &lt;/div&gt;
       &lt;div class="span5"&gt;--&gt;
          &lt;canvas id="displayCanvas" width="640" height="386"&gt;&lt;/canvas&gt;
       &lt;!--&lt;/div&gt;--&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/div&gt;
  &lt;script src="vidCamAccess.js"&gt;&lt;/script&gt; 
  &lt;script src="eyedropper.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="FGSlider/js/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="FGSlider/js/jquery-ui-1.7.1.custom.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="FGSlider/js/selectToUISlider.jQuery.js"&gt;&lt;/script&gt;
  
       &lt;!--jQuery UI theme switcher --&gt;
      &lt;script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt; 
  
      $(function(){ $('&lt;div style="position: absolute; right: 20px; margin-top: -40px" /&gt;').appendTo('body').themeswitcher({onSelect: function(){ setTimeout(fixToolTipColor, 800); }}); });
      &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  var videoElement = document.getElementById("videoElement");
  var hiddenCanvas = document.getElementById("hiddenCanvas");
  var displayCanvas = document.getElementById("displayCanvas");
  var hiddenContext = hiddenCanvas.getContext ("2d");
  var displayContext = displayCanvas.getContext ("2d");
  
  videoElement.addEventListener('play', function(){runAnalysis();});
  
  var runAnalysis = function(){
       if(videoElement.paused || videoElement.ended){
        return
  }
      frameConversion();
      if(window.requestAnimationFrame){
      requestAnimationFrame(runAnalysis);
      }
      else{
      setTimeout(runAnalysis,0);
      }
       };
  
      var frameConversion = function(){
  
      hiddenContext.drawImage(videoElement,0,0,videoElement.videoWidth, videoElement.videoHeight);
  
      var frame = hiddenContext.getImageData(0,0,videoElement.videoWidth, videoElement.videoHeight);
  
      var length = frame.data.length;
      for (var i =0; i &lt;length; i++){
          var r = frame.data [i*4+ 0];
      var g = frame.data [i*4 + 1];
      var b = frame.data [i*4 + 2];
      var p = window.$vars.rgbvalue;
      //if(p &gt; 0)  {alert ("rgbvalue:" + p [0] + "," + p[1] + "," + p[2])};
  
     /* if(g &gt; 110 &amp;&amp; g &lt; 200 &amp;&amp; r &lt; 190 &amp;&amp; r &gt; 100 &amp;&amp; b &lt; 200 &amp;&amp; b &gt; 110){  
      frame.data[i*4+ 3] = 0; */
  
      if(g &gt; p[0]-15 &amp;&amp; g &lt; p[0]+15 
      &amp;&amp; r &gt; p[1]-15 &amp;&amp; r &lt; p[1]+15 
      &amp;&amp; b &gt; p[2]-15 &amp;&amp; b &lt; p[2]+15){
      frame.data[i*4+ 3] = 0;
      } 
          }
      displayContext.putImageData(frame, 0, 0);
      return
      };
  
      &lt;/script&gt; 
  
  &lt;!--end jeff's code--&gt;
  
  &lt;div class="wrap-slider"&gt;
  &lt;p&gt; Adjust the red, green and blue components separately to adjust the key.&lt;/p&gt;
  &lt;p&gt;RED&lt;/p&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function(){
              //demo 1
              var abc = $('select#speed').selectToUISlider().next();
  
              fixToolTipColor();
          });
          //purely for theme-switching demo... ignore this unless you're using a theme switcher
          //quick function for tooltip color match
          function fixToolTipColor(){
              //grab the bg color from the tooltip content - set top border of pointer to same
              $('.ui-tooltip-pointer-down-inner').each(function(){
                  var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
                  var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor')
                  $(this).css('border-top', bWidth+' solid '+bColor);
              }); 
          }
      &lt;/script&gt;
  
  
      &lt;form action="#"&gt;
          &lt;!-- demo 1 --&gt;
          &lt;fieldset&gt;
              &lt;label for="speed"&gt;Add How many colors to key?&lt;/label&gt;
              &lt;select name="speed" id="speed"&gt;
              &lt;option value="0" selected="selected" &gt;0&lt;/option&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3" &gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
                 &lt;option value="6"&gt;6&lt;/option&gt;
                  &lt;option value="7"&gt;7&lt;/option&gt;
                  &lt;option value="8"&gt;8&lt;/option&gt;
                  &lt;option value="9"&gt;9&lt;/option&gt;
                  &lt;option value="10"&gt;10&lt;/option&gt;
                  &lt;option value="11"&gt;11&lt;/option&gt;
                  &lt;option value="12"&gt;12&lt;/option&gt;
                  &lt;option value="13"&gt;13&lt;/option&gt;
                  &lt;option value="14"&gt;14&lt;/option&gt;
                  &lt;option value="15"&gt;15&lt;/option&gt;
              &lt;/select&gt;
          &lt;/fieldset&gt;
  
  
      &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;p class="instructions fluid"&gt;Find a solid colored wall and stand facing away from it about 2 ft. away. The lighting on the wall needs to be as even as possible. Blue or green works best, but it must be a different color than your clothes.    Select your FRONT FACING camera if you're doing this by yourself. Or find a friend to help.&lt;/p&gt;
  &lt;nav id="menuSystem" class="fluid"&gt;
    &lt;ul id="menus" class="fluid fluidList"&gt;
      &lt;li class="fluid menuItem zeroMargin_tablet zeroMargin_desktop"&gt;Select Key Color&lt;/li&gt;
      &lt;li class="fluid menuItem" id="adjustKey"&gt;Adjust Key&lt;/li&gt;
      &lt;li class="fluid menuItem"&gt;Toggle View&lt;/li&gt;
      &lt;li class="fluid menuItem"&gt;Home&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
  
  $(function () {
      $(document).click(function () {
          $('.wrap-slider').hide();
      });
      $('#adjustKey').click(function (event) {
          event.stopPropagation();
          $('.wrap-slider').toggle();
      });
      $('.wrap-slider').click(function (event) {
          event.stopPropagation();
      });
  });
  
  $(document).ready(function() {
     $('.wrap-slider').hide();
  });
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>