0

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 $(document).ready(function() to like $(document).ready(function(2) 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:

<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() {
$('#s3slider').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:

<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(){
 $('#testimonials .slide');
 setInterval(function(){
  $('#testimonials .slide').filter(':visible').fadeOut(9000,function(){
   if($(this).next('li.slide').size()){
    $(this).next().fadeIn(1500);
   }
   else{
    $('#testimonials .slide').eq(0).fadeIn(1500);
   }
  });
 },1500); 
});

</script>
2
Contributors
4
Replies
5
Views
6 Years
Discussion Span
Last Post by jonsan32
0

When "importing" javascript, never use the "short" syntax: <script src="..." type="text/javascript" /> Use the "long" syntax: <script src="..." type="text/javascript"[B]></script>[/B] some browsers "choke" if you use the "short" syntax.

Having said that, on the FIRST block of code, fix line 1 so that it uses the "long" syntax. On the SECOND block of code GET RID of line 2. That is ANOTHER copy (but older version) of the jquery library, which you are already including in line 1 of the first block.

0

I have tried to add the </script> to no avail. Thanks a lot, though. Here's more specific info...


When I remove <script src='http://dl.dropbox.com/u/5739741/testimonials/quote-rotator/Javascript/jquery.pack.js' type='text/javascript'/> from the second set of code, the 'quote rotation' effect ceases and the slideshow works.

When I readd it, the 'rotation effect' works again but makes the slideshow disappear.

When I remove the <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> from the first set of code, the slideshow doesn't show.


Here are my actual pages... The slideshow is at the top: http://landonswaysite.blogspot.com/

And here's the testimonial page: http://landonswaysite.blogspot.com/2011/04/testimonials.html (the 'rotation effect' is currently deactivated by the removal of <script src='http://dl.dropbox.com/u/5739741/testimonials/quote-rotator/Javascript/jquery.pack.js' type='text/javascript'/>)


Here's how it currently looks behind the scenes: (just noticed Google never lets me save the </script> part)

<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() {
$('#s3slider').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>
















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

</script>

Edited by jonsan32: n/a

0

on your first block code you have: <script type='text/javascript'>$(document).ready(function() {$('[B]#s3slider[/B]').s3Slider({timeOut: 4000});});</script> which means that somewhere in your HTML there should be an element with id="s3slider" -ex: <div id="s3slider">...</div> and the plugin will "manipulate" whatever is within that div to create that slider.

I DO see that div in http://landonswaysite.blogspot.com/, but NOT in
http://landonswaysite.blogspot.com/2011/04/testimonials.html

Simply copying and pasting the js code from the first page/url onto the second page/url will never work. You need to also provide the required HTML that is "tied" to the js code you pasted.

0

Yea, that might be it. I can't find what to call that div, however. Thanks for the help. As a last shot, below is what I have for the scripts and for the html...
I do have the <div id="s3slider"><ul id="s3sliderContent"><li class="s3sliderImage"> for the slideshow, as you have noted (ironically, that's the one that doesn't work). I don't know what else to add besides <div id="testimonials"><ul id="testimonials"><li class="slide"> for my testimonials page. I got the script from this site (http://www.caodesigns.com/blog/tutorials/create-a-javascript-rotating-quote-section.php?postID=33) if that helps... I don't want to give up, but I will if it's just not possible. Thanks for all the help. I couldn't appreciate it more.


HTML for main page slideshow (http://landonswaysite.blogspot.com/):

<table width=805 height=360 border=0 style="background-image: url(http://i40.photobucket.com/albums/e250/jonsan32/main-4.png); background-repeat: no-repeat;"><tr><td colspan=2 height=180><br />
<br />
<br />
<div align="center"><div id="s3slider"><ul id="s3sliderContent"><li class="s3sliderImage"><br />
<a href="YOUR-LINK-HERE"><img style="width:710px;height:120px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" /><br />
<span>Crysis : Download Full Version</span></a><br />
</li>
<li class="s3sliderImage"><br />
<a href="YOUR-LINK-HERE"><img style="width:700px;height:120px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" /><br />
<span>Halo 3 : Play Game Online</span></a><br />
</li>
<li class="s3sliderImage"><br />
<a href="YOUR-LINK-HERE"><img style="width:700px;height:120px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" /><br />
<span>Avatar : Watch Movie Now !!!</span></a><br />
</li>
<li class="s3sliderImage"><br />
<a href="YOUR-LINK-HERE"><img style="width:700px;height:120px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" /><br />
<span>Call Of Duty 4 : Get Here</span></a><br />
</li>
</ul></div><br />
<div class='clear'></div></div><br />
<br />
<br />
<br />
</td></tr>
<tr><td valign="top" height=220><div align="center">imagelink 1<br />
</div></td>  <td valign="top" height=220><div align="center">imagelink 2<br />
</div></td>  </tr>
</table>

HTML for testimonials page (http://landonswaysite.blogspot.com/2011/04/testimonials.html):

<style type='text/css'>
#testimonials {width: 500px} 
#testimonials .slide {list-style-type: none;line-height: 24px} 
blockquote {font-size: 18px;font-family: Trebuchet MS;color: #000;font-style: italic}
</style>





<table width=800>
<tr><td valign="top" height=250>

<div align="center">
<div id="#testimonials .slide">
<ul id="testimonials">
<li class="slide">
<blockquote>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum velit quis lorem bibendum commodo. Quisque dolor ipsum."
- Roscoe Jenkins</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>
"I had an absolutely wonderful experience. I recommend to all."
- Maria Espinoza</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>
"Goodness gracious, great balls of fire!"
- Jon Sanders</blockquote>
</li>
</ul>
</div></div>

</td></tr>
<tr><td><div align="right">
<a href="http://landonswaysite.blogspot.com/2011/04/add-your-testimonial.html">Add Your Testimonial</a>
</div>
</td></tr>
</table>

script for both...

<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() {
$('#s3slider').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>













<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(){
 $('#testimonials .slide');
 setInterval(function(){
  $('#testimonials .slide').filter(':visible').fadeOut(9000,function(){
   if($(this).next('li.slide').size()){
    $(this).next().fadeIn(1500);
   }
   else{
    $('#testimonials .slide').eq(0).fadeIn(1500);
   }
  });
 },1500); 
});

</script>

Edited by jonsan32: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.