3

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

        });
    });
  • It would help if you could provide any console log errors and tell us where you're adding the code – Lodder Aug 19 '15 at 7:30
  • I am getting console log error as "Uncaught TypeError: $ is not a function" and I am adding this in <head> section – webanup Aug 19 '15 at 8:13
  • Make sure you add this code at the bottom of the head section, right above the </head>. Please also look at @fruppel's answer – Lodder Aug 19 '15 at 8:26
  • I edited my answer – fruppel Aug 19 '15 at 8:33
6

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/

  • Sorry, it's not working. – webanup Aug 19 '15 at 8:33
  • I see the problem and updated my answer – fruppel Aug 19 '15 at 8:43
  • glad to hear that. could you accept my answer then? – fruppel Aug 19 '15 at 18:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.