Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
conflicts with mootools and jquery in the same page
Is it not right to use mootools and jquery in the same page?
I’m using a mootools slideshow in one section of my site but Im also using jquery for sitewide navigation. On the section that loads the mootools.js file the jquery effect doesn’t work.
Is there something that can be done or do i need to use jquery across the board?
its a bad hen that wont scratch itself.
photogallery
Offline
Re: conflicts with mootools and jquery in the same page
kvnmcwebn wrote:
use mootools and jquery in the same page?
You can. Apply this jQuery tip and the two can coexist happily.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: conflicts with mootools and jquery in the same page
Although there are solutions for both libraries to co-exist, I would just go for one.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: conflicts with mootools and jquery in the same page
Bloke I am using your smd_gallery with mootools and I like it. Plus I’ve spent a lot of time doing a nav bar using a jquery method. So I’m going to use both even though it’s clunky..
Bloke Could you just spoon feed me on how to use the conflict tip in this situation, I’ll paypal you over 20 euros :
<head>...
<script src="<txp:site_url />textpattern/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('highlight')
.find('a')
.append('<span class="hover" />').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
// on hover
$span.stop().fadeTo(500, 1);
}, function () {
// off hover
$span.stop().fadeTo(500, 0);
});
});
});
</script>
<style type="text/css">
@import url("/css/styles.css");
@import url("/css/nav.css");
@import url("/css/jquery2.css");
</style>
<link href="/Slideshow/css/slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/swfobject.js"></script>
<script type="text/javascript" src="/Slideshow/js/mootools.js"></script>
<script type="text/javascript" src="/Slideshow/js/slideshow.js"></script>
</head>heres the page I’m working on
http://www.mcmonagledesign.com/photos/
-best
kevin
(Edited to add bc. for better code readability)
Last edited by Bloke (2009-10-16 12:45:07)
its a bad hen that wont scratch itself.
photogallery
Offline
Re: conflicts with mootools and jquery in the same page
Sure thing. As soon as you’ve loaded the jquery.js script, add this to your head:
<script type="text/javascript">
jQuery.noConflict();
</script>In your case:
<script type="text/javascript" src="/Slideshow/js/mootools.js"></script>
<script src="<txp:site_url />textpattern/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery.noConflict();
$(function () {
...Note that both libraries must be loaded before you call noConflict() so I’ve moved the mootools script tag up — you’ll have to remove that line from the lower part of your head section in the code you posted.
Last edited by Bloke (2009-10-16 12:50:38)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: conflicts with mootools and jquery in the same page
Bloke wrote:
Sure thing. As soon as you’ve loaded the jquery.js script, add this to your head:
<script type="text/javascript">
jQuery.noConflict();
</script>Does it go like this then?
<script type="text/javascript" src="/Slideshow/js/mootools.js"></script>
<script src="<txp:site_url />textpattern/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery.noConflict();
$(function () {
$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('highlight')
.find('a')
.append('<span class="hover" />').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
// on hover
$span.stop().fadeTo(500, 1);
}, function () {
// off hover
$span.stop().fadeTo(500, 0);
});
});
});
}Note that both libraries must be loaded before you call noConflict() so I’ve moved the mootools script tag up — you’ll have to remove that line from the lower part of your head section in the code you posted.
its a bad hen that wont scratch itself.
photogallery
Offline
Re: conflicts with mootools and jquery in the same page
kvnmcwebn wrote:
Does it go like this then?
Not quite! You’ve doubled up the function() { part. I only showed the top bit of your code for brevity. The full thing would probably be:
<head>...
<script type="text/javascript" src="/Slideshow/js/mootools.js"></script>
<script src="<txp:site_url />textpattern/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery.noConflict();
$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('highlight')
.find('a')
.append('<span class="hover" />').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
// on hover
$span.stop().fadeTo(500, 1);
}, function () {
// off hover
$span.stop().fadeTo(500, 0);
});
});
});
</script>
<style type="text/css">
@import url("/css/styles.css");
@import url("/css/nav.css");
@import url("/css/jquery2.css");
</style>
<link href="/Slideshow/css/slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/swfobject.js"></script>
<script type="text/javascript" src="/Slideshow/js/slideshow.js"></script>
</head>Notice I simply moved the mootools.js line up to the top and added the noConflit() call as the first line of your <script> block after both mootools and jQuery had been loaded.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: conflicts with mootools and jquery in the same page
hmm. not working. if I remove this line:
jQuery.noConflict();the jquery nav bar fade works but the mootools image fade doesn’t work.
If I leave it in it’s the other way around.
Last edited by kvnmcwebn (2009-10-16 15:05:55)
its a bad hen that wont scratch itself.
photogallery
Offline
Re: conflicts with mootools and jquery in the same page
hold on a sec it might be a path or something I broke.
its a bad hen that wont scratch itself.
photogallery
Offline
Re: conflicts with mootools and jquery in the same page
yeah it still either one or the other.
Unless theres something wrong with this:
<script type="text/javascript" src="/swfobject.js"></script>
<script type="text/javascript" src="/Slideshow/js/mootools.js"></script>
<script type="text/javascript" src="/Slideshow/js/slideshow.js"></script>
<script src="<txp:site_url />textpattern/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery.noConflict();
$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('highlight')
.find('a')
.append('<span class="hover" />').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
// on hover
$span.stop().fadeTo(500, 1);
}, function () {
// off hover
$span.stop().fadeTo(500, 0);
});
});
});
</script>its a bad hen that wont scratch itself.
photogallery
Offline
Re: conflicts with mootools and jquery in the same page
rendered html looks ok:
<link href="/Slideshow/css/slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.domain.com/swfobject.js"></script>
<script type="text/javascript" src="http://www.domain.com/Slideshow/js/slideshow.js"></script>
<script type="text/javascript" src="http://www.domain.com/Slideshow/js/mootools.js"></script>
<script src="http://www.domain.com/textpattern/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery.noConflict();
$(function () {Last edited by kvnmcwebn (2009-10-16 15:15:22)
its a bad hen that wont scratch itself.
photogallery
Offline
Re: conflicts with mootools and jquery in the same page
D’oh, sorry I’m a retard. Once you’ve added the noConflict() you can’t use $ any more for jQuery calls. Anything that requires jQuery must be called like this:
jQuery("#some_selector").some_function()...In other words, for any jQuery calls on your page, replace the $ with jQuery.
Some examples (I think these are actually the only two you need to change):
if (jQuery.browser.msie && jQuery.browser.version < 7) return;var $span = jQuery('> span.hover', this).css('opacity', 0);and so on. Anything that uses mootools can remain using the $.
Last edited by Bloke (2009-10-16 15:32:05)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline