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 to act the memory (remembering) capacity of Memory Scroller?

**vwphillips** · 06-28-2011, 11:13 AM

Code:

<!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>

Thread: Apply Memory Scroller to Pausing up-down message scroller

Thread Tools

Search Thread

Apply Memory Scroller to Pausing up-down message scroller

Bookmarks

Bookmarks

Posting Permissions