External Jquery Script not working

Question

External Jquery script not working in Joomla template. Below I pasted script for reference. Any help greatly appreciated

function ShowLayer() {
        var layer = $(this).attr("layer-id");
        if (!$("#" + layer).is(":visible")) {
            var zindex = $("#" + layer).css("z-index");
            $("#" + layer).removeClass("zIndex");
            $("#" + layer).css("z-index", zindex + 1);
            //$("#" + layer).slideIn();
            SlideIn($("#" + layer));
        }
    }
    function SlideIn(current) {
        var scope = $('.outer');
        current.css("left", $(scope).width());
        current.show();
        current.animate({ left: 0 }, 700, "linear", function () {               
        });
    }
    function SlideOut(current) {
        var scope = $('.outer');
        current.animate({ left: $(scope).width() }, 700, "linear", function () {
            current.css("z-index", "")
            current.addClass("zIndex");  
            current.hide();
        });
    }
    function CloseLayer() {
        var layer = $(this).attr("layer-id");               
        SlideOut($("#" + layer));
    }
    $(document).ready(function () {
        $('.show-layer').click(ShowLayer);
        $('.close-layer').click(CloseLayer);
        $('.scrollerview').css("opacity", "0");
        $(window).scroll(function () {
            $('.scrollerview').each(function (i) {
                var factor = -250;
                if ($(this).hasClass("PckHdOtr")) {
                    factor = 250;
                }
                var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height() - factor;
                if (bottom_of_window > bottom_of_object) {
                    $(this).animate({ 'opacity': '1' }, 900);
                    if ($(this).hasClass("PckHdOtr")) {
                        $('.outer').animate({ 'opacity': '1' }, 900);
                    }
                }
            });

        });
    });

Answer 1

You are probably running into conflict problems, since both jQuery and the mootools library use the '$' char as shortcut.

There are multiple ways to deal with that problem. You have to find out which method works best for you. Not all of these may apply to your template.

A) Replace all '$' characters with 'jQuery' as $ is a shortcut for jQuery

B) Add this line right before your code

var $ = jQuery.noConflict();

After that you can use $ in your script

C) Wrap your whole code into the jQuery wrapper function and use $ as scope, like

jQuery(document).ready(function ($) {
    // All of your code, including your functions
});

or the more concise syntax for the code above:

jQuery(function($) {
    // Your code
});

You also have to make sure that you add this code after you include the jQuery library.

You can read more about conflicts with other libraries here: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/