javascript - $(window).load and (document).ready

Question

I'm editing a template, but I know zero about javascript. On one page there is a slider, to load the slider there is a javascript using (document).ready.

On another page of the template there is another function $(window).load the filters some elements on the page.

I would like to make a page with both this elements: the slider and, below, the elements with the buttons to filter them.

I have copied the html and the javascript of the slider on the secon page, but I have noticed that the 2 javascript "kill each other": if both are present, the filering script does not work. If I remove the code to lod the slider, then the filtering function work perfectly. How can I fix the probem?

here is the code:

Slider:

//Revolution Slider
var tpj = jQuery;
tpj.noConflict();

tpj(document).ready(function () {

    if (tpj.fn.cssOriginal != undefined)
        tpj.fn.css = tpj.fn.cssOriginal;

    tpj('.fullwidthbanner').revolution(
        {
            delay: 9000,
            startwidth: 1920,
            startheight: 649,
            onHoverStop: "off",                      // Stop Banner Timet at Hover on Slide on/off
            thumbWidth: 100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
            thumbHeight: 50,
            thumbAmount: 3,
            hideThumbs: 0,
            navigationType: "bullet",                // bullet, thumb, none
            navigationArrows: "none",                // nexttobullets, solo (old name verticalcentered), none
            navigationStyle: "round",                // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
            navigationHAlign: "center",              // Vertical Align top,center,bottom
            navigationVAlign: "bottom",                  // Horizontal Align left,center,right
            navigationHOffset: 30,
            navigationVOffset: 40,
            soloArrowLeftHalign: "left",
            soloArrowLeftValign: "center",
            soloArrowLeftHOffset: 20,
            soloArrowLeftVOffset: 0,
            soloArrowRightHalign: "right",
            soloArrowRightValign: "center",
            soloArrowRightHOffset: 20,
            soloArrowRightVOffset: 0,
            touchenabled: "on",                      // Enable Swipe Function : on/off
            stopAtSlide: -1,                         // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
            stopAfterLoops: -1,                      // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
            hideCaptionAtLimit: 0,                   // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
            hideAllCaptionAtLilmit: 0,               // Hide all The Captions if Width of Browser is less then this value
            hideSliderAtLimit: 0,                    // Hide the whole slider, and stop also functions if Width of Browser is less than this value
            fullWidth: "on",
            shadow: 0                                //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)
        });
});

Filtering function:

$(window).load(function () {
    $(function () {
        $.Isotope.prototype._getCenteredMasonryColumns = function () {
            this.width = this.element.width();
            var parentWidth = this.element.parent().width();
            // i.e. options.masonry && options.masonry.columnWidth
            var colW = this.options.masonry && this.options.masonry.columnWidth ||
            // or use the size of the first item
            this.$filteredAtoms.outerWidth(true) ||
            // if there's no items, use size of container
            parentWidth;
            var cols = Math.floor(parentWidth / colW);
            cols = Math.max(cols, 1);
            // i.e. this.masonry.cols = ....
            this.masonry.cols = cols;
            // i.e. this.masonry.columnWidth = ...
            this.masonry.columnWidth = colW;
        };

        $.Isotope.prototype._masonryReset = function () {
            // layout-specific props
            this.masonry = {};
            // FIXME shouldn't have to call this again
            this._getCenteredMasonryColumns();
            var i = this.masonry.cols;
            this.masonry.colYs = [];
            while (i--) {
                this.masonry.colYs.push(0);
            }
        };

        $.Isotope.prototype._masonryResizeChanged = function () {
            var prevColCount = this.masonry.cols;
            // get updated colCount
            this._getCenteredMasonryColumns();
            return (this.masonry.cols !== prevColCount);
        };

        $.Isotope.prototype._masonryGetContainerSize = function () {
            var unusedCols = 0,
                i = this.masonry.cols;
            // count unused columns
            while (--i) {
                if (this.masonry.colYs[i] !== 0) {
                    break;
                }
                unusedCols++;
            }
            return {
                height: Math.max.apply(Math, this.masonry.colYs),
                // fit container to columns that have been used;
                width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth
            };
        };

        var $container = $('#container'),
            $body = $('body'),
            colW = 1,
            columns = null;

        $container.isotope({
            // disable window resizing
            resizable: false,
            masonry: {
                columnWidth: colW
            }
        });

        //FILTERING
        $('#filters a').click(function () {
            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector
            });
            return false;
        });
    });
});

Answer 1

Well, what's happening is that you're calling jQuery.noConflict() in the first file. That method makes jQuery relinquish control of the $ variable (returns it to previous value, which, by default, is undefined). In your second file you are using $ which, of course, is undefined by then, and that's why your code does not work.

Either remove the call to noConflict() or wrap the code in the second file in this:

(function($) {
    //...your code here ( $(window).load() and all else)
})(jQuery);

This way, the $ variable is again defined in your code, but only inside that function. However, I'd stick with the first solution. If you're using jQuery, calling .noConflict() should be done only if you have very good reasons to use the $ variable for another purpose. Keep in mind that when people sees $ they will think about jQuery. It's almost a standard.