Solved

JQuery conflict with Scriptaculous effects.

Posted on 2008-10-28
4
4,099 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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)

778 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