jquery conflict with js script

Question

welcome all ,

i have a problem with my images slider , it runs successfuly until poll script excuted then it stops , tried to combine both scripts didn't work also tried to use noConflict but in stops both of them .

this is the slider

(function ($) {
    $.fn.s3Slider = function (vars) {
        var element = this;
        var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current = null;
        var timeOutFn = null;
        var faderStat = true;
        var mOver = false;
        var items = $("#sliderContent .sliderImage");
        var itemsSpan = $("#sliderContent .sliderImage span");
        items.each(function (i) {
            $(items[i]).mouseover(function () {
                mOver = true
            });
            $(items[i]).mouseout(function () {
                mOver = false;
                fadeElement(true)
            })
        });
        var fadeElement = function (isMouseOut) {
                var thisTimeOut = (isMouseOut) ? (timeOut / 2) : timeOut;
                thisTimeOut = (faderStat) ? 10 : thisTimeOut;
                if (items.length > 0) {
                    timeOutFn = setTimeout(makeSlider, thisTimeOut)
                } else {
                    console.log("Poof..")
                }
            };
        var makeSlider = function () {
                current = (current != null) ? current : items[(items.length - 1)];
                var currNo = jQuery.inArray(current, items) + 1;
                currNo = (currNo == items.length) ? 0 : (currNo - 1);
                var newMargin = $(element).width() * currNo;
                if (faderStat == true) {
                    if (!mOver) {
                        $(items[currNo]).fadeIn((timeOut / 6), function () {
                            if ($(itemsSpan[currNo]).css("bottom") == 0) {
                                $(itemsSpan[currNo]).slideUp((timeOut / 6), function () {
                                    faderStat = false;
                                    current = items[currNo];
                                    if (!mOver) {
                                        fadeElement(false)
                                    }
                                })
                            } else {
                                $(itemsSpan[currNo]).slideDown((timeOut / 6), function () {
                                    faderStat = false;
                                    current = items[currNo];
                                    if (!mOver) {
                                        fadeElement(false)
                                    }
                                })
                            }
                        })
                    }
                } else {
                    if (!mOver) {
                        if ($(itemsSpan[currNo]).css("bottom") == 0) {
                            $(itemsSpan[currNo]).slideDown((timeOut / 6), function () {
                                $(items[currNo]).fadeOut((timeOut / 6), function () {
                                    faderStat = true;
                                    current = items[(currNo + 1)];
                                    if (!mOver) {
                                        fadeElement(false)
                                    }
                                })
                            })
                        } else {
                            $(itemsSpan[currNo]).slideUp((timeOut / 6), function () {
                                $(items[currNo]).fadeOut((timeOut / 6), function () {
                                    faderStat = true;
                                    current = items[(currNo + 1)];
                                    if (!mOver) {
                                        fadeElement(false)
                                    }
                                })
                            })
                        }
                    }
                }
            };
        makeSlider()
    }
})(jQuery);

and this is the poll script

window.onload = function() {
$(".sidePollCon").load("ar_poll.html", function(r, s, xhr) {

    if (s == "error") {
        $(".sidePollCon").load("poll.html");


    } else {
        $(".vote_booroo").html("صوت الان");
        $(".viewresults").html("شاهد النتيجة");
        $("fieldset p").html("");
        $(".results_booroo p").html("");
        $(".result_booroo").attr("src", "../images/poll_color.jpg");

    }

});

};

Answer 1

One potential problem could be the window.onload assignment. It is very prone to conflict.

Every time you do window.onload = the previous assignemnt will be overridden. See demo here:

The output shows that the first window.onload assignment never gets called, while the jQuery alternative does get called.

jQuery.noConflict does little in this regard. All it does is to prevent override the $ symbol so that another lib can use it.

So if you are also using the window.onload event to invoke the slider, then you have conflict. You can easily solve this problem by using the jquery format:

$(window).load(function() {
    ...
});

However usually you would tie the event to $(document).load(function(){...}); or in short form: $(function(){...}).

So for your poll that would be:

$(function(){
    $(".sidePollCon").load("ar_poll.html", function(r, s, xhr) {

        if (s == "error") {
            $(".sidePollCon").load("poll.html");


        } else {
            $(".vote_booroo").html("صوت الان");
            $(".viewresults").html("شاهد النتيجة");
            $("fieldset p").html("");
            $(".results_booroo p").html("");
            $(".result_booroo").attr("src", "../images/poll_color.jpg");

        }

    });
});

Hope that helps.