troubleshooting Question

JQuery conflict with Scriptaculous effects.

Avatar of RichardMass
RichardMassFlag for Australia asked on
jQuery
4 Comments1 Solution4590 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
sh0e

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros