Conflict with mootools.js

[soydemadrid]

Hi I'm using a mootools.js drop down menu which works great until adding socialite, then the menus no longer drop down.

This is my script code:

<!-- Social Networks -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="socialite.js"></script>
<script>

$(document).ready(function()
{

    var articles = $('article.text'), socialised = { }, win = $(window), updateArticles, onUpdate, updateTimeout;

    updateArticles = function()
    {
        // viewport bounds
        var wT = win.scrollTop(),
            wL = win.scrollLeft(),
            wR = wL + win.width(),
            wB = wT + win.height();
        // check which articles are visible and socialise!
        for (var i = 0; i < articles.length; i++) {
            if (socialised[i]) {
                continue;
            }
            // article bounds
            var art = $(articles[i]),
                aT = art.offset().top,
                aL = art.offset().left,
                aR = aL + art.width(),
                aB = aT + art.height();
            // vertial point inside viewport
            if ((aT >= wT && aT <= wB) || (aB >= wT && aB <= wB)) {
                // horizontal point inside viewport
                if ((aL >= wL && aL <= wR) || (aR >= wL && aR <= wR)) {
                    socialised[i] = true;
                    Socialite.load(articles[i]);
                }
            }
        }
    };

    onUpdate = function()
    {
        if (updateTimeout) {
            clearTimeout(updateTimeout);
        }
        updateTimeout = setTimeout(updateArticles, 100);
    };

    win.on('resize', onUpdate).on('scroll', onUpdate);

    setTimeout(updateArticles, 100);

});

</script>

Can anyone please help get the two working together?

Thanks very much. :)

[claudiosanches]

Yep

Find:

 $(document).ready(function()

And replace to:

jQuery(document).ready(function($)

[soydemadrid]

Hi thanks for helping. Unfortunately this hasn't worked, the website is here: http://www.insideyork.co.uk/

If I comment out this

then my drop down menus work again (which is how it is at the moment), but if I uncomment it again then the menus don't work and Socialite still doesn't work either...

Thanks again if you can suggest anything.

[claudiosanches]

My firebug said on your website:

"This page already using jQuery v1.7.1 and noConflict(). Use $jq(), not $()."

Replace all $ to $jq

[soydemadrid]

Hi I've tried replacing all the $ to $jq and it still wouldn't work. As soon as I comment out this line:

I get my drop down menus back but still no socialite, when I uncomment it the drop down menus won't work either...

Tried also upgrading to a newer version of Mootools.js but this didn't work too.

[claudiosanches]

I did not find the link of your jQuery file in your site. Only Firebug told me he had one. Is there really any running jQuery?

[soydemadrid]

Hi I'm not sure that jQuery is running. Just other .js files, but it seems to be mootools.js that's conflicting with socialite.js. If I take out mootools it works and vice versa.

I'm not sure how to get them both working together.

[claudiosanches]

To use Socialite you need to put together a script of jQuery. You can work with jQuery and Mootools while.

How do you expect it to work without be using jQuery in your site?

[soydemadrid]

Hi thanks - really I'm just looking to make these 3 files work together so that I still have drop down menus and socialite also works and reveals on scroll.

http://www.insideyork.co.uk/manager/media/script/mootools/mootools.js http://www.insideyork.co.uk/assets/templates/insideyork/drop_down_menu.js http://www.insideyork.co.uk/assets/templates/insideyork/socialitejs/socialite.js

Thanks for any help with this.

[tmort]

@soydemadrid You'll need to add jQuery to your site in order to load socialite. Not sure if this is still an issue, so I'm closing it for now. Open it again if you're still having issues.

[soydemadrid]

Hi I'm still having the issue. Here is where I bring jquery in:

But this conflicts with mootools.js

If I disable jquery by commenting it out then my drop down menus work. If I comment out mootools.js then socialite works. Any ideas what I can do?

Thanks.

[tmort]

Got it. So you need to add jQuery (the library) to the head of your document, like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

I see you already have jQuery in "noConflict" mode (as @claudiosmweb suggested) so once you add the jQuery library it should work. Give that a try.

[soydemadrid]

as you can see though when I add it to the head also my drop down menus no longer work...

[tmort]

Try placing the jQuery reference above the mootools reference, or just above the socialite reference. See if any of those work.

[claudiosanches]

For me works fine:

[soydemadrid]

Hi I've tried every combination but it won't work for me

[soydemadrid]

Your test claudiosmweb looks great, but do the drop down menus at the top still work?

Thanks.

[claudiosanches]

Dude, where did you learn javascript?

If google will see a thousand ways to fix it. But this one years waiting for a solution to fall from the sky!

Here the solution:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>jQuery.noConflict();</script>

Paste it before the mooltools scritp!

[soydemadrid]

Hi thanks for the help but it doesn't work still. I paste that in and the drop down menus work, but Socialite doesn't.

[claudiosanches]

This working both there now!

[soydemadrid]

Ah you're right thanks it is working - I was logged into the backend. When logged in and previewing the site it doesn't work but when I log out it does. So there must be another conflict with the backend/ajax etc but that's cool I can live with that. Thanks for helping me!

[tmort]

Glad we got this resolved, thanks to @claudiosmweb for stepping in while I was away!

[claudiosanches]

The best would be to add the jQuery BEFORE the mootools. But already solved now.