Posted by policleto on February 22, 2007 at 3:29pm
I'm trying to get slimbox to work in my Drupal 5 installation.
I'm using Slimbox to show images and mootools is required.
None of the javascript works after I insert javascript inclusion for Slimbox.
jQuery seems to be messed up by this co-existece with mootols code.
I do not want to use Thickbox for various reason.
How can I drive to use both jQuery and mootools without conflicts?
Thanks for any help in advanced.
Comments
Mootools problem
The problem with using Mootools and jQuery together is that they have some identically named functions and namespaces which means they conflict with each other. This looks like it would be some work to resolve, but it should be worth it.
Dave
My site: http://davidwees.com/myblog
So, is there any way to
So, is there any way to these two scripts work together?
Muškarac.com
My site
in my site it is working fine http://asitusi.net
Use jQuery's built in noConflict() method
Actually jQuery has a built in
noConflict()method that helps you resolve this method. You can read it in more details and see some usage example at jQuery HowTo - .noConflict().One more elegant way of solving this problem is to use this little javascript workaround:
function($){// now put your jQuery code here
// that uses $ function
}(jQuery);
-------------------------------
Read jQuery tutorials & tips at jQuery HowTo Collection
your site
the side scrollbar does not work in IE...have you found a way to fix this yet?
Imagebox?
How about using Imagebox instead? It's based on JQuery and comes a lot closer to Slimbox/Lightbox2
Thickbox?
http://drupal.org/project/thickbox
need to rewrite all scripts
policleto, to get Slimbox working with the drupal jquery stuff, all of the javascripts included in drupal need a rewrite.
jquery has a compatibility mode called noConflict, which mootools has not.
In noconflict mode, all insances of '$' are replace with 'jquery'.
Example (part of autocomplete.js)
Drupal.autocompleteAutoAttach = function () {var acdb = [];
$('input.autocomplete').each(function () {
var uri = this.value;
if (!acdb[uri]) {
acdb[uri] = new Drupal.ACDB(uri);
}
var input = $('#' + this.id.substr(0, this.id.length - 13))
.attr('autocomplete', 'OFF')[0];
$(input.form).submit(Drupal.autocompleteSubmit);
new Drupal.jsAC(input, acdb[uri]);
});
}
has to look like this:
Drupal.autocompleteAutoAttach = function () {var acdb = [];
jQuery.noConflict();
jQuery('input.autocomplete').each(function () {
var uri = this.value;
if (!acdb[uri]) {
acdb[uri] = new Drupal.ACDB(uri);
}
var input = jQuery('#' + this.id.substr(0, this.id.length - 13))
.attr('autocomplete', 'OFF')[0];
jQuery(input.form).submit(Drupal.autocompleteSubmit);
new Drupal.jsAC(input, acdb[uri]);
});
}
thats it.
For my own page (http://www.human-aspects.com), I rewrote some of the cores javascripts and they really work fine with mootools, which I use for my menu, slideshow and tooltips. It's not much work to rewrite the scripts, but it is the only way.
As it is only a very small change in every script, I'd like to encourage all module contributors to use jquery's noconflict mode.
---8<--------------------------------
http://www.human-aspects.de
Do you have a list of files that you edited?
Do you have a list of files that you edited? I need to do the same thing on this end.
--
@kragtbakker
nearly every js file
lpkb, it is nearly every - if not all - javascript file in drupalroot/misc:
animateClass.js
autocomplete.js
collapse.js
drupal.js
farbtastic.js
gfxtext.js
jquery.js
progress.js
tableselect.js
textarea.js
update.js
upload.js
just run a 'find file' for *.js on your complete drupal folder. examine each file for occurences of '$()'.
---8<--------------------------------
http://www.human-aspects.de
thanks...
thanks for the response...i'll add it to my to-do list. ;)
peace.
--
@kragtbakker
Can I get a bit of clarification?
Hi,
I need to get mootools working too. I'm happy to amend any and all files to get it so and spend the time to do it. I've tried this, but fairly sure I was doing it wrong - as it didn't work ;)
Take the
autocomplete.jsfile:I get it for the example above
jQuery.noConflict();is placed IN the function AFTER the variables are defined.Do I need to put in the
jQuery.noConflict();again here?Drupal.autocompleteSubmit = function () {
*****DOES THE CODE GO IN HERE ???******
return $('#autocomplete').each(function () {
this.owner.hidePopup();
}).size() == 0;
}
Does this
jQuery.noConflict();need to go in every function that has a$(.....in it - which will be changed to$jQuery(....?Also what about the files such as
jquery.js- does this need to be altered? The code is all on one line and so forth.Realise these these may be obvious questions but would appreciate someone baby-stepping me through this if possible (I'm sure it'll be useful to others) or perhaps making the altered .js files available?
Many thanks for any help!
baronmunchowsen, to clear it up a little
Th code snippet you submitted has to look like this after editing:
Drupal.autocompleteSubmit = function () {
jQuery.noConflict();
return jQuery('#autocomplete').each(function () {
this.owner.hidePopup();
}).size() == 0;
}
See? You need to replace all occurrences of '$', so if there are more '$' in the javascript function, replace them with jQuery.
To explain it: '$' is used as a variable name or better object name by jQuery, AND it is used by other libs like mootools as well.
Both simply interfere.
Let's say, jQuery runs and creates an Object named '$' with jQuery-specific functions a,b and c.
Then mootools is launched, creates its '$'-Object with mootools-specific functions b,d and k.
The object itself gets simply overwritten, some functions may be named the same.
If now a jQuery-Script tries to access jQuery-function a in Object '$', there is ... well ... nothing.
I posted a list of files above, which need to be edited. There are definitly more files to be edited, if you installed modules depending on jQuery.
Until now, I found no other way as putting jQuery.noConflict(); in every function, sorry.
But it is not that much work.
Oh, and don't touch jquery.js itself, the file is normally compressed, I don't think that you even might be able to read that one.
Just do the editing js-File by js-File, different pages use different js-uncludes, so you will have to poke around and find the pages using jQuery-Stuff interfering with your mootools-lib.
I use Firefox and Firebug to debug the scripts, looking for errors thrown. If a function misbehaves, I edit it and debug it with Firebug to see, if the error still exists.
I thought about creating a project with the altered js-Files and asked the Drupal maintainers for advice how to do this best, but didn't receive an answer by now.
Actually this will take some time, maybe I can do it this evening, if it's ok with you.
Does that help?
---8<--------------------------------
http://www.human-aspects.de
Hi suit4, Okay - that's
Hi suit4,
Okay - that's fairly clear, however, couple more questions for you:
For javascript files that have MORE THAN 1 function defined in them? Do I need to apply the noConflict to each of these functions?
For instance, autocomplete contains 17 functions:
Drupal.autocompleteAutoAttach = function () {Drupal.autocompleteSubmit = function () {
Drupal.jsAC = function (input, db) {
Drupal.jsAC.prototype.onkeydown = function (input, e) {
Drupal.jsAC.prototype.onkeyup = function (input, e) {
Drupal.jsAC.prototype.select = function (node) {
Drupal.jsAC.prototype.selectDown = function () {
Drupal.jsAC.prototype.selectUp = function () {
Drupal.jsAC.prototype.highlight = function (node) {
Drupal.jsAC.prototype.unhighlight = function (node) {
Drupal.jsAC.prototype.hidePopup = function (keycode) {
Drupal.jsAC.prototype.populatePopup = function () {
Drupal.jsAC.prototype.found = function (matches) {
Drupal.jsAC.prototype.setStatus = function (status) {
Drupal.ACDB = function (uri) {
Drupal.ACDB.prototype.search = function (searchString) {
Drupal.ACDB.prototype.cancel = function() {
Do I need to add
jQuery.noConflict();to all these, and shouldjQuery.noConflict();be place IMMEDIATLEY on the first line of the function?Also, what about the code at the bottom of this javascript file for instance:
// Global Killswitchif (Drupal.jsEnabled) {
$(document).ready(Drupal.autocompleteAutoAttach);
}
This is not a function, but contains a $. I assume this needs to be changed also. Do I need to add
jQuery.noConflict();to make this code:// Global Killswitchif (Drupal.jsEnabled) {
jQuery.noConflict();
jQuery(document).ready(Drupal.autocompleteAutoAttach);
}
Also, do I need to upgrade the jquery.js file to the most recent release?
Many thanks. Also see: http://drupal.org/node/162346 for another discussion where another user is suggesting another way around this (which I couldn't get to work also).
Baron
H Baron
I just checked the discussion under http://drupal.org/node/162346, and tried that way on my own page.
It works really fine, so as far as it is much less writing, I suggest to use his way of wrapping the js code with
(function($){// original content
})(jQuery);
The only exception I found is drupal.js, which has to be modfied differently, otherwise I got errors.
I had to sturt under the first code line like this
var Drupal = Drupal || {};
(function($){
// original content
...
})(jQuery);
As I said, this solution works well and is much less coding, so prefere that one.
Upgrading to the latest version of jQuery might be worth a try, but keep the original backed up.
So, if all still does not work, is there a way to let me look at your code, maybe you've got a link to your page?
Which browser are you running to test your site?
---8<--------------------------------
http://www.human-aspects.de
Hi suit4
Yes - that's great.
I haven't lost any of the functionality of drupal and now have my mootools slideshow working which is fantastic news.
One thing I would note is that the autocollapse isn't working as it normally would. The transitions are not smooth, and they won't collapse up to a hidden state, only down. This isn't a problem though as you can still access all the form fields within the collapsed fieldsets.
Many thanks for your assistance on this.
Baron
Patch?
If someone could post a working patch of this, that would be great. It sounds to me like there are some bugs with textarea.js and the jQuery.noConclict() set-up which need to be worked out.
Dave
My site: http://davidwees.com/myblog
this works great...however i
this works great...however i am unable to get both scripts to run on IE firefox i have no issues....is there a fix for this?
this is my code......
window.addEvent('domready',function(){
var startItem = 3; //or 0 or any
var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').setOpacity(0.8);
var fxOptions7 = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
var thumbsFx = new Fx.Style(thumbs_mask7,'left',fxOptions7);
var hs7 = new noobSlide({
box: $('box7'),
items: [0,1,2,3,4,5,6,7],
handles: $ES('span','thumbs_handles7'),
fxOptions: fxOptions7,
onWalk: function(currentItem){
thumbsFx.start(currentItem*60-568);
},
startItem: startItem
});
hs7.walk(0);
});
jQuery(function() {
jQuery.noConflict();
jQuery('#banners').cycle({
fx: 'scrollUp',
speed: 150
,
timeout: 3000
});
});
Thank you SOOO MUCH!
Thank you so much! I was beating my head against the wall trying to get this mootools and jquery to work, and I did exactly as you said rebuilding the js and replacing the "$" with "jQuery" instead. This is great to know for the future. Again much thanks!
slimbox plugin
A Slimbox plugin for Drupal would be soooooo cool.
Nicolas
-------------------------
http://nic.ipwa.net
JQuery and Prototype!
hello!
just came by to give a big thanks to this community, willing to share its knowledge....
it is so hard to find good post´s about mixing the few of the most comprehensive scripts nowdays!
actually i wanted to pass the information that this threads that show how to alter jquery to work with other scripts (mootools in this case) works also with prototype script....
so if you have mix of ( or you are thinkig of ) jquery and prototype just go for it and make the change... actually is very easy, easier than that sound on first step, and it works!!!
i ve, mixed Prototype´s lightwindows (witch i consider one of the coolest ´lightbox´scripts) and latest jquery (i.e.version 1.2.1.) along with whole bunch of other jquery plugin´s....
so if you are willing go for it, it´s worth trying... but remember dont try- do it! :-)
cheers!
esh
Slimbox2
Hi all,
I've noticed that a lot of people want to use Slimbox, including on websites using jQuery. jQuery is now the standard javascript library in many big CMS and weblogs like Drupal or Wordpress.
So, I've got great news for you: Slimbox2 will use jQuery! And the code will be even smaller than the code of Slimbox1. Slimbox2 will be the smallest lightbox clone in the world (if you exclude the size of the jQuery library which is slightly bigger than mootools, of course).
Then later, I'll work on a Drupal module that will seamlessly integrate Slimbox2 with Drupal.
Re: Slimbox2
I was looking around trying to find a way to get slimbox working with drupal, but what you said is even better.
Any eta or is it too early to make any guesses?
can't seem to figure out noconflict
i'm using this with mootools and slimbox, so in total i have these:
since installing jquery and jcarouselite, slim ox won't work and i just don't really know how i'm meant to modifiy the jquery stuff to work in no conflict mode, can anyone show me what to do to these to scripts step by step?