title: Bootstrap - "Uncaught TypeError: undefined is not a function"
body: <p>A problem that many people have had, but I can't figure it out.</p>
  
  <p>I get the following error in Chrome Developer Tools:</p>
  
  <blockquote>
    <p>Uncaught TypeError: undefined is not a function <strong>-----</strong>
    bootstrapwizard.js:3 </p>
    
    <p>(anonymous function) <strong>-----</strong> jquery-1.11.2.min.js:2 </p>
    
    <p>m.Callbacks.j <strong>-----</strong> jquery-1.11.2.min.js:2 </p>
    
    <p>m.Callbacks.k.fireWith <strong>-----</strong> jquery-1.11.2.min.js:2 </p>
    
    <p>m.extend.ready <strong>-----</strong> jquery-1.11.2.min.js:2 J</p>
  </blockquote>
  
  <p><strong>I have tried the following:</strong></p>
  
  <p>1) Moving the script into a own js-file</p>
  
  <p>2) Replacing where I include "jQuery", "Bootstrap" and "script"</p>
  
  <p>3) Searching for online solutions</p>
  
  <p>Could you please help me to solve this problem? </p>
  
  <p><em>Thanks</em></p>
  
  <p><a href="http://tinyurl.com/p9sb9em" rel="nofollow">The page can be found here. Its on Norwegian, but the bar is on English.</a></p>
  
  <p><strong>Header</strong></p>
  
  <pre><code> &lt;!-- jQuery ---&gt;
          &lt;script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/js/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
          &lt;?php wp_enqueue_script("jquery"); ?&gt;
  
          &lt;!-- Boostrap --&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- jQuery scrips --&gt;
          &lt;script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/js/hideheader.js"&gt;&lt;/script&gt;
          &lt;script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/js/bootstrapwizard.js"&gt;&lt;/script&gt;
  
          &lt;?php wp_head(); ?&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function() {
          $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
              var $total = navigation.find('li').length;
              var $current = index+1;
              var $percent = ($current/$total) * 100;
              $('#rootwizard').find('.bar').css({width:$percent+'%'});
          }});
      });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;div class="container"&gt;
      &lt;div id="rootwizard"&gt;
          &lt;div class="navbar"&gt;
            &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#tab1" data-toggle="tab"&gt;First&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Second&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab3" data-toggle="tab"&gt;Third&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab4" data-toggle="tab"&gt;Forth&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab5" data-toggle="tab"&gt;Fifth&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab6" data-toggle="tab"&gt;Sixth&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab7" data-toggle="tab"&gt;Seventh&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
           &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;div id="bar" class="progress progress-striped active"&gt;
        &lt;div class="bar"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane" id="tab1"&gt;
            1
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab2"&gt;
            2
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab3"&gt;
              3
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab4"&gt;
              4
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab5"&gt;
              5
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab6"&gt;
              6
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab7"&gt;
              7
          &lt;/div&gt;
          &lt;ul class="pager wizard"&gt;
              &lt;li class="previous first" style="display:none;"&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/li&gt;
              &lt;li class="previous"&gt;&lt;a href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
              &lt;li class="next last" style="display:none;"&gt;&lt;a href="#"&gt;Last&lt;/a&gt;&lt;/li&gt;
              &lt;li class="next"&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>