• 0

Jquery Conflict


Question

I am trying to use a Jquery Slideshow and the Lightwindow 2.0. Their must be a conflict when both on the page neither work. Does anyone have any experience with this and could give me some help?

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

ok I am not sure how much code you want. This about a 9 page html page (including CSS). but I have tried changing the $ to JQ$ in all related documents to the lightwindow. live sample here The lower right hand cornor items ( lowest ones ) are for the lightwindow. (right now it just opens a new window instead of the light window)

The lightwindow and the image slider both use $ in the JQuery and I am guessing that is the problem.

Link to comment
Share on other sites

  • 0

You are getting the following errors:

SCRIPT5009: 'jQuery' is undefined

index2.cfm, line 184 character 1

SCRIPT5009: 'Prototype' is undefined

effects.js, line 138 character 1

SCRIPT5009: 'Class' is undefined

lightwindow.js, line 24 character 1

First things first - you need to put your call to jQuery before you use any jQuery code in the document. (also do the same with your prototype library)

Your prototype script has been commented out? Assuming that you are testing it?

I would also use a different way for no conflict which still lets you use the $ function.

Finally, you can put all your init code together in one document ready function, preferably in an external file too.

Compare the two below:


<!-- CSS -->
<link rel="stylesheet" type="text/css" href="lightwindow/css/lightwindow.css" />
<link rel="stylesheet" href="coin-slider/coin-slider-styles.css" type="text/css" />

<!-- Libraries-->
<script type="text/javascript" src="coin-slider/jquery-1.7.2.js"></script>
<script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>

<!-- required scripts -->
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
<script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
<script type="text/javascript" src="lightwindow/javascript/effects.js"></script>

<!-- init script -->
<script>
// JavaScript Document
$.noConflict();
jQuery(document).ready(function($) {

// Code that uses jQuery's $ can follow here.
//function on links <a>
$("a").click(function(event){
//add a class to your html
//<p class="hideMe">
$(".hideMe").hide("slow");
event.preventDefault();
});

// Coin slider
$('#coin-slider').coinslider({
width: 960,
navigation: false,
delay: 5000
});
});

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>



[/CODE]

Your current code:

[CODE]
<script>
// JavaScript Document
var $jQ = jQuery.noConflict();
$jQ(document).ready(function(){
//function on links <a>
$jQ("a").click(function(event){
//add a class to your html
//<p class="hideMe">
$jQ(".hideMe").hide("slow");
event.preventDefault();
});
});//end document ready function<br>
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="lightwindow/css/lightwindow.css" />
<script type="text/javascript" src="coin-slider/jquery-1.7.2.js"></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
<!--<script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>--->
<script type="text/javascript" src="lightwindow/javascript/effects.js"></script>
<script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="coin-slider/coin-slider-styles.css" type="text/css" />

</script>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 960, navigation: false, delay: 5000 });
});
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
[/CODE]

Link to comment
Share on other sites

  • 0

OK Thanks that makes sense I like your code much more clean. I have implemented this code. Now the slider nor the lightwindow work now.

Link to comment
Share on other sites

  • 0

OK Thanks that makes sense I like your code much more clean. I have implemented this code. Now the slider nor the lightwindow work now.

Ok we can go through one error at a time.

I swapped round these two scripts when i shouldnt have:


<script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
<script type="text/javascript" src="lightwindow/javascript/effects.js"></script>
[/CODE]

Lightwindow requires effects so move the effects one above the lightwindow.

Link to comment
Share on other sites

  • 0

Also there is still a conflict, try this alternative:


<script>
(function($){
// Code that uses jQuery's $ can follow here.
$(document).ready( function(){
//function on links <a>
$("a").click(function(event){
//add a class to your html
//<p class="hideMe">
$(".hideMe").hide("slow");
event.preventDefault();
});
// Coin slider
$('#coin-slider').coinslider({
width: 960,
navigation: false,
delay: 5000
});
})(jQuery);




function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
[/CODE]

Link to comment
Share on other sites

  • 0

I have made that change and I am getting an error on that scripting

Can you change the init script as shown above?

Link to comment
Share on other sites

  • 0

Yes and it tells me there is a Syntax Error on line 269. Which is the end of the script you posted.

Yeah sorry, its missing the closing brackets.

add :


});
[/CODE]

before:

[CODE]
})(jQuery);
[/CODE]

Link to comment
Share on other sites

  • 0

Dude that is so awesome. One problem. The text bar on the image slider appears over the lightwindow. Is there a solution for that?

Link to comment
Share on other sites

  • 0

Dude that is so awesome. One problem. The text bar on the image slider appears over the lightwindow. Is there a solution for that?

Yep thats an easy one. The z-index on your lightwindow is 999, whereas on the coinslider it is 1000.

You could change line 14 of lightwindow.css to the following:


#lightwindow {
display: none;
visibility: hidden;
position: absolute;
z-index: 1001; /* puts the lightwindow above everything else */
line-height: 0px;
}
[/CODE]

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.