Pausing up-down text Scroller with image

**romeshlogan** · 10-14-2013, 05:11 PM

1) Script Title: Pausing up-down Scroller

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

3) Describe problem: Can the above scroller text script be functional with an image in IE8+.
The scroller text and image work perfectly fine in FF, Chrome & Opr, but terribly fails with IE8+.
I modified the code for the image to scroll along with as follows (ref. only the text in bold).

Code:

<head>
<style type="text/css">

/*Example CSS for the two demo scrollers*/

#pscroller1{
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}

#pscroller2{
width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}

#pscroller2 a{
text-decoration: none;
}

.someclass{ //class to apply to your scroller(s) if desired
}

</style>

<script type="text/javascript">

/*Example message arrays for the two demo scrollers*/

var pausecontent=new Array()
pausecontent[0]='<img src="images/picture1.png" alt=""/>'
pausecontent[1]='<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.'
pausecontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'

var pausecontent2=new Array()
pausecontent2[0]='<img src="images/picture1.png" alt=""/>'
pausecontent2[1]='<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>'
pausecontent2[2]='<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>'

</script>

<script type="text/javascript">

function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}

// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------

pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}


// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------

pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}

// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------

pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}

pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}

</script>
</head>

<body>

<script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)

</script>

</body>

**romeshlogan** · 10-17-2013, 05:37 AM

Many thanks Sconnauploank for your modified script and for the spontaneous kind gesture. Your modified script indeed work, perfectly fine in IE and along with the chrome, FF & Opr.

But for unknown reason, this failed to display in IE of the web that I’d designed for a close friend of mine, while work perfectly well in all other browsers.

I don’t have any programming knowledge, but I have the ability to configure to suit requirements and circumstances. Should you have time, have a look at http://gve.com.pg/ as I presume any other conflicting script coding that may be preventing it from being displayed in IE.

Again millions of thanks for having spared your valuable time to have me assisted.

**vwphillips** · 10-17-2013, 09:34 AM

you must give the image width and height

Code:

var pausecontent=new Array()
pausecontent[0]='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img draggable="false" src="http://gve.com.pg/images/layout/best-quality-gold.png" alt="" width="200" height="200" />'
pausecontent[1]='<a href="#">Gold Nuggets</a><br><br> Gold nuggets are of richer in quality with deeper in orange yellow colour and pure eminent concentration of guaranteed natural fine gold.'
pausecontent[2]='<a href="#">Gold Nuggets</a><br><br> Gold nuggets are of richer in quality with deeper in orange yellow colour and pure eminent concentration of guaranteed natural fine gold.'
pausecontent[3]='<a href="#">Gold Ingots</a><br><br> Yellow solid gold bars of fine quality are famous for their intrinsic purity and longevity and are available in customized weight proportions.'
pausecontent[4]='<a href="#">New office</a><br><br> We also proudly wish to announce that our next branch office is to be opened shortly in the central capital city of Colombo, Sri Lanka.'

**jscheuer1** · 10-17-2013, 11:48 AM

Right, the actual dimensions are 168 x 168 though.

Or you could skip that part and let the image's native dimensions hold sway:

Code:

<img draggable="false" src="http://gve.com.pg/images/layout/best-quality-gold.png" alt=""/>

But, since it's dynamic content, specifying the dimensions is best.

**romeshlogan** · 10-17-2013, 03:49 PM

Millions of thanks Philip, it works perfectly fine in IE and all other browsers now. Mark my word, this is the second time you’ve helped me. As advised the charity organization would receive my humble donation as my contribution for your kind assistance as I was in fact on the verge of replacing this news release script with other compatible Jquery or Ajax scripts.

Special thanks for jscheuer1 for having intervened and moderated with his piece of advice as well.

God loves each of us as if there were only one of us.

Thanks & Kindest Rgds,
Romesh

**vwphillips** · 10-17-2013, 04:08 PM

Updated version

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">
/*<![CDATA[*/
.someclass {
  position:relative;top:0px;width:200px;height:160px;border:solid red 1px;text-Align:center;
}


/*]]>*/
</style>
</head>

<body>
<input type="button" name="" value="Auto" onmouseup="zxcScroller.Auto('tst');" />
<input type="button" name="" value="Pause" onmouseup="zxcScroller.Pause('tst');" />
<input type="button" name="" value="Next" onmouseup="zxcScroller.Next('tst',2);" />
<input type="button" name="" value="Back" onmouseup="zxcScroller.Next('tst',-2);" />
<input type="button" name="" value="GoTo 0" onmouseup="zxcScroller.GoTo('tst',0);" />
<input type="button" name="" value="GoTo 1" onmouseup="zxcScroller.GoTo('tst',1);" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcScroller.GoTo('tst',2);" />
<input type="button" name="" value="GoTo 3" onmouseup="zxcScroller.GoTo('tst',3);" />
<div id="tst" class="someclass" ></div>
<div id="tst2" class="someclass" onmouseover="zxcScroller.Pause('tst2');" onmouseout="zxcScroller.Auto('tst2'); "></div>

<script type="text/javascript">
/*<![CDATA[*/
// Scroller (17-October-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcScroller={

 Auto:function(id,ms){
  var oop=this,o=oop['zxc'+id];
  o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
 },

 Pause:function(id,ms){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o){
   this.Pause(id);
   if(o.ary[n]&&n!=o.c){
    o.ud=n>o.c?1:-1;
    this.rotate(o,n);
   }
  }
 },

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.c+ud);
  }
 },

 init:function(o){
  var id=o.ScrollerID,ary=o.ContentArray,ms=o.Animate,m=o.Mode,hold=o.AutoHold,srt=o.AutoStart,add=o.AddEvents,p=document.getElementById(id);
  if (p&&ary instanceof Array&&!this['zxc'+id]){
   var w=p.offsetWidth,h=p.offsetHeight,m=typeof(m)=='string'&&m.charAt(0)=='H'?['left',w]:['top',h],d=document.createElement('DIV'),s,t,z0=0;
   p.style.overflow='hidden';
   o.id=id;
   o.ary=ary;
   o.sz=-m[1];
   d.style.position='absolute';
   d.style.left=d.style.top='0px';
   d.style.height=h+'px';
   d.style.width=w+'px';
   s=d.cloneNode(false);
   p.appendChild(s);
   d.style.overflow='hidden';
   o.ds=[d.cloneNode(false),d.cloneNode(false)];
   s.appendChild(o.ds[0]);
   s.appendChild(o.ds[1]);
   o.s=[s,m[0]];
   o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
   o.hold=typeof(hold)=='number'&&hold>20?hold:o.ms*4;
   o.lgth=ary.length-1;
   o.ud=1;
   o.c=o.ud>0?1:o.lgth;
   o.ds[0].innerHTML=ary[0];
   o.ds[1].innerHTML=ary[o.ud>0?1:o.lgth];
   o.ds[1].style[m[0]]=o.sz*(o.ud>0?-1:1)+'px';
   if (add instanceof Array){
    for (;z0<add.length;z0++){
     if (add[z0]){
      d=document.getElementById(add[z0][0]);
      if (d&&this[add[z0][2]]){
       t=add[z0][1];
       this.addevt(d,t=='click'||t=='mouseover'||t=='mouseout'||t=='mousedown'?t:'mouseup',add[z0][2],o.id,add[z0][3]);
      }
     }
    }
   }
   this['zxc'+id]=o;
   typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
  }
 },


 rotate:function(o,a){
  this.Pause(o.id);
  var c=o.c;
  o.auto=a===true;
  c=o.auto?c+o.ud:a;
  c=o.ary[c]?c:o.ud>0?0:o.lgth;
  o.ds[1].style[o.s[1]]=o.sz*(o.ud>0?-1:1)+'px';
  o.c=c;
  o.ds[1].innerHTML=o.ary[o.c];
  this.animate(o,o.s,0,o.sz*(o.ud>0?1:-1),new Date(),o.ms);
 },

 animate:function(o,a,f,t,srt,mS,c){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,c); },10);
  }
  else {
   a[0].style[a[1]]='0px';
   o.ds[0].innerHTML=o.ds[1].innerHTML;
   o.auto?oop.Auto(o.id,o.hold):null;
  }
 },


 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }

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

zxcScroller.init({
 ScrollerID:'tst', // the unique ID name of the parent DIV.                   (string)
 ContentArray:[    // the content definition array.                           (array)
  '<img draggable="false" src="http://gve.com.pg/images/layout/best-quality-gold.png" alt="" />',
  '<a href="#">Gold Nuggets</a><br><br> Gold nuggets are of richer in quality with deeper in orange yellow colour and pure eminent concentration of guaranteed natural fine gold.',
  '<a href="#">Gold Ingots</a><br><br> Yellow solid gold bars of fine quality are famous for their intrinsic purity and longevity and are available in customized weight proportions.',
  '<a href="#">New office</a><br><br> We also proudly wish to announce that our next branch office is to be opened shortly in the central capital city of Colombo, Sri Lanka.'
 ],
 Mode:'Vertical',  //(optional) the display mode, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
 Animate:1000,     //(optional) the animation duration in millisec.           (number, default = 1000)
 AutoHold:3000,    //(optional) the auto rotate 'hold' delay in millisec.     (number, default = Animate*4)
 AutoStart:2000,   //(optional) the auto rotate start delay in millisec.      (number, default = 100)
 AddEvents:[       //(optional) add event calls to control the script.        (array, default = inline event calls)
  // field 0 = the element unique ID name.
  // field 1 = the event type.
  // field 2 = the script function name.
  // field 3 = (optional) the value to pass to the function.
  ['tst','mouseover','Pause'],
  ['tst','mouseout','Auto',1000]
 ]
});

zxcScroller.init({
 ScrollerID:'tst2',
 ContentArray:[
  '<img draggable="false" src="http://gve.com.pg/images/layout/best-quality-gold.png" alt="" />',
  '<a href="#">Gold Nuggets</a><br><br> Gold nuggets are of richer in quality with deeper in orange yellow colour and pure eminent concentration of guaranteed natural fine gold.',
  '<a href="#">Gold Ingots</a><br><br> Yellow solid gold bars of fine quality are famous for their intrinsic purity and longevity and are available in customized weight proportions.',
  '<a href="#">New office</a><br><br> We also proudly wish to announce that our next branch office is to be opened shortly in the central capital city of Colombo, Sri Lanka.'
 ],
 AutoStart:0,
 Mode:'Horizontal'
});

/*]]>*/
</script>

</body>

</html>

**romeshlogan** · 10-17-2013, 04:34 PM

Extremely useful scripts with horizontal and vertical scrolling abilities to work with all cross browser capabilities. I would consider using these codes in future designs. Again thanking you so much for having spared your valuable time and having thoughtfully considered and addressed my humble appeal with spontaneous gestures.