1.

Solve : How can I use two different javascript-enabled widgets on the same site??

Answer» Trying to install a slideshow and a quote ROTATOR, and can only GET one to work at a time. I assume the scripts are conflicting, but is there a way around this? Can I just rename one of the [COLOR="Red"]$(document).ready(function()[/COLOR] to like [COLOR="Green"]$(document).ready(function(2)[/COLOR] or something?

This forum tries to explain it to no avail: http://www.codingforums.com/archive/index.php/t-189499.html

And this page seems to hold the answer, but I don't understand it: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Any help would be great.



Here's the code for my slideshow:

Code: [Select]<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
     long as you leave my infos at the top.
-------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element     = this;
var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current     = null;
var timeOutFn   = null;
var faderStat   = true;
var mOver       = false;
var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

   $(items[i]).mouseover(function() {
      mOver = true;
   });

   $(items[i]).mouseout(function() {
       mOver   = false;
       fadeElement(true);
   });

});

var fadeElement = function(isMouseOut) {
   var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
   thisTimeOut = (faderStat) ? 10 : thisTimeOut;
   if(items.length > 0) {
       timeOutFn = setTimeout(makeSlider, thisTimeOut);
   } else {
       console.log("Poof..");
   }
}

var makeSlider = function() {
   current = (current != null) ? current : items[(items.length-1)];
   var currNo      = jQuery.inArray(current, items) + 1
   currNo = (currNo == items.length) ? 0 : (currNo - 1);
   var newMargin   = $(element).width() * currNo;
   if(faderStat == true) {
       if(!mOver) {
           $(items[currNo]).fadeIn((timeOut/6), function() {
               if($(itemsSpan[currNo]).css('bottom') == 0) {
                   $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                       faderStat = false;
                       current = items[currNo];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               } else {
                   $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                       faderStat = false;
                       current = items[currNo];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               }
           });
       }
   } else {
       if(!mOver) {
           if($(itemsSpan[currNo]).css('bottom') == 0) {
               $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                   $(items[currNo]).fadeOut((timeOut/6), function() {
                       faderStat = true;
                       current = items[(currNo+1)];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               });
           } else {
               $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
               $(items[currNo]).fadeOut((timeOut/6), function() {
                       faderStat = true;
                       current = items[(currNo+1)];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               });
           }
       }
   }
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background:#fff;
border:0px solid #fff;
width: 700px;
height: 150px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 700px;
position: absolute;
top:-35px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 3px 0px;
width: 700px;
background-color: #fff;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #000000;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>










And Here's the code for my quote rotator:

Code: [Select]
<script src='http://dl.dropbox.com/u/5739741/testimonials/quote-rotator/Javascript/jquery.pack.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
 $(&#39;#testimonials .slide&#39;);
 setInterval(function(){
  $(&#39;#testimonials .slide&#39;).filter(&#39;:visible&#39;).fadeOut(9000,function(){
   if($(this).next(&#39;li.slide&#39;).SIZE()){
    $(this).next().fadeIn(1500);
   }
   else{
    $(&#39;#testimonials .slide&#39;).eq(0).fadeIn(1500);
   }
  });
 },1500);
});

</script>


I'm not a master at javascript, although I have messed around with it. The only thing I can see is that you're referencing jQuery twice; once in an unpacked form, and once in a PACKED form. I believe the jquery.min.js and jquery.pack.js are the same file, just that one is packed to reduce the overall size. I unpacked it with Malzilla, and they looked similar. Because jQuery registers the use of the $ sign, it may very well be placing duplicate code under the registration. But, I only gave it a cursory GLANCE, so this could very well be incorrect.


Discussion

No Comment Found

Related InterviewSolutions