Advanced Search

Results 1 to 7 of 7

Thread: Pausing up-down text Scroller with image

  1. #1
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Pausing up-down text Scroller with image

    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>
    Last edited by james438; 10-16-2013 at 06:55 AM. Reason: format

  2. #2
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by jscheuer1; 10-17-2013 at 11:39 AM. Reason: Format

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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.'
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. The Following User Says Thank You to vwphillips For This Useful Post:

    romeshlogan (10-17-2013)

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,688
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    romeshlogan (10-17-2013)

  7. #5
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. The Following User Says Thank You to vwphillips For This Useful Post:

    romeshlogan (10-17-2013)

  10. #7
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Inserting Text Before gAjax RSS Pausing Scroller
    By jwire4 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-08-2011, 05:54 AM
  2. Text position in pausing up-down message scroller
    By ronpaul53 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-19-2009, 09:33 PM
  3. changing text color on pausing up scroller
    By dsnjs in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 05-29-2007, 07:53 PM
  4. Pausing up-down message scroller - text cutting off
    By schmodi in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 01-03-2007, 11:21 PM
  5. Color text in Pausing up-down message scroller
    By maxlomb in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-18-2004, 06:05 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •