JQuery & Mootools
-
- Joomla! Apprentice
- Posts: 30
- Joined: Fri Mar 02, 2007 8:47 pm
JQuery & Mootools
Hi All
I am led to believe that there is a way to have mooltools and jquery work in harmony within Joomla by using jquery in non conflict mode.
Could someone give me some step by step instructions on how to achieve this as I looked on the jquery website and I could not see how the instructions translate within Joomla. What I am unsure of as well if it can be set as a global non conflict setting or if it needs to be implemented per module using jquery?
any help is appreciated
I am led to believe that there is a way to have mooltools and jquery work in harmony within Joomla by using jquery in non conflict mode.
Could someone give me some step by step instructions on how to achieve this as I looked on the jquery website and I could not see how the instructions translate within Joomla. What I am unsure of as well if it can be set as a global non conflict setting or if it needs to be implemented per module using jquery?
any help is appreciated
-
- Joomla! Enthusiast
- Posts: 108
- Joined: Fri Nov 02, 2007 3:39 pm
Re: JQuery & Mootools
I use JQuery with thickbox within Joomla. To simply get JQuery to work with mootools, do the following within the view (mvc -- default.php):
FYI - I placed jquery.js in <joomla_root>/media/system/js/.
I had to do this within each of the components/modules and didn't look at doing it globablly.
To get thickbox to work with mootools, I had to change/replace all of the $() functions to JQuery() functions within thickbox.js, otherwise it invokes the mootools equivalent functions.
Code: Select all
JHTML::_('behavior.mootools');
$document = &JFactory::getDocument();
$document->addScript( JPATH_SITE.'/media/system/js/jquery.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );
I had to do this within each of the components/modules and didn't look at doing it globablly.
To get thickbox to work with mootools, I had to change/replace all of the $() functions to JQuery() functions within thickbox.js, otherwise it invokes the mootools equivalent functions.
Code: Select all
$document = &JFactory::getDocument();
$document->addScript(JPATH_SITE.'/media/system/js/jquery.js' );
$document->addScript(JPATH_SITE.'/media/system/js/thickbox.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );
$document->addStyleSheet( JPATH_SITE.'/media/system/css/thickbox.css' );
-
- Joomla! Apprentice
- Posts: 30
- Joined: Fri Mar 02, 2007 8:47 pm
Re: JQuery & Mootools
Thanks for the reply, I get the second bit of your post but I am unsure of what I edit when you reference (mvc -- default.php)
Also it looks like your solution is geared around editing mootools to work with JQuery, if possible I would like it to work the other way around as I have more items using mootools than I do using JQuery (not that I am adverse to a bit of work editing the other way round if necessary).
Also it looks like your solution is geared around editing mootools to work with JQuery, if possible I would like it to work the other way around as I have more items using mootools than I do using JQuery (not that I am adverse to a bit of work editing the other way round if necessary).
-
- Joomla! Enthusiast
- Posts: 108
- Joined: Fri Nov 02, 2007 3:39 pm
Re: JQuery & Mootools
mvc - default.php is the model-view-controller structure used in joomla 1.5. It's equivalent to old style file of <comp>.html.php. Add it to your file in which you are displaying your html form prior to the <form action="index.php" method="post" ...> in your code.
No, this solution is geared to primarily use mootools as the solution and use JQuery as secondary. Notice in the 1st code post that behavior.mootols comes before the jquery items and JQuery.noConflict() is called so it doesn't interfere with mootools.
Ignore the 2nd part if you are not using thickbox. It is the only file I had to edit to get it that particular item to work. There is no editing to mootools or jquery.
No, this solution is geared to primarily use mootools as the solution and use JQuery as secondary. Notice in the 1st code post that behavior.mootols comes before the jquery items and JQuery.noConflict() is called so it doesn't interfere with mootools.
Ignore the 2nd part if you are not using thickbox. It is the only file I had to edit to get it that particular item to work. There is no editing to mootools or jquery.
- phil_
- Joomla! Apprentice
- Posts: 38
- Joined: Sun Feb 10, 2008 1:18 pm
- Location: Cincinnati, OH
- Contact:
Re: JQuery & Mootools
This has what you need to use jQuery with other libraries. The last option is very good, since you don't have to modify your jQuery code, you just wrap it in a protected function..
http://docs.jquery.com/Using_jQuery_wit ... _Libraries
Here's something fun to get jQuery support..
1. Upload jQuery to /media/system/js/jquery.js
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..
function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}
Now you can load jQuery with JHTML::_('behavior.jquery'). I know, it's easier to just load it directly.. but this way is perhaps more 'forward compatible'?
Phil
http://docs.jquery.com/Using_jQuery_wit ... _Libraries
Here's something fun to get jQuery support..
1. Upload jQuery to /media/system/js/jquery.js
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..
function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}
Now you can load jQuery with JHTML::_('behavior.jquery'). I know, it's easier to just load it directly.. but this way is perhaps more 'forward compatible'?
Phil
-
- Joomla! Enthusiast
- Posts: 139
- Joined: Wed Jan 23, 2008 5:35 pm
Re: JQuery & Mootools
I have a query regarding this method. I'm currently using Virtuemart which uses the Thickbox method. I'm also using JQuery to deploy a dropshadow effect on certain elements. I've successfully implemented a fix on some pages where Mootools is loaded using:
My renderdropshadow script is as follows:
My problem is that when using Virtuemart and Thickbox, the Mootools code for Thickbox is loaded before I can execute jquery.noconflict() which results in the webpage incorrectly targeting the $ element. Is there any way I can reorder my code execution to achieve this?
Code: Select all
<jdoc:include type="head" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/bedsareuzzz/javascript/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/bedsareuzzz/javascript/jquery/jquery.dimensions.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/bedsareuzzz/javascript/jquery/jquery.dropshadow.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/bedsareuzzz/javascript/jquery/renderdropshadow.js"></script>
Code: Select all
//We use this to define our dropshadows and render them
window.onload = function()
{
//As we load Mootools we need to handle any namespace problems
jQuery.noConflict();
//Setup some standard dimensions for our shadows
var left_dim = 10;
var top_dim = 10;
var blur_level = 5;
var opacity_level = 0.4;
jQuery("#content.home").dropShadow({left: left_dim, top: top_dim, blur: blur_level, opacity: opacity_level});
jQuery(".staticimage").dropShadow({left: 0, top: top_dim, blur: blur_level, opacity: opacity_level});
jQuery(".category").dropShadow({left: left_dim, top: top_dim, blur: blur_level, opacity: opacity_level});
jQuery(".browseProductContainer").dropShadow({left: left_dim, top: top_dim, blur: blur_level, opacity: opacity_level});
jQuery(".productimages").dropShadow({left: left_dim, top: top_dim, blur: blur_level, opacity: opacity_level});
}
-
- Joomla! Enthusiast
- Posts: 139
- Joined: Wed Jan 23, 2008 5:35 pm
Re: JQuery & Mootools
Sometimes just looking at something from fresh point of view (i.e as a forum post) can show you the way:
I needed to remove my jquery.noconflict() from my renderdropshadow script and put in outside of the window.onload function.
I needed to remove my jquery.noconflict() from my renderdropshadow script and put in outside of the window.onload function.
-
- Joomla! Apprentice
- Posts: 8
- Joined: Wed Sep 17, 2008 3:30 pm
- Location: Vietnam
- Contact:
Re: JQuery & Mootools
A bit notice is path of dir on server is not url of file.
Code: Select all
JPATH_SITE
[CMS BASE ON Zend Frameowrk]http://zfvn.co.cc
[Conan1212 Blog:]http://phplaw.[URL banned].com
Conan1212 is me a ditector in the world of php.
[Conan1212 Blog:]http://phplaw.[URL banned].com
Conan1212 is me a ditector in the world of php.
- kai920
- Joomla! Guru
- Posts: 542
- Joined: Sun Sep 04, 2005 3:59 pm
- Location: Hong Kong
Re: JQuery & Mootools
What's the difference between using JHTML::_('behavior.jquery') and loading it directly from the Joomla template's index.php? (besides the fact that jquery is loaded across the site with the latter method)phil_ wrote:Here's something fun to get jQuery support..
1. Upload jQuery to /media/system/js/jquery.js
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..
function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}
Now you can load jQuery with JHTML::_('behavior.jquery'). I know, it's easier to just load it directly.. but this way is perhaps more 'forward compatible'?
I used the JHTML method in one of EventList's view templates (via template override). I see jquery.js in the <head> section, before mootools.js, but the simple jQuery code I've placed immediately after the JHTML behavior statement does not seem to execute. If I load jQuery directly from the J template's index.php, the code works. I noticed by loading jquery.js this way, it comes after mootools.js.
- phil_
- Joomla! Apprentice
- Posts: 38
- Joined: Sun Feb 10, 2008 1:18 pm
- Location: Cincinnati, OH
- Contact:
Re: JQuery & Mootools
I'd like to clear something up here. It has since come to to my attention the method I had posted using behavior.jquery is a terrible idea. Please do not use this method. You should never 'hack the core' and this is exactly what this does. Say this library file was updated with a patch later? This code would either be blown away, or you would need to carefully tiptoe around it. So please, do not use this method, and sorry for the confusion.kai920 wrote:What's the difference between using JHTML::_('behavior.jquery') and loading it directly from the Joomla template's index.php? (besides the fact that jquery is loaded across the site with the latter method)phil_ wrote:Here's something fun to get jQuery support..
1. Upload jQuery to /media/system/js/jquery.js
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..
function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}
Now you can load jQuery with JHTML::_('behavior.jquery'). I know, it's easier to just load it directly.. but this way is perhaps more 'forward compatible'?
I used the JHTML method in one of EventList's view templates (via template override). I see jquery.js in the <head> section, before mootools.js, but the simple jQuery code I've placed immediately after the JHTML behavior statement does not seem to execute. If I load jQuery directly from the J template's index.php, the code works. I noticed by loading jquery.js this way, it comes after mootools.js.
Using it in a template override is a bit less terrible, but not much. To use jquery with other libraries, you need to make sure it loads last. AFAIK, this method will not give you that control. In any case, its much easier and straight forward to just directly include it.
All this aside, if you find a good way to make this work, that would be great, and I would love to hear about that.
- Esteban Soler
- Joomla! Explorer
- Posts: 339
- Joined: Tue May 29, 2007 6:31 pm
- Location: Mar del Plata (Argentina)
- Contact:
Re: JQuery & Mootools
i am having the same kind of issues , but a little more complex since i am using many components that try to load jquery on their own
i am not sure about what will i do, but i am thinking about writing a system plugin which you can call on every component and tell the plugin what scripts you need to load, then the plugin adds em to the end of the document
any better/simpler idea? i would really appreciate the help
Cheers
Esteban
i am not sure about what will i do, but i am thinking about writing a system plugin which you can call on every component and tell the plugin what scripts you need to load, then the plugin adds em to the end of the document
any better/simpler idea? i would really appreciate the help
Cheers
Esteban
- kai920
- Joomla! Guru
- Posts: 542
- Joined: Sun Sep 04, 2005 3:59 pm
- Location: Hong Kong
Re: JQuery & Mootools
Thanks for the reply Phil. I too thought it was a bit intrusive to hack core code, but I don't mind as I know my way around J a bit. I have been running into problems with jQuery conflicting with Mootools in SOBI2's search results... so have put off this particular experiment for now. Still keen on learning more jQuery though...
- revive1
- Joomla! Intern
- Posts: 87
- Joined: Sat Apr 12, 2008 1:41 am
Re: JQuery & Mootools
I strongly suggest looking at the jquery site (http://docs.jquery.com/Using_jQuery_wit ... _Libraries) BEFORE changing any code.. especially core files..they have some easy fixes there.. like phil_ said, the last one is probably the best option..
We posted how it solved an issue for us with a jquery template and mootools module RokSlideshow here: http://www.rocketwerx.com/forum/viewtop ... 032#p12032
We posted how it solved an issue for us with a jquery template and mootools module RokSlideshow here: http://www.rocketwerx.com/forum/viewtop ... 032#p12032
My favorite web design/dev tools:
Rackspace Cloud Files + Cloud9 http://cloud9manager.com
24" iMac, MAMP Pro, Logitech MX Revolution, Coda, TextMate, Transmit, Snippley and Adobe CS4
For small ecommerce: http://nanao-cart.com
Rackspace Cloud Files + Cloud9 http://cloud9manager.com
24" iMac, MAMP Pro, Logitech MX Revolution, Coda, TextMate, Transmit, Snippley and Adobe CS4
For small ecommerce: http://nanao-cart.com
- phil_
- Joomla! Apprentice
- Posts: 38
- Joined: Sun Feb 10, 2008 1:18 pm
- Location: Cincinnati, OH
- Contact:
Re: JQuery & Mootools
I've been thinking about this again lately. I think one good way would be to make a system plugin that will take all the js files, shuffle them into the desired order, addind jquery to the end. It could also then output the noConflict() method, like this... <script>jQuery.noConflict();</scipt>revive1 wrote:I strongly suggest looking at the jquery site (http://docs.jquery.com/Using_jQuery_wit ... _Libraries) BEFORE changing any code.. especially core files..they have some easy fixes there.. like phil_ said, the last one is probably the best option..
We posted how it solved an issue for us with a jquery template and mootools module RokSlideshow here: http://www.rocketwerx.com/forum/viewtop ... 032#p12032
What would be left is just to wrap any jquery code into a protected block, like...
Code: Select all
jQuery(document).ready(function($){
$('body').css('color','red'):
});
If I manage to get a good plugin like this working, I will share it. Unless somebody beats me to it, in which case, please provide the link?? :P
- revive1
- Joomla! Intern
- Posts: 87
- Joined: Sat Apr 12, 2008 1:41 am
Re: JQuery & Mootools
Great idea phil_, keep in touch.. would like to see what you come up with..
My favorite web design/dev tools:
Rackspace Cloud Files + Cloud9 http://cloud9manager.com
24" iMac, MAMP Pro, Logitech MX Revolution, Coda, TextMate, Transmit, Snippley and Adobe CS4
For small ecommerce: http://nanao-cart.com
Rackspace Cloud Files + Cloud9 http://cloud9manager.com
24" iMac, MAMP Pro, Logitech MX Revolution, Coda, TextMate, Transmit, Snippley and Adobe CS4
For small ecommerce: http://nanao-cart.com
- Esteban Soler
- Joomla! Explorer
- Posts: 339
- Joined: Tue May 29, 2007 6:31 pm
- Location: Mar del Plata (Argentina)
- Contact:
Re: JQuery & Mootools
well i actulally wrote that plugin i suggested, works good at least for what i need to do.
if someone needs it or want to contribute feel free to do it
here is an example of how i use it
the array recived as parameter is not an elegant solution, but works good enought
the first two ones load a js script
the last one loads some javascript code
i diferentiate between this two kinds of action 'cos the plugin checks that there we are not loading the same js file two times
Cheers
Esteban
if someone needs it or want to contribute feel free to do it
here is an example of how i use it
the array recived as parameter is not an elegant solution, but works good enought
the first two ones load a js script
the last one loads some javascript code
i diferentiate between this two kinds of action 'cos the plugin checks that there we are not loading the same js file two times
Code: Select all
$mainframe->triggerEvent('onJsLoad', array($this->baseurl . '/components/com_comprofiler/js/jquery-1.2.6/jquery-1.2.6.pack.js', null));
$mainframe->triggerEvent('onJsLoad', array($this->baseurl . '/components/com_comprofiler/js/jquery-1.2.6/jquery.ui-all.pack.js', null));
$mainframe->triggerEvent('onJsLoad', array(null, '
<link rel="stylesheet" href="'.$template_url.'css/themes/flora/flora.all.css" type="text/css" />
<script type="text/javascript" >
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("div.tabbed > ul.tab").tabs({ fx: { opacity: "toggle" } }).tabs("rotate", 3000);
});
</script>'));
Esteban
You do not have the required permissions to view the files attached to this post.
-
- Joomla! Fledgling
- Posts: 2
- Joined: Mon Jan 19, 2009 4:43 am
Re: JQuery & Mootools
Good evening,
I just tried your plugin. It did fix my problem. Thanks!
Merci bien!
Michel
I just tried your plugin. It did fix my problem. Thanks!
Merci bien!
Michel
-
- Joomla! Fledgling
- Posts: 2
- Joined: Mon Jan 19, 2009 4:43 am
Re: JQuery & Mootools
Good evening,
I just tried your plugin. It fixed my problem. Thanks!
Merci bien!
Michel
I just tried your plugin. It fixed my problem. Thanks!
Merci bien!
Michel
-
- Joomla! Fledgling
- Posts: 1
- Joined: Wed Aug 06, 2008 1:19 pm
Re: JQuery & Mootools
You can find a great PDF (it is a free chapter of a book) explaining how to use jQuery and Mootools at same time without conflict at
http://www.packtpub.com/files/learning- ... ffects.pdf
via
http://www.designvsdevelop.com/using-mo ... in-joomla/
It works very well for me.
http://www.packtpub.com/files/learning- ... ffects.pdf
via
http://www.designvsdevelop.com/using-mo ... in-joomla/
It works very well for me.
-
- Joomla! Apprentice
- Posts: 5
- Joined: Mon Dec 15, 2008 12:01 pm
Disable Mootools on the client side (keep it only for back-e
If you don't user Motools yourself, thus only need it on the back-end.
You might disable it completely on the front-end (client side).
Anyway, that's how I did it :
In this case, you can only use Jquery on your website, but $() works and you don't need to modify
your plugins
You might disable it completely on the front-end (client side).
Anyway, that's how I did it :
Code: Select all
126 // When on the back-end --> include joomla javascripts
127 //
128 if (strstr($_SERVER["REQUEST_URI"],"administrator"))
129 {
130 // Generate script file links
131 foreach ($document->_scripts as $strSrc => $strType) {
132 $strHtml .= $tab.'<script type="'.$strType.'" src="'.$strSrc.'"></script>'.$lnEnd;
133 }
134 }
135
"libraries/joomla/document/html/renderer/head.php"
your plugins
-
- Joomla! Apprentice
- Posts: 48
- Joined: Tue Oct 23, 2007 6:49 am
- Contact:
Re: JQuery & Mootools
If you do like the below methodphil_ wrote:This has what you need to use jQuery with other libraries. The last option is very good, since you don't have to modify your jQuery code, you just wrap it in a protected function..
http://docs.jquery.com/Using_jQuery_wit ... _Libraries
Here's something fun to get jQuery support..
1. Upload jQuery to /media/system/js/jquery.js
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..
function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}
Now you can load jQuery with JHTML::_('behavior.jquery'). I know, it's easier to just load it directly.. but this way is perhaps more 'forward compatible'?
Phil
2. Edit /libraries/joomla/html/html/behavior.php
3. At line 61, after mootools function is done, add this..
function jquery() {
JHTML::script('jquery.js','media/system/js/',false);
}
It will be a problem, when upgrading the Joomla versions rite ?
Somanweb
http://www.joomla-web-developer.com Joomla Web Developer, Joomla Web Development
http://www.joomla-web-designer.com Joomla Web Designer, Joomla Web Design
http://www.joomla-web-designer.com Joomla Web Designer, Joomla Web Design
- phil_
- Joomla! Apprentice
- Posts: 38
- Joined: Sun Feb 10, 2008 1:18 pm
- Location: Cincinnati, OH
- Contact:
Re: JQuery & Mootools
yes, it is a bad idea to directly change any core files that come with Joomla!, because it makes upgrading difficult. Instead of changing file, use a method to extend or override. For example, a system plugin would be able to give you access to jQuery on all pages, in a way that is compatible with mootools.somanweb wrote: It will be a problem, when upgrading the Joomla versions rite ?
Somanweb
- Esteban Soler
- Joomla! Explorer
- Posts: 339
- Joined: Tue May 29, 2007 6:31 pm
- Location: Mar del Plata (Argentina)
- Contact:
Re: JQuery & Mootools
like the one i posted some time ago on this same thread
i have been using it for a while and works good for me at least. sometimes you need to change some other components a little (or a lot) but works so far is pretty straight forward
Cheers
Esteban
i have been using it for a while and works good for me at least. sometimes you need to change some other components a little (or a lot) but works so far is pretty straight forward
Cheers
Esteban
-
- Joomla! Apprentice
- Posts: 22
- Joined: Thu Jul 23, 2009 6:32 pm
Re: JQuery & Mootools
All decent jQuery plugins I've seen have been careful to use jQuery() instead of $(), or assign $ to jQuery in local scope. In doing so, it is no longer an issue that jQuery.noConflict() is called last in the <head> section. Is this not the case with Thickbox?
Also, when loading jQuery with JHTML::script('jquery.js', $path, false), I use the following code:
$doc =& JFactory::getDocument();
$script = 'if($===jQuery){jQuery.noConflict();}';
$doc->addScriptDeclaration($script);
This ensures that even if MooTools is loaded after jQuery and before the call to jQuery.noConflict(), that nothing bad happens.
Also, when loading jQuery with JHTML::script('jquery.js', $path, false), I use the following code:
$doc =& JFactory::getDocument();
$script = 'if($===jQuery){jQuery.noConflict();}';
$doc->addScriptDeclaration($script);
This ensures that even if MooTools is loaded after jQuery and before the call to jQuery.noConflict(), that nothing bad happens.
- Esteban Soler
- Joomla! Explorer
- Posts: 339
- Joined: Tue May 29, 2007 6:31 pm
- Location: Mar del Plata (Argentina)
- Contact:
Re: JQuery & Mootools
yes, but the main issue i've seen is that many of the components and modules that use jquery don't have a way to check it has been loaded before. that's why i made that plugin
Esteban
Esteban
-
- Joomla! Fledgling
- Posts: 1
- Joined: Sun Aug 16, 2009 3:31 pm
Re: JQuery & Mootools
hello. i can't download the file
- ooffick
- Joomla! Master
- Posts: 11616
- Joined: Thu Jul 17, 2008 3:10 pm
- Location: Ireland
- Contact:
Re: JQuery & Mootools
The file seems to be not available at the moment. Please check back later.
Olaf
Olaf
Olaf Offick - Global Moderator
learnskills.org
learnskills.org
- Esteban Soler
- Joomla! Explorer
- Posts: 339
- Joined: Tue May 29, 2007 6:31 pm
- Location: Mar del Plata (Argentina)
- Contact:
Re: JQuery & Mootools
Hi, i just added that plugin to my website, feel free to download it from there
http://informalthinkers.com/joomla/jsloader/
cheers
Esteban
http://informalthinkers.com/joomla/jsloader/
cheers
Esteban
-
- Joomla! Apprentice
- Posts: 25
- Joined: Sun Aug 02, 2009 2:13 pm
- Location: Washburn, IL
- Contact:
Re: JQuery & Mootools
I haven't tried this but: SC jQuery. Again I haven't tried it but the description looks good!!
-
- Joomla! Apprentice
- Posts: 35
- Joined: Thu Jan 10, 2008 4:42 pm
Re: JQuery & Mootools
Plugin method
Is there any documentation on how to use the plugin? where do I put the files that come in the ZIP file?
Thanks
Is there any documentation on how to use the plugin? where do I put the files that come in the ZIP file?
Thanks