Adding JS to child theme

  • JakeCr8Guru

    (@jakecr8guru)


    9 years ago

    Hey everyone.

    I have been searching the internet trying to find a solution but have not yet.

    I will try to provide as much information with out being confusing.

    Here is my website I am trying to make changes to:JakeCreative.Guru

    I am using this theme: Responsive Mobile

    What I am trying to achieve is to have the main navigation to be sticky and ease to certain section of the page. I am try to use some jQuery plugins or code (files are in my child theme directory).

    I am having the JS files called but I am getting errors.
    Uncaught TypeError: $ is not a function
    Uncaught TypeError: jQuery(…).sticky is not a function

    I think it has to do with having jQuery called more than once. If so I have not found how to solve that issue. If you know how that would be great information.

    Here is the code I am using. It is placed in my child theme’s footer.php file:

    ...
<!-- 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>

<!-- Scrolling Scripts for Fixed Nav -->
	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.easing.min.js"></script>
	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/scrolling-nav.js"></script>
	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.sticky.js"></script>

</body>
</html>

    Thanks for the help!

Viewing 6 replies - 16 through 21 (of 21 total)
  • ikaring

    (@ikaring)

    Could you replace scrolling-nav.js on your server, for me to check.
    It remains the same as before.

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    This seems weird to me. My website is still doing what it kind of should be, but my server is not saving the files I edited. My functions.php is blank. I keep trying to change scrolling-nav.js but no luck.

    I think if I can get that to save with the added code you suggested:

    (function($){
//paste original code here
})(jQuery);

    it should work.

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    Got this code to work:

    (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);

    But now it is giving me lots of errors!

    ikaring

    (@ikaring)

    What errors do you get?
    I dont see any now.

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    Here is the errors: Uncaught TypeError: Cannot read property ‘top’ of undefined

    Then when I scroll the number grows.

    Other transitions and effects don’t work at this time also.

    To stop this I add a div with a class of “navbar” to the header fixed nav area.

    I will not keep it like this all the time. I do not want my website like that all the time.

    ikaring

    (@ikaring)

    There are couple of problems I can find.
    One is that you load some js files twice in head tag and end of file.

    Second, it is necessary to put the following js before loading scrolling-nav.js and after jQuery.
    Or you just change ‘bind’ to ‘on’.

    $('a.page-scroll').bind('click', function(event) {
    to
    $('a.page-scroll').on('click', function(event) {

    Or it is better add class ‘page-scroll’ on ‘.main-nav li a’, if you can.

Viewing 6 replies - 16 through 21 (of 21 total)
  • The topic ‘Adding JS to child theme’ is closed to new replies.