Community Forums › Forums › Archived Forums › Design Tips and Tricks › jQuery Code Gives Blank Screen
Tagged: executive pro, load jquery, ripple effect, water ripple
- This topic has 9 replies, 3 voices, and was last updated 7 years, 2 months ago by dareadel.
-
AuthorPosts
-
February 6, 2017 at 10:11 pm #200677dareadelParticipant
Hello, I need help with my codes below that I am trying to use on the .image-header in the executive-pro child theme. The top code does not produce error but I get a blank white screen after I added (and save) the bottom code to function.php file. Will appreciate if anyone can identify the problem in the code.
Thanks in advance.
function genesis_water_ripples() { wp_enqueue_script( 'ripple', get_template_directory_uri().'/js/ripple.js', array('jQuery') ); } add_action('wp_enqueue_scripts', 'genesis_water_ripples');
//* Water Ripples Function $(document).ready(function() { $('.header-image').waterripple(); });
February 7, 2017 at 1:22 am #200679Brad DaltonParticipantYou will need to add the jQuery to a file named ripple.js in your child themes js folder.
You will also need to modify the PHP code which loads the jQuery via your functions file to use get_stylesheet_directory_uri
Example
wp_enqueue_script( 'ripple-effect', get_stylesheet_directory_uri() . '/js/ripple.js', array( 'jquery' ), '1.0.0' );
You can then load the page in Chrome and inspect element for jQuery debugging if needed.
February 7, 2017 at 11:07 am #200715dareadelParticipantThanks Brad. I did add the JQuery dependency in my code but sorry I pasted the one without it. I also have the code in my child theme js/ folder. The add_action doesn't give me errors, it's the code below that causes the error on save. Not sure where my syntax is wrong.
February 7, 2017 at 11:18 am #200716Brad DaltonParticipantDid you add the code to the wp_enqueue_scripts hook like this:
function genesis_water_ripples() { wp_enqueue_script( 'ripple', get_stylesheet_directory_uri().'/js/ripple.js', array('jQuery') ); } add_action('wp_enqueue_scripts', 'genesis_water_ripples');
And i doubt the following jQuery is complete.
//* Water Ripples Function $(document).ready(function() { $('.header-image').waterripple(); });
Please link to the source of your jQuery.
What does Chrome debug show you when you inspect the element?
February 7, 2017 at 4:32 pm #200728dareadelParticipantYes, the top code is what I have. As for the bottom code I changed to
//* Water Ripples Function JQuery(document).ready(function($) { $('.header-image').waterripple(); });
And here is the code on GitHub
February 8, 2017 at 3:52 am #200762Victor FontModeratorIf you are using the standard header image, the selector for the init should be '.site-title a' not '.header-image'. In CSS, '.site-title a' contains the background image. header-image is a body class, not an image class.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?February 9, 2017 at 2:50 am #200822Brad DaltonParticipantThere's 3 issues here.
1. You need to check that both files are loaded correctly. Check any StudioPress theme which includes backstretch to see how to load both files correctly for backstretch.js and backstretch-set.js. This provides a example of how to load both your ripple files.
2. You also need to check the jQuery code for your settings ( options ) is coded correctly. See the 3rd example here.
The following code won't work in a file
<script type="text/javascript"> $(document).ready(function() { $("#ripple").waterripple(); }); </script>
It needs to be modified for use in a file, see the 3rd example i linked to above. ( Recommended ) See the backstretch-set.js for an example.
Or
Hard coded directly in a template file as is wrapped in script tags.
3. And you also need to make sure the id or selector class for your image matches whats in your jQuery settings. Example #ripple needs to match the class for your image.
February 11, 2017 at 9:02 pm #200974dareadelParticipantThank you Brad and sorry for not providing a feedback sooner. I have been off for a few days and just going through your recommendations. I will study them and give a feedback soon.
February 12, 2017 at 12:20 pm #201007Brad DaltonParticipantFebruary 21, 2017 at 7:54 am #201701dareadelParticipantThanks Brad but this does't help me because I have no access to your site.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.