jQuery div rotator working on Fiddle but not WordPress website. Tried 3 things

Question

I'm using a jQuery div rotator like this one: http://jsfiddle.net/kDSqB which is working very nicely in the Fiddle. When I move the same code over to my WordPress website, it doesn't work.

I tried adding jQuery no conflict, adding a DOM document ready, and changing the $(document.body) to the name of the parent div. None of these worked.

I also tried moving all of the pertaining jQuery inline to the part of the page where the code would appear, but still the div does not rotate. What should I do?

Below is all the code for this on my WordPress website:

<script src="https://code.jquery.com/jquery-1.10.1.js">

<script type="text/javascript">
jQuery.noConflict();

$(document).ready(function(){

var $cog = $('#cog'),
$body = $(document.body),
bodyHeight = $body.height();

$(window).scroll(function () {
$cog.css({
    'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)'
});
});
});
});
</script>
<div class="cogclass"><div id="cog"></div></div>

Uncaught Error: Syntax error, unrecognized expression: [href=] and Uncaught TypeError: jQuery(...).fitVids is not a function, however that is one less than the number of errors that were on the page before I added the above code in. I don't know why that would happen. — Clare12345, Aug 09 '15 at 02:53
Why are you defining your body like `$body = $(document.body)`? A simple `$body = $('body')` should do. If you are using jQuery, be consistent. — dingo_d, Aug 09 '15 at 11:35
Okay, I've changed the $body. That didn't make the code work. I've also checked the jQuery noConflict in the Fiddle, and that part is not working in the fiddle. I've created a new one to show what I mean. Is there a problem with the way I'm doing it? http://jsfiddle.net/pcud2vyz/ — Clare12345, Aug 09 '15 at 12:05
I checked the errors in the browser console comparing the errors I had in there before I added the code and after. This is the error that was there after I added the code: Uncaught TypeError: $ is not a function (anonymous function). — Clare12345, Aug 09 '15 at 13:13

score 0 · Accepted Answer · edited May 23 '17 at 11:43

I looked up the console error and found this post: TypeError: $ is not a function when calling jQuery function. It turns out it may be a WordPress thing, and I have to put the code inside jQuery(document).ready(function($){ code here ;

So this code ended up working out:

<script>
jQuery(document).ready(function($){
var $cog = $('#cog'),
$body = $('body'),
bodyHeight = $body.height();

$(window).scroll(function () {
$cog.css({
    'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)'
});
});
});
</script>

Thanks to everyone who helped to find the answer!

jQuery div rotator working on Fiddle but not WordPress website. Tried 3 things

1 Answers1