Nested No-Conflict Jquery

Question

Hey so kinda new to the world of jquery but I was wondering, Can I nest all my jquery under one no-conflict or do I have to keep adding the no-conflict for every bit of code...(as I have it now).

Using Wordpress, so the no-conflict jquery code up top is a must.

jQuery(document).ready(function($) {
    //Modal contact pop-up
    $(".modal-pop").click(function() {
        $("#myModal").modal();
    });
    $(".email").click(function() {
        $("#myModal").modal();
    });
});

//Navbar fixed top on scroll
jQuery(document).ready(function($) {
    $(document).ready(function() {
        var menu = $('#site-nav');
        var origOffsetY = menu.offset().top;

        function scroll() {
            if ($(window).scrollTop() >= origOffsetY) {
                $('#site-nav').addClass('navbar-fixed-top');
                $('.main-content').addClass('menu-padding');
            } else {
                $('#site-nav').removeClass('navbar-fixed-top');
                $('.main-content').removeClass('menu-padding');
            }
        }

        document.onscroll = scroll;
    });
});

//Image Overlay for Images in Portfolio section
jQuery(document).ready(function($) {
    $(function() {
        // OPACITY OF BUTTON SET TO 0%
        $(".roll").css("opacity", "0");
        // ON MOUSE OVER
        $(".roll").hover(function() {
                // SET OPACITY TO 70%
                $(this).stop().animate({
                    opacity: .7
                }, "slow");
            },
            // ON MOUSE OUT
            function() {
                // SET OPACITY BACK TO 50%
                $(this).stop().animate({
                    opacity: 0
                }, "slow");
            });
    });
});

//Smooth scrool to section
jQuery(document).ready(function($) {
    $(function() {
        $('a[href*="#"]:not([href="#"])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
});

are you trying to use multiple versions of jquery in your page ? — dreamweiver, May 18 '16 at 11:26

score 1 · Answer 1 · answered May 18 '16 at 12:05

1

Yes, you can wrap it all in one.

jQuery(document).ready(function($) {

    //do a thing

    //do another thing

});

answered May 18 '16 at 12:05

Uli

51
4

score 1 · Accepted Answer · edited May 23 '17 at 12:16

Yes, you can and probably should wrap them all in a single ready event. It is useless to wrap them all in their own one. Obviously, this can only happen if you are putting all these in a single file. Also take note that the scope has now been changed!

jQuery(document).ready(function($) {
    //Modal contact pop-up
    $(".modal-pop").click(function() {
        $("#myModal").modal();
    });
    $(".email").click(function() {
        $("#myModal").modal();
    });

    //Navbar fixed top on scroll    
    function scroll() {
        var menu = $('#site-nav'),
            origOffsetY = menu.offset().top;
        if ($(window).scrollTop() >= origOffsetY) {
            menu.addClass('navbar-fixed-top');
            $('.main-content').addClass('menu-padding');
        } else {
            menu.removeClass('navbar-fixed-top');
            $('.main-content').removeClass('menu-padding');
        }
    }

    document.onscroll = scroll;

    //Image Overlay for Images in Portfolio section
    // OPACITY OF BUTTON SET TO 0%
    $(".roll").css("opacity", "0");
    // ON MOUSE OVER
    $(".roll").hover(function() {
            // SET OPACITY TO 70%
            $(this).stop().animate({
                opacity: .7
            }, "slow");
        },
        // ON MOUSE OUT
        function() {
            // SET OPACITY BACK TO 50%
            $(this).stop().animate({
                opacity: 0
            }, "slow");
        });

    //Smooth scrool to section
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Nested No-Conflict Jquery

2 Answers2