Jump to content



Photo

Jquery Conflict


  • Please log in to reply
16 replies to this topic

#1 The Scarecrow

The Scarecrow

    The Scarecrow

  • Joined: 01-August 05
  • Location: Indiana

Posted 08 April 2013 - 19:44

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?


#2 n_K

n_K

    Neowinian Senior

  • Tech Issues Solved: 3
  • Joined: 19-March 06
  • Location: here.
  • OS: FreeDOS
  • Phone: Nokia 3315

Posted 08 April 2013 - 19:54

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

#3 OP The Scarecrow

The Scarecrow

    The Scarecrow

  • Joined: 01-August 05
  • Location: Indiana

Posted 08 April 2013 - 20:16

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.

#4 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 08 April 2013 - 20:24

Link so I can Firebug it?

#5 OP The Scarecrow

The Scarecrow

    The Scarecrow

  • Joined: 01-August 05
  • Location: Indiana

Posted 08 April 2013 - 22:20

Sent you a PM with the website link to firebug.

#6 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 09 April 2013 - 11:01

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>


#7 OP The Scarecrow

The Scarecrow

    The Scarecrow

  • Joined: 01-August 05
  • Location: Indiana

Posted 09 April 2013 - 12:48

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.

#8 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 09 April 2013 - 13:27

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.

#9 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 09 April 2013 - 13:44

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>


#10 OP The Scarecrow

The Scarecrow

    The Scarecrow

  • Joined: 01-August 05
  • Location: Indiana

Posted 09 April 2013 - 13:52

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

Edited by The Scarecrow, 09 April 2013 - 13:54.


#11 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 09 April 2013 - 14:16

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

Can you change the init script as shown above?

#12 OP The Scarecrow

The Scarecrow

    The Scarecrow

  • Joined: 01-August 05
  • Location: Indiana

Posted 09 April 2013 - 14:26

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

#13 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 09 April 2013 - 14:42

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);


#14 OP The Scarecrow

The Scarecrow

    The Scarecrow

  • Joined: 01-August 05
  • Location: Indiana

Posted 09 April 2013 - 14:46

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

#15 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 09 April 2013 - 15:02

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;
}