PDA

View Full Version : Apply Memory Scroller to Pausing up-down message scroller



sadblue34
06-28-2011, 03:15 AM
Is is possible to make Pausing up-down message scroller (http://www.dynamicdrive.com/dynamicindex2/crosstick.htm) to act the memory (remembering) capacity of Memory Scroller? (http://www.dynamicdrive.com/dynamicindex2/memoryscroller.htm)

vwphillips
06-28-2011, 11:13 AM
<!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">

/*Example CSS for the two demo scrollers*/

.pscroller{
position:relative;
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
background-color: lightyellow;
}


.myclass {
padding:5px;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/
// Pause Scroller (28-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


function zxcPauseScroller(o){
var oop=this,obj=document.getElementById(o.ID),ary=o.Content,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(o).toUpperCase()=='H'?['left','width',obj.offsetWidth,'offsetWidth']:['top','height',obj.offsetHeight,'offsetHeight'],slider=document.createElement('DIV'),cls=o.ClassName||'',frame,z0=0,days=o.DaysPersistance;
obj.style.overflow='hidden';
slider.style.position='absolute';
slider.style.left='0px';
slider.style.left='0px';
slider.style.width='100%';
obj.appendChild(slider);
this.ary=[];
for (;z0<ary.length+1;z0++){
frame=slider.cloneNode(false);
slider.appendChild(frame);
frame.style[mde[0]]=z0*mde[2]+'px';
frame.className=cls;
frame.innerHTML=ary[z0%ary.length];
frame.style[mde[1]]=mde[2]-(frame[mde[3]]-mde[2])+'px';
this.ary[z0]=-z0*mde[2];
}
obj.onmouseover=function(){ clearTimeout(oop.dly); oop.run=false; }
obj.onmouseout=function(){
if (oop.from==oop.to){
oop.dly=setTimeout(function(){ oop.run=true; oop.slideit(); },500);
}
}
this.slider=slider;
this.cnt=0;
this.nme=o.ID+'=';
if (this.cookie(this.nme)){
this.cnt=this.cookie(this.nme)*1;
}
slider.style[mde[0]]=this.ary[this.cnt]+'px';
this.mde=mde[0];
this.from=0;
this.to=0;
this.run=true;
this.days=isFinite(days)?days:-1;
this.spd=isFinite(o.Speed)?o.Speed:-2;
this.hold=isFinite(o.Hold)?o.Hold:1000;
this.dly=setTimeout(function(){ oop.slideit(); },this.hold);
}

zxcPauseScroller.prototype={

srt:function(){
if (this.from==this.to){
var oop=this;
this.dly=setTimeout(function(){ oop.run=true; oop.slideit(); },500);
}
},

slideit:function(){
if ((this.spd<0&&this.cnt==this.ary.length-1)||(this.spd>0&&this.cnt==0)){
this.cnt=this.spd<0?0:this.ary.length-1;
}
var nxt=this.cnt+(this.spd<0?1:-1);
this.from=this.ary[this.cnt];
this.to=this.ary[nxt];
document.cookie=this.nme+(nxt)+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
this.cnt+=(this.spd<0?1:-1);
this.slide();
},

slide:function(){
var oop=this;
this.slider.style[this.mde]=this.to+'px';
if ((this.spd<0&&this.from>this.to)||(this.spd>0&&this.from<this.to)){
this.slider.style[this.mde]=this.from+'px';
this.from+=this.spd;
setTimeout(function(){ oop.slide(); },50);
}
else {
this.from=this.to;
this.slider.style[this.mde]=this.to+'px';
if (this.run){
setTimeout(function(){ oop.slideit(); },this.hold);
}
}
},

cookie:function(nme){
var re=new RegExp(nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
}



}
/*]]>*/
</script>

</head>

<body>
<div id="pscroller1" class="pscroller" ></div>
<br />
<div id="pscroller2" class="pscroller" ></div>

<br />
<div id="pscroller3" class="pscroller" ></div>

<br />
<div id="pscroller4" class="pscroller" ></div>


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

new zxcPauseScroller({
ID:'pscroller1', // the unique ID name of the parent node. (string)
Content:[ // content array. (array)
'<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!',
'<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.',
'<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'
],
Mode:'Horizontal', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = no class name)
ClassName:'myclass', //(optional) the class to apply to the scroller frames. (string, default = no class name)
Speed:-5, //(optional) the animation speed, 1 = slow, 5 = fast. (number, default = 2);
Hold:2000, //(optional) the 'hold' delay between rotation in milli seconds. (number, default = 1000);
DaysPersistance:1 //(optional) the number of days to remember the last frame. (number, default = no persistance);
});

new zxcPauseScroller({
ID:'pscroller2',
Content:[
'<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!',
'<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.',
'<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'
],
ClassName:'myclass',
Speed:5,
Hold:2000,
DaysPersistance:-1
});

new zxcPauseScroller({
ID:'pscroller3',
Content:[
'<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!',
'<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.',
'<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'
],
Mode:'Horizontal',
ClassName:'myclass',
Speed:5,
Hold:2000,
DaysPersistance:-1
});

/*
*/
new zxcPauseScroller({
ID:'pscroller4',
Content:[
'<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!',
'<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.',
'<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'
],
Mode:'Horizontal',
ClassName:'myclass',
Speed:-5,
Hold:2000,
DaysPersistance:-1
});

/*]]>*/
</script></body>

</html>