Menu icon Foundation
Uncaught TypeError: Object [object Object] has no method 'foundation'

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>

<script>
$(document).foundation({
  });
</script>

<!-- index.php !-->

<ul class="slideshow-wrapper" data-orbit
data-options="animation:fade;
              animation_speed:1500;
              pause_on_hover:true;
              navigation_arrows:true;

              bullets:true;"> 
  <li>
    <a href="http://google.com">
      <img src="http://placehold.it/2350x450" />
    </a>
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <a href="http://google.com">
      <img src="http://placehold.it/2350x450" />
    </a>
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <a href="http://google.com">
      <img src="http://placehold.it/2350x450" />
    </a>
    <div class="orbit-caption">...</div>
  </li>
</ul>

 <a href="#" class="orbit-prev">Prev <span></span></a>
  <a href="#" class="orbit-next">Next <span></span></a>

  <!-- Slide Numbers -->
  <div class="orbit-slide-number">
    <span>1</span> of <span>3</span>
  </div>

  <!-- Timer and Play/Pause Button -->
  <div class="orbit-timer">
    <span></span>
    <div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
  </div>
</div>

wp_register_script( 'foundation.min', get_template_directory_uri() .'/js/foundation.min.js');
        				wp_enqueue_script( 'foundation.min');
						
						wp_register_script('modernizr', get_template_directory_uri() .'/js/vendor/modernizr.js');
						wp_enqueue_script('modernizr');

						wp_register_script('orbit', get_template_directory_uri() .'/js/foundation/foundation.orbit.js');
						wp_enqueue_script( 'orbit');
						
						wp_register_script( 'clearing', get_template_directory_uri() .'/js/foundation/foundation.clearing.js',  array('jquery'));
						wp_enqueue_script( 'clearing');
					    				}
	add_action('wp_enqueue_scripts','load_my_scripts'); 
    
    The js console show me : Uncaught TypeError: Object [object Object] has no method 'foundation'. But i don't know where is ths mistake.

         

Orbitjs

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>

<script>
$(document).foundation({
  });
</script>

<!-- index.php !-->

<ul class="slideshow-wrapper" data-orbit
data-options="animation:fade;
              animation_speed:1500;
              pause_on_hover:true;
              navigation_arrows:true;

              bullets:true;"> 
  <li>
    <a href="http://google.com">
      <img src="http://placehold.it/2350x450" />
    </a>
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <a href="http://google.com">
      <img src="http://placehold.it/2350x450" />
    </a>
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <a href="http://google.com">
      <img src="http://placehold.it/2350x450" />
    </a>
    <div class="orbit-caption">...</div>
  </li>
</ul>

 <a href="#" class="orbit-prev">Prev <span></span></a>
  <a href="#" class="orbit-next">Next <span></span></a>

  <!-- Slide Numbers -->
  <div class="orbit-slide-number">
    <span>1</span> of <span>3</span>
  </div>

  <!-- Timer and Play/Pause Button -->
  <div class="orbit-timer">
    <span></span>
    <div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
  </div>
</div>

wp_register_script( 'foundation.min', get_template_directory_uri() .'/js/foundation.min.js');
        				wp_enqueue_script( 'foundation.min');
						
						wp_register_script('modernizr', get_template_directory_uri() .'/js/vendor/modernizr.js');
						wp_enqueue_script('modernizr');

						wp_register_script('orbit', get_template_directory_uri() .'/js/foundation/foundation.orbit.js');
						wp_enqueue_script( 'orbit');
						
						wp_register_script( 'clearing', get_template_directory_uri() .'/js/foundation/foundation.clearing.js',  array('jquery'));
						wp_enqueue_script( 'clearing');
					    				}
	add_action('wp_enqueue_scripts','load_my_scripts'); 
    
    The js console show me : Uncaught TypeError: Object [object Object] has no method 'foundation'. But i don't know where is ths mistake.

         
Rob over 5 years ago

Hi Mike, could you please describe the issue you are having so we help you further?

Steve King over 5 years ago

Hi Mike,

A couple of points here. Firstly are you just pasting in the code there and not worrying about markup (for the PHP)? If so ok :D but with Wordpress I find it a whole lot easier to call my JS in through the header instead of loading scripts as a function?

IE - /path/to/file.js">

Just a personnal preference really.

Secondly I have noticed that on a site I am currently building I got a similar error dude to using a new version of jQuery (1.9.x) where a Zurb script was using the live. methid instead of the on. method. Switching over in the JS script fixied this perfectly for me, perhaps you are having the same issue (using the 2.0 jQuery)?

If you have issues reading the JS file I use a great tool, just google search JavaScript unminifier.

Hope this helps?

Mike Mikelle over 5 years ago

Guys thanks for the help. I think that i find the solution. The Foundation installs Jquery.js by default which was conflicting with Foundation. I remove the Jquery.min.js and the problem solved.

Steve King over 5 years ago

Ah conflicting jQuery, I hate it when that happens! Well done though!