Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Cut & Paste Highlighter Scroller II

    I have downloaded the javascript and got it working as I want it but I was wondering if it is possible to reverse the direction it highlights? It currently highlights upwards from bottom to top but I would prefer it to highlight downwards from top to bottom.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    please post a link to your page or the cut and past script
    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/

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    please post a link to your page or the cut and past script
    Thanks for your reply. The script is below:

    <script type="text/javascript">

    // Highlighter Scroller II script- By JavaScript Kit (JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop)
    // For this and over 400+ free scripts, visit JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop
    // This notice must stay intact

    //CONFIGURE MESSAGES AND VARIABLES
    var tickercontents=new Array()
    tickercontents[0]='VIP Event, <br />Lou Lou Bridal, <br />29th to 31st August<br />at the Boutique.<br />10% discount on all orders taken over the weekend.'
    tickercontents[1]='Wedding Fair<br />21st September at 12.00.<br />Come and see us at <br />The Whitehall Hotel, Darwen'
    tickercontents[2]='Wedding Fair<br />12th October at 12:00.<br />Come and see us at<br />Links Golf Club,<br />Chorley New Road,<br />Bolton.'
    tickercontents[3]='Wedding Fair<br />2nd November at 12:00.<br />Come and see us at<br />The Last Drop Village,<br />Bromley Cross,<br />Bolton.'

    var tickerwidth="240px"
    var tickerheight="240px"
    var fontcss="font: bold 24px 'typewriterroyal200bold'; color:#020255"
    var tickdelay=3000 //delay btw messages
    var highlightspeed=2 //2 pixels at a time.
    var highlightcolor="transparent"
    var backdroptextcolor="#E1E1E1"

    ////Do not edit pass this line////////////////

    document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>')
    document.write('<div style="position:relative;left:70px;top:40px; width:'+tickerwidth+'; height:'+tickerheight+';'+fontcss+'">')
    document.write('<span id="highlighterbg" style="position:absolute;left:0;top:0;color:'+backdroptextcolor+'; width:'+tickerwidth+'; height:'+tickerheight+';padding: 4px"></span><span id="highlighter" style="position:absolute;left:0;top:0;clip:rect(auto auto auto 0px); background-color:'+highlightcolor+'; width:'+tickerwidth+';height:'+tickerheight+';padding: 4px"></span>')
    document.write('</div>')

    var currentmessage=0
    var clipbottom=1

    function changetickercontent(){
    msgheight=clipbottom=crosstick.offsetHeight
    crosstick.style.clip="rect("+msgheight+"px auto auto 0px)"
    crosstickbg.innerHTML=tickercontents[currentmessage]
    crosstick.innerHTML=tickercontents[currentmessage]
    highlightmsg()
    }

    function highlightmsg(){
    //var msgheight=crosstick.offsetHeight
    if (clipbottom>0){
    clipbottom-=highlightspeed
    crosstick.style.clip="rect("+clipbottom+"px auto auto 0px)"
    beginclip=setTimeout("highlightmsg()",20)
    }
    else{
    clipbottom=msgheight
    clearTimeout(beginclip)
    if (currentmessage==tickercontents.length-1) currentmessage=0
    else currentmessage++
    setTimeout("changetickercontent()",tickdelay)
    }
    }

    function start_ticking(){
    crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg
    crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
    crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
    if (parseInt(crosstick.offsetHeight)>0)
    crosstickParent.style.height=crosstick.offsetHeight+'px'
    else
    setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
    changetickercontent()
    }

    if (document.all || document.getElementById)
    window.onload=start_ticking

    </script>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    change in red

    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>
    </head>
    
    <body>
    <script type="text/javascript">
    
    // Highlighter Scroller II script- By JavaScript Kit (http://www.javascriptkit.com)
    // For this and over 400+ free scripts, visit http://www.javascriptkit.com/
    // This notice must stay intact
    
    //CONFIGURE MESSAGES AND VARIABLES
    var tickercontents=new Array()
    tickercontents[0]='Looking for tutorials on PHP, JavaScript, XML, or CSS? Visit <a href="http://www.codetricks.com">Code Tricks</a>!'
    tickercontents[1]='Hop on over to <a href="http://www.codingforums.com">Coding Forums</a> to get help on web coding!'
    tickercontents[2]='This scroller\'s brought to you by <a href="http://www.javascriptkit.com">JavaScript Kit</a>- Free scripts and tutorials!'
    
    var tickerwidth="200px"
    var tickerheight="70px"
    var fontcss="font: bold 14px Verdana; color:black"
    var tickdelay=3000 //delay btw messages
    var highlightspeed=2 //2 pixels at a time.
    var highlightcolor="lightyellow"
    var backdroptextcolor="#E1E1E1"
    
    ////Do not edit pass this line////////////////
    
    document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>')
    document.write('<div style="position:relative;left:0px;top:0px; width:'+tickerwidth+'; height:'+tickerheight+';'+fontcss+'">')
    document.write('<span id="highlighterbg" style="position:absolute;left:0;top:0;color:'+backdroptextcolor+'; width:'+tickerwidth+'; height:'+tickerheight+';padding: 4px"></span><span id="highlighter" style="position:absolute;left:0;top:0;clip:rect(auto auto auto 0px); background-color:'+highlightcolor+'; width:'+tickerwidth+';height:'+tickerheight+';padding: 4px"></span>')
    document.write('</div>')
    
    var currentmessage=0
    var clipbottom=1
    
    function changetickercontent(){
    msgheight=clipbottom=crosstick.offsetHeight
    crosstick.style.clip="rect("+msgheight+"px auto auto 0px)"
    crosstickbg.innerHTML=tickercontents[currentmessage]
    crosstick.innerHTML=tickercontents[currentmessage]
    highlightmsg()
    }
    
    function highlightmsg(){
    //var msgheight=crosstick.offsetHeight
    if (clipbottom>0){
    clipbottom-=highlightspeed
    crosstick.style.clip="rect(0px auto "+(msgheight-clipbottom)+"px 0px)"
    beginclip=setTimeout("highlightmsg()",20)
    }
    else{
    clipbottom=msgheight
    clearTimeout(beginclip)
    if (currentmessage==tickercontents.length-1) currentmessage=0
    else currentmessage++
    setTimeout("changetickercontent()",tickdelay)
    }
    }
    
    function start_ticking(){
    crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg
    crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
    crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
    if (parseInt(crosstick.offsetHeight)>0)
    crosstickParent.style.height=crosstick.offsetHeight+'px'
    else
    setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
    changetickercontent()
    }
    
    if (document.all || document.getElementById)
    window.onload=start_ticking
    
    </script>
    
    <p align="left">This free script provided by
    <a href="http://javascriptkit.com">JavaScript Kit</a></p></body>
    
    </html>
    or with more options

    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[*/
    
    #parent {
      position:relative;width:200px;height:70px;border:solid red 1px;
    }
    
    #parent .background {
      width:200px;height:70px;background-Color:#E1E1E1;
    }
    
    #parent .highlight {
      width:200px;height:70px;background-Color:lightyellow;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <input type="button" name="" value="Next" onclick="zxcClipMessager.Next('parent',1);" />
     <input type="button" name="" value="Back" onclick="zxcClipMessager.Next('parent',-1);" />
     <input type="button" name="" value="GoTo 0" onclick="zxcClipMessager.GoTo('parent',0);" />
     <input type="button" name="" value="GoTo 1" onclick="zxcClipMessager.GoTo('parent',1);" />
     <input type="button" name="" value="GoTo 2" onclick="zxcClipMessager.GoTo('parent',2);" />
    
     <div id="parent" onmouseover="zxcClipMessager.Pause('parent');" onmouseout="zxcClipMessager.Auto('parent');" >
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Clip Messager Scroller (15-August-2014)
    // by:~ Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcClipMessager={
    
     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.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.id);
       o.msg[n]&&n!=o.n?this.rotate(o,n):null;
      }
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id];
      o?o.to=setTimeout(function(){ zxcClipMessager.rotate(o,true); },ms||200):null;
     },
    
     Pause:function(id,ms){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Init:function(o){
      var id=o.ParentID,msg=o.Messages,m=o.ClipMode,ms=o.Animate,hld=o.AutoHold,s=o.AutoStart,p=document.getElementById(id);
      if (p&&msg instanceof Array){
       var w=p.offsetWidth,h=p.offsetHeight,d=document.createElement('DIV'),m=typeof(m)=='string'?m.charAt(0).toUpperCase():'C',m='CHVRLDU?'.indexOf(m),z0=0;
       d.className='background';
       d.style.position='absolute';
       d.style.top=d.style.left='0px';
       d.style.width='100%';
       d.style.height=h+'px';
       d.innerHTML=msg[0];
       p.appendChild(d);
       o.bg=d;
       d=d.cloneNode(true);
       d.className='highlight';
       p.appendChild(d);
       o.id=id;
       o.m=Math.min(Math.max(m,0),7);
       o.mds=[[h/2,w/2,h/2,w/2],[0,w/2,h,w/2],[h/2,w,h/2,0],[0,0,h,0],[0,w,h,w],[0,w,0,0],[h,w,h,0]];
       o.a=[d,'clip',[0,w,h,0],[]];
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.h=typeof(hld)=='number'&&hld>20?hld:o.ms*4;
       o.n=0;
       o.ud=1;
       o.msg=msg;
       o.l=msg.length-1;
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>20?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      o.auto=a===true;
      var n=o.auto?o.n+o.ud:a,n=n<0?o.l:n>o.l?0:n,m=o.mds[o.m]?m:Math.floor(Math.random()*7);
      o.a[0].innerHTML=o.msg[n];
      this.animate(o,o.a,o.mds[m],o.a[2],new Date(),o.ms);
      o.n=n;
     },
    
     animate:function(o,a,f,t,srt,mS,z){
      clearTimeout(a[7]);
      var oop=this,ms=new Date()-srt,n,z0=0;
      for (;z0<4;z0++){
       n=(t[z0]-f[z0])/mS*ms+f[z0];
       a[3][z0]=Math.max(Math.round(isFinite(n)?n:t[z0]),0);
      }
      oop.clip(a[0],a[3]);
      if (ms<mS){
       a[7]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,z); },10);
      }
      else {
       oop.clip(a[0],t);
       o.bg.innerHTML=o.msg[o.n];
       o.auto?oop.Auto(o.id,o.h):null;
      }
     },
    
     clip:function(o,t){
      o.style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
     }
    
    }
    
    zxcClipMessager.Init({
     ParentID:'parent',  // the unique ID name of the parent DIV.                      (string)
     Messages:[          // a array defining the HTML of each message.                 (array)
      ['Looking for tutorials on PHP, JavaScript, XML, or CSS? Visit <a href="http://www.codetricks.com">Code Tricks</a>!'],
      ['Hop on over to <a href="http://www.codingforums.com">Coding Forums</a> to get help on web coding!'],
      ['This scroller\'s brought to you by <a href="http://www.javascriptkit.com">JavaScript Kit</a>- Free scripts and tutorials!']
     ],
     ClipMode:'?',      //(optional) the clip mode, see Note 1.                        (string, default = 'C' = center)
     Animate:1000,      //(optional) the animation duration in milliseconds.           (number, default = 1000)
     AutoHold:2000,     //(optional) the auto rotate 'hold' delay in milliseconds.     (number, default = Animate*4)
     AutoStart:2000     //(optional) the auto rotate auto start delay in milliseconds. (number, default = no auto start)
    });
    /*
      ** Note 1.
        The display modes are:
        'C' = center clip,
        'H' = horizontal clip,
        'V' = vertical clip,
        'R' = right clip,
        'L' = left clip,
        'D' = down clip,
        'U' = up clip,
        '?' = Random Clip
        */
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 08-15-2014 at 04:40 PM.
    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/

  • Users who have thanked vwphillips for this post:

    kgrundy60 (08-17-2014)

  • #5
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your reply. I've tried out your change and it still highlights from bottom to top in Coda preview and doesn't appear to highlight at all in a browser (I've tried Safari & Chrome).

  • #6
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    vwphillips

    Please ignore my last post. Not sure what I was doing wrong but I've managed to get it working using your instruction.

    Thanks for your help. Much appreciated


  •  

    Posting Permissions

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