I have a conflict when I use a jquery script for inline window and prototype to toogle a menu. When I use one of the two is working properly. However when I use them both, only the prototype works. I read about a jquery.noconflict but I can use it correctly. Those are the scripts.
here is my jquery script ( inline window )
<script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to acodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
and this is my prototype script
<script type="text/javascript" src=".7.0.0/prototype.js"></script>
<script type="text/javascript">
// <![CDATA[
// Making sure this code only executes when the document is loaded: this makes the DOM available to us
Event.observe(document, 'dom:loaded', function() {
// for every element with an toggler class...
$$('.toggleExample').each(function(element) {
// we put on an event listener of the click type
Event.observe(element, 'click', function(event){
// We stop the default link behaviour
Event.stop(event);
// when clicked, traverse the DOM: 1 step up (from it's A-element to it's container DIV-element),
// and select its following sibling (next(0)), and toggle that shit.
Event.element(event).up(0).next(0).toggle();
}, false);
});
});
// ]]>
</script>
I have a conflict when I use a jquery script for inline window and prototype to toogle a menu. When I use one of the two is working properly. However when I use them both, only the prototype works. I read about a jquery.noconflict but I can use it correctly. Those are the scripts.
here is my jquery script ( inline window )
<script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to acodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
and this is my prototype script
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript">
// <![CDATA[
// Making sure this code only executes when the document is loaded: this makes the DOM available to us
Event.observe(document, 'dom:loaded', function() {
// for every element with an toggler class...
$$('.toggleExample').each(function(element) {
// we put on an event listener of the click type
Event.observe(element, 'click', function(event){
// We stop the default link behaviour
Event.stop(event);
// when clicked, traverse the DOM: 1 step up (from it's A-element to it's container DIV-element),
// and select its following sibling (next(0)), and toggle that shit.
Event.element(event).up(0).next(0).toggle();
}, false);
});
});
// ]]>
</script>
- 1 If it were mine, I'd convert the Prototype menu toggle function to jQuery and be done with it. – Sparky Commented Jun 7, 2011 at 22:50
- Well this is a work around, but I builted already. I will go for it if i don't get the solution – EnexoOnoma Commented Jun 7, 2011 at 22:52
- Maintaining one library, less conflicts, less JS code to load, etc... you'll be happier when you do. – Sparky Commented Jun 7, 2011 at 22:55
- 1 I tried all the three answers and didn't get it working. I am going with jquery – EnexoOnoma Commented Jun 7, 2011 at 22:59
3 Answers
Reset to default 5Put this right after the embedded jquery.js:
<script type="text/javascript">
$.noConflict();
</script>
And change this line:
$(document).ready(function(){
to
jQuery(document).ready(function($){
First load jQuery and then call
jQuery.noConflict();
//if loaded first, you could also use $.noConflict(),
//but consistency is a good thing
Then continue loading the rest of your stuff (including Prototype, custom scripts, etc).
Finally (and this pertains to your first example above) use the function jQuery where you would normally use $.
Your basic problem is that $ is used by both Prototype and jQuery as a reference to another function. Unfortunately, Prototype more or less requires its $ definition, which means that once its loaded, nothing else should name itself $. jQuery's noConflict method gets rid of the $ method to prevent this problem.
1.- Load jQuery library. 2.- Do your jQuery stuff 3.- Load Prototype library 4.- Do your Prototype stuff
You should use the noConflict function on jQuery, your jQuery stuff should start this way:
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){
//All my jQuery stuff
});
</script>
If you need more info check the jQuery API http://api.jquery./jQuery.noConflict/