PDA

View Full Version : Moo Tools breaks conveyor belt slideshow?



thenajsays
07-10-2009, 09:18 PM
my test page is here (http://casadomani.com/indextest.html)

for some reason the conveyor belt slideshow doesnt "slide"
any ideas?

before i had all the fancy mootools effects the slideshow worked just fine.

thenajsays
07-10-2009, 09:22 PM
ALSO, im puzzled as to why the scrollbar appears at the bottom now. it didnt do that before i added mootools and it doesnt appear if i remove the slideshow...

thenajsays
07-13-2009, 07:49 PM
anyone? come on! i cant believe NO ONE has anything on this?

thenajsays
08-19-2009, 08:12 PM
seriously??? no one has ANYTHING?

thenajsays
08-20-2009, 12:00 PM
ok, ive narrowed it down to the sliding module (slideleft) refusing to fire after all the mootools effects have taken place... i even tried to edit the "fillup" module to remove the call to slideleft and made slideleft a delayed onLoad event and it still wont fire... the weirdest part is that if i delay "fillup" from firing until all the mootools effects have completed, it works, but i hate the look...

vwphillips
08-20-2009, 01:32 PM
try


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;overflow:hidden;width:800px;height:135px;border:solid black 1px;
}

.slide {
position:absolute;width:10000px;height:135px;

}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function SS(id,spd){
var obj=document.getElementById(id);
var slide=obj.getElementsByTagName('DIV')[0];
var imgs=slide.getElementsByTagName('IMG');
for (var lft=0,z0=0;z0<imgs.length;z0++){
imgs[z0].style.position='absolute';
imgs[z0].style.left=(lft)+'px';
lft+=imgs[z0].width;
}
slide.style.width=lft+'px';
this.max=lft;
this.ary=[slide,slide.cloneNode(true)];
this.ary[1].style.left=this.max+'px';
obj.appendChild(this.ary[1]);
this.pos=[0,this.max];
this.spd=spd||1;
this.to=null;
}


SS.prototype.Rotate=function(srt){
clearTimeout(this.to);
for (var z0=0;z0<this.ary.length;z0++){
this.pos[z0]-=this.spd;
if (this.pos[z0]<-this.max) this.pos[z0]=this.max-this.spd;
this.ary[z0].style.left=this.pos[z0]+'px';
}
var oop=this;
if (srt) this.to=setTimeout(function(){ oop.Rotate(srt); },10);
}

/*]]>*/
</script>

</head>

<body >
<div id="tst" onmouseover="if (S) S.Rotate();" onmouseout="if (S) S.Rotate(true);">
<div class="slide">
<img src="http://casadomani.com/images/slideshow/IMG_0907.jpg">'
<img src="http://casadomani.com/images/slideshow/IMG_0916.jpg">
<img src="http://casadomani.com/images/slideshow/IMG_0934.jpg">
<img src="http://casadomani.com/images/slideshow/IMG_0928.jpg">
<img src="http://casadomani.com/images/slideshow/IMG_0989.jpg">
<img src="http://casadomani.com/images/slideshow/IMG_0998.jpg">
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
S=new SS('tst',.5);
S.Rotate('true');
/*]]>*/
</script>
</body>

</html>

thenajsays
08-20-2009, 03:45 PM
thanks, ill give that a try! does it load multiple random slides or is t just thoes slides in order?

thenajsays
08-20-2009, 08:27 PM
only works if i dont implement it to the entire site... i got something workable now, check out the test again!
i have another issue if you wouldnt mind taking a look vic... the page loads perfectly in FF and chrome... but does some funky stuff in IE... can you take a look please?

vwphillips
08-21-2009, 09:58 AM
.mainBody {
width:900px;
background-color:#F0FFF0;
overflow: hidden;
margin-right: auto;
margin-left: auto;
display:none;
}


the display:none is causing the problem

using my code


<script type="text/javascript">
/*<![CDATA[*/
var S=false;
function Init(){
S=new SS('tst',1);
S.Rotate('true');
}
setTimeout(function(){ Init(); },5000)
/*]]>*/
</script>


activates the slide show after the effects have completed, and works