JQuery - Tumult Hype Animations plugin for Wordpress Tip

Tips & Tricks
,
1

This is not about how to use jQuery nor how to use the Tumult Hype Animations plugin but how to get JQuery to work with Wordpress if you have included it in your project.

Also this is not the be all and end all of how to solve conflicts with Wordpress jQuery.
Wordpress have their own API to help deal with this globally and if you want to go down that route then refer to their documentation .

When we us jQuery in our projects we either add the library to our project or link to it in the head.

Wordpress uses it’s own version of jQuery.
Your included jQuery library links will be ignored.

This means everything works when you preview from Hype or export as a folder but when exporting your .OAM file to use with the Hype Animations Plugin for Wordpress you are likely to get fatal errors.

We normally call jQuery commands with a dollar symbol $

But because your links are ignored your project will not find any JQuery library.

To fix this we explicitly use jQuery instead of $. This forces all jQuery through the Wordpress jQuery library.

for example :

$("html, body").animate({scrollTop: parseInt(myTarget.offsetTop, 10)

becomes

jQuery("html, body").animate({scrollTop: parseInt(myTarget.offsetTop, 10)

Also from what I can tell it is best to use the iFrame option in Tumult Hype Animations plugin
which embeds your project within an iFrame

But I already wrote all my code…arrrghh

You may only have found this thread after you ran into the problem and have a lot of lines of code that uses the dollar symbol $ .

To save on re coding/ find and replacing.

You can add this script to you head file.

 <script type="text/javascript">
		(function( $ ) {
'use strict';

$(document).ready(function(){
   
});

})( jQuery );
	</script>

This intercepts the calls with the dollar symbol $ and forces the use of the jQuery tag.

–

Lastly Wordpress may not include some of the JQuery UI libraries so best to check this also if you still have issues.

3 Likes