- This topic is empty.
-
AuthorPosts
-
December 18, 2013 at 3:56 pm #158655Aleksa MarkovicParticipant
Hello everyone and thanks for any help you can offer me.
I want to achieve this
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
jQuery(function( $ ){ $(window).scroll(function() { var yPos = ( $(window).scrollTop() ); if(yPos > 130) { // show sticky menu after screen has scrolled down 200px from the top $(“.nav-secondary”).fadeIn(); } else { $(“.nav-secondary”).fadeOut(); } }); });
but I have a very little knowledge of PHP
I have successfully loaded jquery at the bottom of the page by modifying example from Chris (https://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/ “”) simpy by adding true for $in_footer and using cloudflare libs.
I want to inline this script because it’s so small and unnecessary to use wp_register_script .
I’ve tried this way in my functions.php
function stickymenu() { if( wp_script_is( 'jquery', 'done' ) ) { echo '<script>' ; echo 'jQuery(function( $ ){ $(window).scroll(function() { var yPos = ( $(window).scrollTop() ); if(yPos > 200) { // show sticky menu after screen has scrolled down 200px from the top $(".nav-secondary").fadeIn(); } else { $(".nav-secondary").fadeOut(); } }); });' ; echo '</script>'; ;} } add_action ( 'wp_footer' , 'stickymenu')
but I’ve crashed my site :D so I’m looking for your help.
Thanks for your time in reading this and sorry if my language was a bit hard to understand it’s not my first language :)
*edit * (http://xsmedia.rs “Reference URL”)
December 19, 2013 at 2:25 pm #158796AlenParticipantCao Aleksa,
In your theme folder create:
js
folder andsmall-script.js
and put your code inside. And place following code inside your functions.php file.function my_cool_small_script() { // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); // Outputs small-script from theme folder: /js/small-script.js wp_enqueue_script( 'small-script', get_template_directory_uri() . '/js/small-script.js', array( 'jquery' ), '1', true ); } add_action( 'wp_enqueue_scripts', 'my_cool_small_script' );
Hope that helps.
If you need the script to show up on specific pages make sure to look up appropriate WP conditional tags.
December 19, 2013 at 3:57 pm #158805Aleksa MarkovicParticipantCao Alen and thanks a lot for your reply.
That’s exactly what I did as a work around until I find a proper solution on how to inline it. The reason why I wanted to avoid enque_script for such a small script is that Google recommends to inline small javascript for better performance.
This reduces the number of requests made by a web page by inserting the contents of small external CSS, JavaScript and image files directly into the HTML document. This can reduce the time it takes to display content to the user, especially in older browsers.
Regards.
December 19, 2013 at 4:39 pm #158809AlenParticipantduplicate…
December 19, 2013 at 4:40 pm #158810AlenParticipantJust place the code in the footer.php. Like so:
<?php // conditional (if necessary) if ( is_home() ) : ?> <!-- ESCAPE PHP --> <script> /* place your code here */ console.log('footer'); </script> <?php endif; ?> <!-- END IF STATEMENT -->
-
AuthorPosts
- The forum ‘Back End’ is closed to new topics and replies.