Mootools and jsapi conflict

<script type="text/javascript">
window.userMenuTimer = null;
function showUserMenu(doShow) {
    if (doShow) {
        $('jsid-header-user-menu-items').removeClass('hide');
    } else {
        $('jsid-header-user-menu-items').addClass('hide');
    }
};
$$('#jsid-header-user-menu,#jsid-header-user-menu-items').addEvent('mouseover', function(e) {
    if (window.userMenuTimer) {
        clearTimeout(window.userMenuTimer);
        window.userMenuTimer = null;
    }
    showUserMenu(true);
});
$$('#jsid-header-user-menu,#jsid-header-user-menu-items').addEvent('mouseout', function(e) {
    if (!window.userMenuTimer) {
        window.userMenuTimer = setTimeout("showUserMenu(false);", 100);
    }
});
</script>

and

<script src="http://www.google.com/jsapi">

Can anyone from here help me to solve this inconvenience, please ?

Hi there,

Welcome to the forums :slight_smile:

I’m afraid we’ll need to know a bit more before we are able to help you.
For example, how is this conflict manifesting itself?

Perhaps you could follow the steps outlined here, so as to help us reproduce your issue.

Oh, thank you for your kindness… I’m so sorry for presenting my problem like this… I couldn’t find the edit button so I will post here a little bit more compared to my last post but not the whole code because it’s long and it’s a little bit messy, and also a demo version to see what I am pointing to…

DEMO:

http://www.meciuriweb.com/demo/

I use this

<script type=“text/javascript” src=“js/mootools-1.4.1-yui-compressed.js”></script>

and this

<script type=“text/javascript”>
window.userMenuTimer = null;
function showUserMenu(doShow) {
if (doShow) {
$(‘jsid-header-user-menu-items’).removeClass(‘hide’);
} else {
$(‘jsid-header-user-menu-items’).addClass(‘hide’);
}
};
$$(‘#jsid-header-user-menu,#jsid-header-user-menu-items’).addEvent(‘mouseover’, function(e) {
if (window.userMenuTimer) {
clearTimeout(window.userMenuTimer);
window.userMenuTimer = null;
}
showUserMenu(true);
});
$$(‘#jsid-header-user-menu,#jsid-header-user-menu-items’).addEvent(‘mouseout’, function(e) {
if (!window.userMenuTimer) {
window.userMenuTimer = setTimeout(“showUserMenu(false);”, 100);
}
});
</script>

for a dropdown menu:

  		&lt;li id="jsid-header-user-menu"&gt;
                &lt;a class="item"&gt;
                    Live TV
                    &lt;span class="drop"&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;div id="jsid-header-user-menu-items" class="profile-menu-new-menu hide"&gt;
                    &lt;ul&gt;

						&lt;li&gt;&lt;a style="text-decoration: none; " href="test.html"&gt;test&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/li&gt;	

and

<script src=“http://www.google.com/jsapi”></script>

for a facebook pop-up like box and they just don’t kiss each other… I can’t make both of them work in the same time… My dropdown menu works no more…
I tried with

$.noConflict();

but it can’t be fixed like this, or maybe I am not that man with the magic mind to solve this…

Thanks for giving us more detail.
I look at the site and noticed that there are some issues with the markup.
Do you use a CMS of any sort to make this page, or did you code it by hand?

The site it’s made all by my hand…

Okay then, what we need to do now is strip out the unnecessary content and make a page with only the FB popup and the menu that isn’t currently working.
Would that be possible?

You can check out this post to see an example of what I mean.

Yes, I did like you said, please revisit the demo page…

Thanks!

Just for testing purposes, could you try changing this:

<script type="text/rocketscript" data-rocketsrc="js/mootools-1.4.1-yui-compressed.js"></script>

to this:

<script type="text/javascript" src="js/mootools-1.4.1-yui-compressed.js"></script>

And this:

<script type="text/rocketscript">
  window.userMenuTimer = null;
  function showUserMenu(doShow) {
    ...
  });
</script>

to this:

<script type="text/javascript">
  window.userMenuTimer = null;
  function showUserMenu(doShow) {
    ...
  });
</script>

Does that make a difference?

Sorry, the same problem…

Ok, so I had a closer look at this (which was a bit tricky due to the CloudFlare magic going on in the background) and it appears that simply including jQuery anywhere on the page stops your menu from working.
This is a bit weird, as technically speaking, if you include jQuery first, Mootools should just overwrite whatever it needs, but anyway …

The best solution is probably to rewrite your menu to work with jQuery, which I have done for you.

Replace your existing menu code with this:

window.userMenuTimer = null;
function showUserMenu(doShow) {
    if (doShow) {
        $('#jsid-header-user-menu-items').removeClass('hide');
    } else {
        $('#jsid-header-user-menu-items').addClass('hide');
    }
};
$('#jsid-header-user-menu,#jsid-header-user-menu-items').on('mouseover', function(e) {
    if (window.userMenuTimer) {
        clearTimeout(window.userMenuTimer);
        window.userMenuTimer = null;
    }
    showUserMenu(true);
});
$('#jsid-header-user-menu,#jsid-header-user-menu-items').on('mouseout', function(e) {
    if (!window.userMenuTimer) {
        window.userMenuTimer = setTimeout("showUserMenu(false);", 100);
    }
});

Does that help?

Omg, thank you so much… your code truly worked and it was quite simple :smiley:
Again, thank you.

No problem.
Glad I could help :slight_smile:

Hi, it’s me again… After I tested in few ways the dropdown menu, I discovered that in opera browser isn’t working… Please check link again… I hope it’s the last time I bother you…

Hi,

The unfortunately when I visit the above link, it tells me that the site is down.
I just checked the code for the menu (on its own) and that works in OPera.

Please tell me when the site is back up.

The site is back up.
I don’t know why you’re saying that it works… I checked the version of the browser because I thought it may be outdated, but I have the last version… I really can’t imagine of what could block it…

What I meant was that the menu, on its own, works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
  <base href="http://www.meciuriweb.com/demo/" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
  
<body>
<div id="fb-root"></div>

<div id="headbar-wrap" class="fixed">
  <div id="head-bar">
    <ul class="main-2-menu">
      <li id="jsid-header-user-menu">
        <a class="item">
          Live TV
          <span class="drop"></span>
        </a>
        <div id="jsid-header-user-menu-items" class="profile-menu-new-menu hide">
          <ul>
            <li><a style="text-decoration: none; " href="tv-Cartoons-5.html">Cartoons</a></li>
            <li><a style="text-decoration: none; " href="tv-Sport-8.html">Sport</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div> 
</div> 
<div style="height:50px;"></div>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.userMenuTimer = null;
function showUserMenu(doShow) {
    if (doShow) {
        $('#jsid-header-user-menu-items').removeClass('hide');
    } else {
        $('#jsid-header-user-menu-items').addClass('hide');
    }
};
$('#jsid-header-user-menu,#jsid-header-user-menu-items').on('mouseover', function(e) {
    if (window.userMenuTimer) {
        clearTimeout(window.userMenuTimer);
        window.userMenuTimer = null;
    }
    showUserMenu(true);
});
$('#jsid-header-user-menu,#jsid-header-user-menu-items').on('mouseout', function(e) {
    if (!window.userMenuTimer) {
        window.userMenuTimer = setTimeout("showUserMenu(false);", 100);
    }
});</script>
</body>
</html>

But something else on that page is blocking it.

Could you put the minimal demo back up, please and I will have another look.

Done.

Hi there,

Can you check this demo and tell me if it works for you in the latest Opera.
It works fine for me in Opera 12.15 on Win8

Don’t click close on the FB window, otherwise you will be redirected to your site.
Wait 5 seconds and you will stay on my server.

It is working fine now… I only had to replace

type="text/rocketscript"

and put all the scripts after the menu, like in your demo… thanks a lot, I apreciate.