Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Script back-end doesn't work front-end

    General Discussion
    2
    3
    838
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • N
      Nathalie last edited by 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();  });
      });
      
      1. 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. **

      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by 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

        N 1 Reply Last reply Reply Quote 0
        • N
          Nathalie @arminunruh last edited by 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();
          });
          
          });
          
          1 Reply Last reply Reply Quote 1
          • First post
            Last post
          Post a link to where the problem is if possible, please <3
          I don't answer or check forum DMs, please just post on the forum.
          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

          Before you post:

          Use the Search Feature. Maybe there is already a solution to your issue.

          1. Update Lay Theme and all Lay Theme Addons
          2. Disable all Plugins
          3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
          4. When using a WordPress Cache plugin, disable it or clear your cache. Now see if your problem solved itself.
          Go here, see if your problem is listed here:
          Troubleshooting

          When you post:
          1. Post a link to where the problem is
          2. If the problem is difficult to explain, post screenshots / link to a video to explain it

          Thanks!

          Online Users

          J

          Recent Topics

          • A

            website error

          • Website gone all blank after update 6.3.1

          • S

            can't update project category content

          • C

            lightbox: how to go back to project instead of home with back button

          laytheme.com