...

View Full Version : Prototype and jquery conflict



Gnowoga
07-22-2008, 04:50 PM
First of all. I know no javascript whatsoever. That's why I am asking here.

I have these files included:


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>


and it seems like the jquery files from the codaslider breaks the lightbox, so now images opens in new window like normal. The site ignores the lightbox stuff.

It's obvious that there's some kind of conflict here.
What should I do? Any help is really appreciated

PremiumBlend
07-23-2008, 04:55 AM
jQuery will allow it's object to be assigned to something other than $, so you can run something like this:



var $$ = jQuery.noConflict();
// Do something with jQuery
$$("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';


Check out this link for more info: http://docs.jquery.com/Core/jQuery.noConflict

GJay
07-23-2008, 07:11 AM
Prototype has a $$ function as well though, so set it to something else :)

Or find a lightbox that works with jquery.

PremiumBlend
07-23-2008, 03:20 PM
I wasn't aware of the $$ in prototype. Good to know!

Here's a jQuery lightbox plugin: http://www.balupton.com/sandbox/jquery_lightbox/

Gnowoga
07-25-2008, 11:54 AM
Thank you so much for the help. I am going to the jquery lightbox then, since I have no idea how to implement that jquery fix. :)

Thanks again!

A1ien51
07-25-2008, 02:59 PM
On the front of JQuery's website there is this link: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Eric

Gnowoga
07-31-2008, 11:09 PM
So I applied


<script>
jQuery.noConflict();

// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();
</script>

after my js includes and no luck, no change.

Do I have to edit that code some way to match what I want to do?

Gnowoga
08-04-2008, 09:50 PM
I realise I have to edit the noConflict code somehow, though I do not know how.

As mentioned I am using codaslider and lightbox 2:
http://jqueryfordesigners.com/coda-slider-effect/
http://www.huddletogether.com/projects/lightbox2/

Any and all help is truly appreciated!

fusionstrings
03-20-2009, 07:44 AM
try to use this

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();
</script>

Its from same jQuery official page "http://docs.jquery.com/Using_jQuery_with_Other_Libraries" you might have visited already.

This solution worked for me. Which is under heading "Including jQuery before Other Libraries".

Try to include jquery before prototype. use "jQuery" instead of "$". and There is no need for overriding the $-function by calling "jQuery.noConflict()". also remove "$" given as argument if using following solution.

jQuery.noConflict();

// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});

notice the "$" as argument in "jQuery(document).ready(function($){".

Hope it'll help.

tman0410
05-22-2009, 09:23 AM
If you can change $ variable in jquery you can also change the same variable in prototype and that's what I did. It worked for me. I replaced all $ to $$$ in prototype.js.

tung148
06-01-2009, 04:37 AM
Thanks :thumbsup:

Bert_R
01-18-2010, 07:28 PM
Hi

I think I have a simular problem.
Could you pls look at my testpage here:
http://www.bertismy.name/fff/

FF and IE are reacting different.

Gremlyn1
01-19-2010, 05:03 PM
To avoid problems with Prototype, I use the no conflict as in my example:


var $j = jQuery.noConflict();
$j(document).ready(function() {

//Enter jQuery code here
$j('form').submit();

});


Works perfectly!

PraveenBattula
03-29-2010, 07:03 AM
Here is more detailed explanation and work around.
http://praveenbattula.blogspot.com/2010/02/jquery-conflict-when-using-different.html

alin_mircea
06-22-2010, 11:15 AM
If you can change $ variable in jquery you can also change the same variable in prototype and that's what I did. It worked for me. I replaced all $ to $$$ in prototype.js.

I anyone tries this try not do do a 'replace all' on $ with `new name`

You have to worry about

regexps
this.replace(filter || Prototype.JSONFilter, '$1');
JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,

and other functions
$A(arguments);

try a regexp replace all such as \$\s*\(

devonssmart
07-15-2011, 05:34 PM
I am using this plugin :
http://leandrovieira.com/projects/jquery/lightbox/

code:balm
10-07-2011, 08:47 PM
Hi I am new to this forum but I am having a similar problem in that I am trying to use a jquery light box and a jquery spy plugin at the the same time. the spy works but after the images are brought in the lightbox no longer works

Here is my code

<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript" charset="utf-8">
$(function() {
$('a').lightBox();
});


$(function () {
$('ul.spy').simpleSpy().bind('mouseenter', function () {
$(this).trigger('stop');
}).bind('mouseleave', function () {
$(this).trigger('start');
});
});
(function ($) {

$.fn.simpleSpy = function (limit, interval) {
limit = limit || 3;
interval = interval || 6000;

return this.each(function () {
// 1. setup
// capture a cache of all the list items
// chomp the list down to limit li elements
var $list = $(this),
running = 'true',
items = [], // uninitialised
currentItem = limit,
total = 0, // initialise later on
height = $list.find('> li:first').height();

// capture the cache
$list.find('> li').each(function () {
items.push('<li>' + $(this).html() + '</li>');
});


total = items.length;

$list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });

$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

$list.bind('stop', function () {
running = false;
}).bind('start', function () {
running = true;
});

// 2. effect
function spy() {

if (running) {

// insert a new item with opacity and height of zero
var $insert = $(items[currentItem]).css({
height : 0,
opacity : 0,
display : 'none'
}).prependTo($list);

// fade the LAST item out
$list.find('> li:last').animate({ opacity : 0}, 1000, function () {
// increase the height of the NEW first item
$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

// AND at the same time - decrease the height of the LAST item
// $(this).animate({ height : 0 }, 1000, function () {
// finally fade the first item in (and we can remove the last)
$(this).remove();
// });
});

currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
}
setTimeout(spy, interval)
}

spy();
});

};

})(jQuery);


</script>

Any help would be greatly appreciated



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum