Solved

JQuery conflict with Scriptaculous effects.

Posted on 2008-10-28
4
4,174 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

Question has a verified solution.

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

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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)

627 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