Wordpress & jQuery Browser Error

CMS & WordPress
1

Hi,

I am having some problems trying to add a rotating div showing testimonials on a static Wordpress home page. Firebug returns the error $ is not a function.

Totally out of ideas and could do with some help.

Here briefly is the markup:


<section class="testimonials">
  <ul id="testimonials">
    <li class="slide">
         <blockquote>Some Info etc.</blockquote>
   </li>
   <li class="slide" style="display:none">
         <blockquote>Some Info etc.</blockquote>
   </li>
    <li class="slide" style="display:none">
         <blockquote>Some Info etc.</blockquote>
   </li>
  <ul>
</section>

And the script…

$(document).ready(function(){
	$('#testimonials .slide');
	setInterval(function(){
		$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
			if($(this).next('li.slide').size()){
				$(this).next().fadeIn(1000);
			}
			else{
				$('#testimonials .slide').eq(0).fadeIn(1000);
			}
		});
	},10000);	
});

Wordpress automatically loads the jquery library and the other script is being called too but I get an error for some reason. I’m no good at debugging, really stuck.

Your help is most appreciated.

Thanks in advance

2

‘$’ is an alias to the jQuery object. Its just shorthand so you don’t have to type out “jQuery” every time you call it. It has no special functionality on its own.

Its just like saying:

var $ = jQuery;

The problem is lots of JavaScript libraries use that same convention. So WordPress takes away the $ assignment to prevent collisions.

Firebug is telling you that ‘$’ has not been defined - ie its not pointing to the jQuery object.

So to solve your problem replace all your instances of ‘$’ with ‘jQuery’

Or if you really want to keep the $: Wrap your jQuery in anonymous function:

(function ($) {
  // your jQuery code here can use $
})(jQuery);

Using the above provides a closure to the jQuery object through $ and will let you use the ‘$’ notation.

3

That was a very concise and insightful answer and I learned something new. Best of all it worked.

Can’t thank you enough, probably would never have figured that out.

Thanks very much!!