Script back-end doesn't work front-end

Nathalie

Hey Armin, I am working on a new website with your theme. I have a problem which is very weird, but maybe you could help ( my working on mamp, but manage to put the website online very soon is you have no idea of the problem). I am trying to integrated a script, this script is working ONLY BACK_END and not FRONT_END -_- !

Here are the step :

1 ) Add script in ** functions.php** on the theme

wp_enqueue_script( 'tween-vendor-jquery', get_template_directory_uri() .     '/custom/tween/js/vendor/jquery-1.9.1.min.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'tween-vendor-tween', get_template_directory_uri() . '/custom/tween/js/vendor/TweenMax.min.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'example', get_template_directory_uri() . '/custom/tween/js/example.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( ‘SplitTextPlugin', get_template_directory_uri() . '/custom/tween/js/SplitTextPlugin.js', array ( 'jquery' ), 1.1, true);

2 ) Added var $ =jQuery.noConflict(); to make the $ work without conflict, here is my main script that should make the works scramble and move when the mouse move though body.

var $ =jQuery.noConflict();

$(document).ready(function(){

var scramble = $("#scramble").splitText({
'type':'words',
'animation':'scramble'
});
$("body").on('mouseover',function(){
scramble.animate();  });
});

I add the html code into « code source» of a text block

<div><p id="scramble" class="splitText">THIS IS A BORING TEXT SCRAMBLE IT!</p></div>

IT WORKS in the preview but when i update and check front-end NOTHING MOVE.

**I have try to add the html code directly in header.php and it work front-end, i have try to add it as a « html code » ( click on « more » and « html ») but do not work. **

arminunruh

Hey Nathalie! :)

Ok so you shouldn't edit the functions.php file because next time you update lay theme that file will be overwritten and your changes will be lost.

Ok so you enqueue jquery. You don't need to cause with lay theme jquery already gets loaded. Also I think you don't need to enqueue the example.js if you write your js into "Lay Options" -> "Custom CSS & HTML" -> "Custom <head> content" .

Please upload your "SplitTextPlugin.js" file to your media library. Then click on that file in the media library and copy the URL.
Screen Shot 2016-10-28 at 09.41.15.png

In "Lay Options" -> "Custom CSS & HTML" -> "Custom <head> content"
enter:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="path_to_splittext_plugin.js"></script>

Now in "Lay Options" -> "Custom CSS & HTML" -> "Custom <head> content" add:

Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){

	var scramble = jQuery("#scramble").splitText({
		'type':'words',
		'animation':'scramble'
	});
	jQuery("#scramble").on('mouseenter', function(){
		scramble.animate();
	});
	
});

I am using the javascript event that fires everytime a page is loaded - documented here http://laytheme.com/documentation.html#newpage-events

I hope that works! I cannot try it out cause I don't have the splittext.js file :D

Nathalie

@arminunruh This work fantastically great ! Thanks for your help ! I have edit the script to have the text scramble each time the mouse is moving though body :+1:

Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){

var scramble = jQuery("#scramble").splitText({
    'type':'words',
    'animation':'scramble'
});
jQuery("body").on('mouseover', function(){
    scramble.animate();
});

});