title: ReferenceError: Can't find variable: jQuery within combined presentation plugin
body: <p>I'm trying to get a presentation working with the <a href="http://lab.hakim.se/reveal-js/#/3" rel="nofollow">reveal.js</a> conjoined with features of this <a href="http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php" rel="nofollow">flipin plugin</a> , but I lose the flip effect which is the desired feature and get </p>
  
  <p>ReferenceError: Can't find variable: jQuery </p>
  
  <p>with ref to line 1 or simply the error message if I change something -I've tried all the popular and not so popular variances on the variable. This would be common except the code works perfectly fine on in it's own ,so I'm puzzled.</p>
  
  <p>The problem code:</p>
  
  <pre><code>$(document).ready(function(){
      /* The following code is executed once the DOM is loaded */ 
      $('.sponsorFlip').bind("click",function(){      
          // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):        
          var elem = $(this);     
          // data('flipped') is a flag we set when we flip the element:       
          if(elem.data('flipped'))
          {
              // If the element has already been flipped, use the revertFlip method
              // defined by the plug-in to revert to the default state automatically:             
              elem.revertFlip();          
              // Unsetting the flag:
              elem.data('flipped',false)
          }
          else
          {
              // Using the flip method defined by the plugin:             
              elem.flip({
                  direction:'lr',
                  speed: 350,
                  onBefore: function(){
                      // Insert the contents of the .sponsorData div (hidden from view with display:none)
                      // into the clicked .sponsorFlip div before the flipping animation starts:                      
                      elem.html(elem.siblings('.sponsorData').html());
                  }
              });         
              // Setting the flag:
              elem.data('flipped',true);
          }
      }); 
  });
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>I'm thinking maybe I missed something in the html:</p>
  
  <p><br>
  </p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;title&gt;HUE2&lt;/title&gt;
  
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /&gt;
  
      &lt;link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'&gt;
  
      &lt;link rel="stylesheet" href="css/reset.css"&gt;
      &lt;link rel="stylesheet" href="css/main.css"&gt;
      &lt;link rel="stylesheet" href="css/print.css" type="text/css" media="print"&gt;
      &lt;link rel="stylesheet" href="lib/zenburn.css"&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="reveal"&gt;
  
          &lt;!-- Used to fade in a background when a specific slide state is reached --&gt;
          &lt;div class="state-background"&gt;&lt;/div&gt;
  
          &lt;!-- Any section element inside of this container is displayed as a slide --&gt;
          &lt;div class="slides"&gt;
              &lt;section&gt;
  
  
      &lt;div id="main"&gt;
                  &lt;div class="sponsorListHolder"&gt;
  
  
              &lt;div class="sponsor" title="Click to flip"&gt;
                  &lt;div class="sponsorFlip"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="sponsorData"&gt;
                      &lt;div class="sponsorDescription"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="sponsorURL"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
  
  
  
  
              &lt;div class="sponsor" title="Click to flip"&gt;
                  &lt;div class="sponsorFlip"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="sponsorData"&gt;
                      &lt;div class="sponsorDescription"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="sponsorURL"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
  
              &lt;div class="sponsor" title="Click to flip"&gt;
                  &lt;div class="sponsorFlip"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="sponsorData"&gt;
                      &lt;div class="sponsorDescription"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="sponsorURL"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="sponsor" title="Click to flip"&gt;
                  &lt;div class="sponsorFlip"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="sponsorData"&gt;
                      &lt;div class="sponsorDescription"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="sponsorURL"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="sponsor" title="Click to flip"&gt;
                  &lt;div class="sponsorFlip"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="sponsorData"&gt;
                      &lt;div class="sponsorDescription"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="sponsorURL"&gt;
  
              &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
  
  
  
  
  
  
  
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>        &lt;!-- The navigational controls UI --&gt;
          &lt;aside class="controls"&gt;
              &lt;a class="left" href="#"&gt;&amp;#x25C4;&lt;/a&gt;
              &lt;a class="right" href="#"&gt;&amp;#x25BA;&lt;/a&gt;
              &lt;a class="up" href="#"&gt;&amp;#x25B2;&lt;/a&gt;
              &lt;a class="down" href="#"&gt;&amp;#x25BC;&lt;/a&gt;
  
          &lt;/aside&gt;
  
          &lt;!-- Displays presentation progress, max value changes via JS to reflect # of slides --&gt;
          &lt;div class="progress"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Optional libraries for code syntax highlighting and classList support in IE9 --&gt;
      &lt;script src="lib/highlight.js"&gt;&lt;/script&gt;
      &lt;script src="lib/classList.js"&gt;&lt;/script&gt;    
      &lt;script src="js/reveal.js"&gt;&lt;/script&gt;
              &lt;script src="js/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.flip.min.js"&gt;&lt;/script&gt;
              &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
              &lt;script src="js/script.js"&gt;&lt;/script&gt;
  
  
  
  
  
      &lt;script&gt;
  
  
          // Parse the query string into a key/value object
          var query = {};
          location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
              query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
          } );
  
          // Fires when a slide with data-state=customevent is activated
          Reveal.addEventListener( 'customevent', function() {
              alert( '"customevent" has fired' );
          } );
  
          // Fires each time a new slide is activated
          Reveal.addEventListener( 'slidechanged', function( event ) {
              // event.indexh &amp; event.indexv
          } );
  
          Reveal.initialize({
              // Display controls in the bottom right corner
              controls: true,
  
  
              // Display a presentation progress bar
              progress: true,
  
              // If true; each slide will be pushed to the browser history
              history: true,
  
              // Loops the presentation, defaults to false
              loop: false,
  
              // Flags if mouse wheel navigation should be enabled
              mouseWheel: true,
  
              // Apply a 3D roll to links on hover
              rollingLinks: true,
  
              // UI style
              theme: query.theme || 'neon', // default/neon
  
              // Transition style
              transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
          });
  
          hljs.initHighlightingOnLoad();
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Does anyone see something I don't?</p>