Solved

JQuery conflict with Scriptaculous effects.

Posted on 2008-10-28
4
4,077 Views
Last Modified: 2012-06-27
Hi all, as some of you may be aware (those who have helped me over the last few days), I am struggling to pick up this JQuery stuff. I seem to be running into minor problem after problem and unfortunately my javascript skills are weak.

Ok, here's my latest issue...

I am looking at using Scriptaculous and JQUERY in the same page however it appears to conflict with each other. Using the script below, the #test div should fade in using scriptaculous and the JQUERY (innerfade) script will control the portfolio ui.

Using the code below the the #test div fades in properly, but the portfolio ui shows all three images down the page. If I move the src="javascript/jquery.js" below the scriptaculous calls all effects stop working.

Any support would be greatly appreciated and if required, I am happy to further clarify my issue.

Richard.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script type="text/javascript" src="javascript/jquery.innerfade.js"></script>

<script type="text/javascript" src="javascript/jquery.js"></script>

<script type="text/javascript" src="javascript/scriptaculous.js"></script>

<script type="text/javascript" src="javascript/prototype.js"></script>

<script type="text/javascript" src="javascript/effects.js"></script>

<script type="text/javascript">

window.onload = begin;

 

function begin()

{

new Effect.Appear(document.getElementById('test'), { duration: 2.0, delay: 0});

}

</script>
 

<script type="text/javascript">

	   jQuery(document).ready(

				function(){

					$('ul#portfolio').innerfade({

						speed: 1000,

						timeout: 5000,

						type: 'sequence',

						containerheight: '108px'

					});

			});

  	</script>
 

</head>
 

<body>
 

<div id="test" style="background:#666666;width:900px;height:600px;margin:0 auto 0 auto;display:none">

  <ul id="portfolio">					

    <li><img src="images/1.gif" /></li>

	<li><img src="images/2.gif" /></li>

	<li><img src="images/3.gif" /></li>				

  </ul>

</div>
 

</body>

</html>

Open in new window

0
Comment
Question by:RichardMass
  • 2
  • 2
4 Comments
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
You cannot use the $ macro for jQuery if you are using Prototype (Scriptaculous).  They both use that name, and jQuery allows Prototype to override the $ macro.
This is a feature that allows jQuery to interoperate with most scripts.

You can also use something like
var j = jQuery.noConflict();
j(document).ready( ...
j('ul#portfolio').innerfade({ ...

or even
(function($){
$(document).ready( ...
$('ul#portfolio') ...
})(jQuery);
<script type="text/javascript">

           jQuery(document).ready(

                                function(){

                                        jQuery('ul#portfolio').innerfade({

                                                speed: 1000,

                                                timeout: 5000,

                                                type: 'sequence',

                                                containerheight: '108px'

                                        });

                        });

        </script>

Open in new window

0
 
LVL 1

Author Comment

by:RichardMass
Comment Utility
Sorry Sh0e, I'm not following at all. I have read up on the conflict issue so I'm all over that (lol) but I'm not following your solution.

If possible and you have the time, I would love some further clarification on how to use your suggestion. Man I owe you a decent bottle of scotch. hehehe.

Thank you again for putting up with me.  :-)
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
Comment Utility
No trouble at all.  Actually I enjoy this.

I'm not sure I will be able to explain this properly.
You can get away with just using jQuery() instead of $() as long as you include jQuery before other libraries.
It's just more typing.  For lazy people like me, I much like typing 1 char rather than a whopping 6.
So I might do something like j=jQuery; or use a function enclosure

I also want to point out to you that your library inclusion order is not right, and that it makes a difference.
Scriptaculous depends on Prototype, so Scriptaculous must be included after Prototype.

jQuery.innerfade depends on jQuery, so it must be included after jQuery.

If you want to include a library like Prototype before jQuery, you need to call jQuery.noConflict() before you include Prototype.  It might look something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.richardmassey.com.au/javascript/jquery.innerfade.js"></script>
<script type="text/javascript">
var jj = jQuery.noConflict(); //saved jQuery object to jj and restore $ to Prototype
...rest of code

Another neat trick is to use function enclosures.  (function($){//I can use $ for jQuery in here})(jQuery);


Below is code that will work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript" src="http://www.richardmassey.com.au/javascript/jquery.innerfade.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>

<script type="text/javascript">

window.onload = begin;

 

function begin()

{

new Effect.Appear(document.getElementById('test'), { duration: 2.0, delay: 0});

}

</script>

 

<script type="text/javascript">

         (function($){

           $(document).ready(

                                function(){

                                        $('ul#portfolio').innerfade({

                                                speed: 1000,

                                                timeout: 5000,

                                                type: 'sequence',

                                                containerheight: '108px'

                                        });

                        });

          })(jQuery);

        </script>

 

</head>

 

<body>

 

<div id="test" style="background:#666666;width:900px;height:600px;margin:0 auto 0 auto;display:none">

  <ul id="portfolio">                                   

    <li><img src="images/1.gif" />111</li>

        <li><img src="images/2.gif" />222</li>

        <li><img src="images/3.gif" />333</li>                             

  </ul>

</div>

 

</body>

</html>

Open in new window

0
 
LVL 1

Author Comment

by:RichardMass
Comment Utility
Thank you so much... I was just about to reply here and say that I managed to get it going after all using the script below. Both seem to work and I am so sorry for not getting back to you before you spent all that time getting it fixed.

Again, thank you heaps.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script type="text/javascript" src="javascript/scriptaculous.js"></script>

<script type="text/javascript" src="javascript/prototype.js"></script>

<script type="text/javascript" src="javascript/effects.js"></script>

<script type="text/javascript" src="javascript/jquery.js"></script>

<script type="text/javascript" src="javascript/jquery.innerfade.js"></script>

<script type="text/javascript">

window.onload = begin;

 

function begin()

{

new Effect.Appear(document.getElementById('test'), { duration: 2.0, delay: 0});

}

 </script>

<script type="text/javascript"> 

		     jQuery.noConflict();

		     	jQuery(document).ready(function($){ 

		        $('ul#portfolio').innerfade({

		        speed: 1000,

		        timeout: 5000,

		        type: 'sequence',

		        containerheight: '170px'

		        });

		    }); 

		</script>
 
 

</head>
 

<body>
 

<div id="test" style="background:#666666;width:900px;height:600px;margin:0 auto 0 auto;display:none">

  

  <ul id="portfolio" style="list-style:none;margin:0;padding:0">					

    <li><img src="images/1.gif" /></li>

	<li><img src="images/2.gif" /></li>

	<li><img src="images/3.gif" /></li>								

  </ul>

  

</div>
 

</body>

</html>

Open in new window

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now