Sign in to follow this  
Followers 0

Jquery Conflict

17 posts in this topic

Posted

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?

Share this post


Link to post
Share on other sites

Posted

Give some example code? If you don't give us any help or anything you've tried, we can't help you.

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

Link so I can Firebug it?

Share this post


Link to post
Share on other sites

Posted

Sent you a PM with the website link to firebug.

Share this post


Link to post
Share on other sites

Posted

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>




Your current 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>

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

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>

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

Share this post


Link to post
Share on other sites

Posted

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>

Share this post


Link to post
Share on other sites

Posted (edited)

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

Edited by The Scarecrow

Share this post


Link to post
Share on other sites

Posted

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

Can you change the init script as shown above?

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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 :


});

before:

})(jQuery);

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Posted

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;

}

Share this post


Link to post
Share on other sites

Posted

You are a lifesaver thank you so much for helping me with this.

Share this post


Link to post
Share on other sites

Posted

No problem. We got there in the end. Good luck with your site.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.