Solved

JQuery conflict with Scriptaculous effects.

Posted on 2008-10-28
4
4,092 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
ID: 22827149
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
ID: 22827253
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
ID: 22827353
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
ID: 22827459
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

920 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

17 Experts available now in Live!

Get 1:1 Help Now