JQuery conflict with Scriptaculous effects.

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

LVL 1
RichardMassAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sh0eCommented:
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
RichardMassAuthor Commented:
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
sh0eCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RichardMassAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.