We help IT Professionals succeed at work.
Get Started

JQuery conflict with Scriptaculous effects.

RichardMass
RichardMass asked
on
4,576 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

Comment
Watch Question
Commented:
This problem has been solved!
Unlock 1 Answer and 4 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE