PDA

View Full Version : Continous marquee not continous at all..



DarkWolfXP
06-02-2009, 07:01 PM
Hello! This is the first time I am posting in this forum.
I tried to inser this script into my website:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I wanted a continuous marquee of images for the website but when I inserted the script from that page and resized to 980px, the script isn't continous at all...
http://www.imagedash.com/uploads/qji1243969222v.jpg
As this image shows you, you can see there is a blank space there and I know that when I resized the width the script didn't exactly resized itself to that width and now the cicle starts only after that big blank space...
I tried to look at the coding but I don't have much knowledge in Javascript...
I would apreciate any help you guys could give me!

Thank you for your attention

vwphillips
06-03-2009, 10:58 AM
try

http://www.vicsjavascripts.org.uk/ContinuousScrollII/ContinuousScrollII.htm

DarkWolfXP
06-03-2009, 03:21 PM
First of all thank you for your reply.
I tried to create a testing page to try that script and unfortunatly I wasn't able to run it :(
I tried to paste the code of the page, but it was too long so I just inserted the code in this page:
http://paste.ideaslabs.com/show/bEWP6ydXPD and you can see what I did
Basically I just pick the code from the tab "Code" and inserted into my test html file, between <script> tags and then I inserted the code from the tab "HTML", and it doesn't work

vwphillips
06-04-2009, 09:26 AM
you have not included the CSS or initialised the script which is explained in the application notes.

see




<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

#tst2 {
position:absolute;overflow:hidden;left:40px;top:400px;width:800px;height:100px;border:solid black 1px;background-Color:#FFFFCC;
}

#tst2 DIV{
width:310px;
}

</style>

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

// Continuous ScrollerII (22-April-2009)
// by: Vic Phillips http://www.vicsjavascripts.org.uk

// removed to allow posting

// **** Functional Code(3.42K) - NO NEED to Change.

function zxcCScroller(oop,run,ud,spd,hold,holdpos){
if (typeof(oop)=='object'&&oop.scroll){
clearTimeout(oop.to);
clearTimeout(oop.sto);
if (typeof(run)=='boolean') oop.run=run;
else if (typeof(run)=='string') oop.run=!oop.run;
if (typeof(ud)=='number') oop.ud=ud;
else if (typeof(ud)=='string') oop.ud=-oop.ud;
oop.spd=typeof(spd)=='number'?spd:oop.spd;
oop.hold=typeof(hold)=='number'?hold:oop.hold;
oop.holdpos=typeof(hold)=='number'?holdpos:oop.holdpos;
if (oop.run) oop.scroll();
}
}

function zxcCSScroll(oop,ud,spd){
if (typeof(oop)=='object'&&oop.scroll&&typeof(ud)=='number'){
zxcCScroller(oop,false);
if (ud==0) return;
spd=spd||10;
oop.scroll(ud*123);
// oop.sto=setTimeout(function(){ zxcCSScroll(oop,ud,spd); },spd);
}
}

function zxcCScrollerInit(mde,id,ud,spd,hold,holdpos,srt){
var p=document.getElementById(id);
mde=(typeof(mde)=='string'?(mde+' '):' ').charAt(0).toLowerCase();
if ((mde!='v'&&mde!='h')||!p) return;
if (!p[mde+'scroll']) return p[mde+'scroll']=new zxcCScrollerOOP(mde,id,ud,spd,hold,holdpos,srt);
var oop=p[mde+'scroll']
clearTimeout(p.to);
oop.spd=spd||oop.spd;
oop.ud=ud||-oop.ud;
return oop;
}

function zxcCScrollerOOP(mde,id,ud,spd,hold,holdpos,srt){
var p=document.getElementById(id);
p.style.overflow='hidden';
this.p=p;
this.mde=mde;
this.vh=mde=='v'?'top':'left';
var os=mde=='v'?['offsetHeight','offsetTop','height']:['offsetWidth','offsetLeft','width'];
var c=p.getElementsByTagName('DIV')[0];
var clds=c.childNodes;
for (var z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
this.wh=clds[z0][os[0]]+clds[z0][os[1]];
}
}
holdpos=(typeof(holdpos)=='number'?holdpos:0)-this.wh;
c.style.position='absolute';
c.style[this.vh]=holdpos+'px';
c.style[os[2]]=this.wh+'px';
var max=(c[os[0]]+p[os[0]]);
var pos=0;
this.ary=[[c,0,[]]];
while (pos<max){
var z1=this.ary.length;
this.ary[z1]=[c.cloneNode(true),pos+=this.wh,[]];
this.ary[z1][0].style[this.vh]=this.ary[z1][1]+holdpos+'px';
p.appendChild(this.ary[z1][0]);
}
for (var clds,z2=0;z2<this.ary.length;z2++){
clds=this.ary[z2][0].childNodes;
for (var z2a=0;z2a<clds.length;z2a++){
if (clds[z2a].nodeType==1) this.ary[z2][2].push(clds[z2a][os[1]]);
}
}
this.ud=ud||-1;
this.spd=spd||100;
this.hold=typeof(hold)=='number'?hold:false;
this.holdpos=typeof(hold)=='number'?holdpos:0;
this.to=null;
this.sto=null;
this.data=[pos,-this.wh];
this.run=false;
this.pos=[];
this.posary();
if (typeof(srt)=='number'){
this.run=true;
this.to=setTimeout(function(oop){return function(){oop.scroll();}}(this),srt);
}
}

zxcCScrollerOOP.prototype.scroll=function(stop){
var spd=this.spd,ud=stop||this.ud;
for (var z0=0;z0<this.ary.length;z0++){
if (((ud<0)&&this.ary[z0][1]<=this.data[1])||(ud>0&&this.ary[z0][1]>this.data[0])) this.ary[z0][1]=this.data[(ud<0)?0:1]+ud;
this.ary[z0][1]+=stop||ud;
this.ary[z0][0].style[this.vh]=this.ary[z0][1]+this.holdpos+'px'
if (!stop&&this.hold&&Math.abs(ud)==1){
for (var z0a=0;z0a<this.ary[z0][2].length;z0a++){
if (parseInt(this.ary[z0][0].style[this.vh])+this.ary[z0][2][z0a]*ud==this.holdpos) spd=this.hold;
}
}
}
this.posary();
if (!stop) this.to=setTimeout(function(oop){return function(){oop.scroll();}}(this),spd);
}

zxcCScrollerOOP.prototype.posary=function(){
for (var z0=0;z0<this.ary.length;z0++){
this.pos[z0]=this.ary[z0][1]
}
}



/*]]>*/
</script>
<script type="text/javascript">

var S1,S2;

function Init(){
S2=new zxcCScrollerInit('h','tst2',-1,5,0,0,1000);
}
</script>
</head>



<body onload="Init()">




<div id="tst2"

onmouseout="zxcCScroller(S2,true);"

onmouseover="zxcCScroller(S2,false);"

>

<div >

<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width="100" height="100" alt="Test Image" />

<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" alt="Test Image" />

<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="100" alt="Test Image" />

</div>

</div>







</body>

</html>