"Uncaught TypeError: $ is not a function" error while using an external JQuery script

Question

My external JQuery script is not working in my Joomla template.

I am getting this console log error:

Uncaught TypeError: $ is not a function

I am adding this script in the page's section.

This is my script:

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

fruppel · Accepted Answer · 2015-08-19 08:49:56Z

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/

Stack Exchange Network

"Uncaught TypeError: $ is not a function" error while using an external JQuery script

1 Answer 1

Your Answer

Hot Network Questions

"Uncaught TypeError: $ is not a function" error while using an external JQuery script

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions