Making separate for file for js & enqueuing them in functions would always be better approach. Try it.
Thanks!
I don’t think enqueuing is the problem.
I have done that before and still got the errors. I understand that is a better practice but I am still getting the js called so that shouldn’t be the problem.
The above issue may arise because dependencies is not use while enqueue scripts. Try adding ‘jquery’ inside ‘array(‘jquery’)’ in the place of enqueue scripts.
Thanks
I tried that and this is what I got:
<?php
function my_scripts_method() {
wp_enqueue_script( 'sticky-menu', get_stylesheet_directory_uri() . '/js/jquery.sticky.js', array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
<?php
function my_scripts_method() {
wp_enqueue_script( 'scrolling-menu', get_stylesheet_directory_uri() . '/js/scrolling-nav.js', array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
<?php
function my_scripts_method() {
wp_enqueue_script( 'easinging-menu', get_stylesheet_directory_uri() . '/js/jquery.easing.min.js', array( 'jquery' ), true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
<!-- Script for sticky.js -->
<script>
jQuery(document).ready(function(){
jQuery("#main-menu-container").sticky({topSpacing:20});
});
</script>
<!-- Script for scrollNav.js -->
<script>
jQuery(document).ready(function(){
jQuery('.main-nav li a').addClass('page-scroll');
});
</script>
I know it is not correct but I need to know what to do for this specific thing. I have three plugins. I think two for sure use jQuery.
You have three functions with same name.
How about putting them in one function:
function my_scripts_method() {
wp_enqueue_script( 'sticky-menu', get_stylesheet_directory_uri() . '/js/jquery.sticky.js', array( 'jquery' ), true );
wp_enqueue_script( 'scrolling-menu', get_stylesheet_directory_uri() . '/js/scrolling-nav.js', array( 'jquery' ), true );
wp_enqueue_script( 'easinging-menu', get_stylesheet_directory_uri() . '/js/jquery.easing.min.js', array( 'jquery' ), true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Note that above function should be in functions.php of child theme.
Thanks ikaring.
That makes more sense. I am still getting those errors.
Uncaught TypeError: $ is not a function
Uncaught TypeError: jQuery(…).sticky is not a function
I have in my function.php file:
<?php
function my_scripts_method() {
wp_enqueue_script( 'sticky-menu', get_stylesheet_directory_uri() . '/js/jquery.sticky.js', array( 'jquery' ), true );
wp_enqueue_script( 'scrolling-menu', get_stylesheet_directory_uri() . '/js/scrolling-nav.js', array( 'jquery' ), true );
wp_enqueue_script( 'easinging-menu', get_stylesheet_directory_uri() . '/js/jquery.easing.min.js', array( 'jquery' ), true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
then in my footer.php:
<!-- Script for sticky.js -->
<script>
jQuery(document).ready(function(){
jQuery("#main-menu-container").sticky({topSpacing:0});
});
</script>
<!-- Script for scrollNav.js -->
<script>
jQuery(document).ready(function(){
jQuery('.main-nav li a').addClass('page-scroll');
});
</script>
</body>
</html>
Everything is up to date and my server should be fine. Has no one else ever tired to do this before? Could the theme be the problem? These are just things I am wondering.
Hi JakeCr8Guru.
It seems <?php wp_footer(); ?>` is not set before your footer scripts.
wp_footer() handles enqueued scripts for footer area, and it is usually set right before closing body tag.
However, you need those plugin js before your inline footer scripts, so put <?php wp_footer(); ?> before script tags.
In my footer.php file it does have the <?php wp_footer(); ?> i just didn’t copy that.
Unless you mean I need some thing in my functions.php. I tired that and I am pretty sure that is not right.
Do I need the code for the script to be in my functions also or is the footer the right place?
It is OK to place script in footer.php.
But it seems <!-- Scrolling Scripts for Fixed Nav --> is located after your footer script tags. That is the problem. It must be loaded beforehand.
<!-- Scrolling Scripts for Fixed Nav -->
<script type="text/javascript" src="http://www.jakecreative.guru/wp-content/cache/minify/000000/nc5LDoAgDEXRDVlhS4gvWOSjLZi4ezVxBUzv4ORaI9CjFuULlOvCCRTdDvIC174YunTyG6eV2oYME9XEs0PuGU65hDlzmeyQo15qSq9BxV2Dxv-ijf1-Pw.js"></script>
It would be better to turn off W3 Total Cache plugin for checking bugs.
Awesome! perfect.
Seems to be working good. Thanks for all your help.
You are welcome.
There is an error remains on scrolling-nav.js.
Just wrap whole code inside the following:
(function($){
//paste original code here
})(jQuery);
This should fix it.
I see what you mean.
I added that to my code but it does not fix the issue.
<!-- Script for scrollNav.js -->
<script>
(function($){
jQuery(document).ready(function($){
$('.main-nav .menu li a').addClass('page-scroll');
});
})(jQuery);
</script>
And I have the menu items jumping to where they need to but the easing script is not working.
I have tried switching $ and jquery back and forth but no success.
I also added that to the scrolling-nav.js
(function($) {
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
})(jQuery);
still have error.
It is ok to leave inline script as below:
<!-- Script for scrollNav.js -->
<script>
jQuery(document).ready(function(){
jQuery('.main-nav li a').addClass('page-scroll');
});
</script>
scrolling-nav.js needs the above wrapping code.
Or you can just replace $ with jQuery in scrolling-nav.js, too.
I cant get the error to go away. Any other suggestions?
