www.webdeveloper.com
Results 1 to 12 of 12

Thread: color run across text

  1. #1
    Join Date
    Feb 2006
    Posts
    89

    color run across text

    Hi,

    I have 3 rows of text eg

    123456789
    123456789
    123456789

    1st run all the "1" become yellow and the rest all in black
    2nd run all the "1" back to black but all the "2" become yellow
    3rd run all the "2" back to black but all the "3" become yellow
    and so on.. until "9" become yellow and the rest in black.

    In other words, the "yellow" color running across the 3 rows of
    text. Then the loop repeat again.

    Thanks.
    Last edited by mlim; 11-16-2012 at 08:53 AM.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Something like this ?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    .clr {color:red};
    </style>
    </head>
    <body>
    <ul id="lst"><li>123456789</li><li>123456789</li><li>123456789</li></ul>
    <script type="text/javascript">
    (function (){
    	var lst=document.getElementById('lst').childNodes,i=1,j=lst.length;
    	function color(){
    		for (j=0;j<lst.length;j++) 
    			lst[j].innerHTML="123456789".replace(new RegExp(i.toString(),"g"),'<span class="clr">$0</span>');
    		i%=9;i++;
    		setTimeout(color,100);
    	} 
    	color();
    }());
    </script>
    </body>
    </html>

  3. #3
    Join Date
    Feb 2006
    Posts
    89
    007Julien ,

    Thank for the script, the idea is correct but I'm getting a red $0 across the text

    The "$0" should be replaced with the original text, eg

    The "1" should be red (the rest are black) then next the "2" should red (the rest are black),
    somehow we need to remember the single char that need to change color along the way.

    Regards

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there mlim,

    here is my little attempt...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>highlight numbers infinitely</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    #numbers {
        padding:4px;
        margin:auto;
        border:1px solid #000;
        overflow:hidden;
        background-color:#fcfcfc;
        box-shadow:8px 8px 8px #666;
     }
    #numbers span {
        float:left;
        font-family:'courier new',monospace;
        font-weight:bold;
        text-align:center;
        box-shadow:4px 4px 4px #999;
     }
    .n1 {
       clear:both;
     }
    </style>
    
    <script type="text/javascript">
    
    function init(){
    
       num=9;    /* numbers - edit this value to suit */
       rows=6;    /* rows - edit this value to suit */
       splh=30;   /* span height - edit this value to suit */
       spw=22;    /* span width - edit this value to suit */
       spb=1;     /* span border - edit this value to suit */
       spm=4;     /* span margin - edit this value to suit */
    
       w=spw+spb*2+spm*2;
    
       s=[];
       k=1;
    
       dv=document.createElement('div');
       dv.id='numbers';
       dv.style.width=w*num+'px';
    
    for(c=0;c<num*rows;c++) {
       s[c]=document.createElement('span');
       s[c].className='n'+(c%num+1);
       s[c].appendChild(document.createTextNode(c%num+1));
       dv.appendChild(s[c])
      }
       document.body.appendChild(dv);
       goYellow();
     }
    function goYellow() {
    for(c=0;c<s.length;c++){
       s[c].style.lineHeight=splh+'px';
       s[c].style.width=spw+'px';
       s[c].style.border=spb+'px solid #000';
       s[c].style.margin=spm+'px';
       s[c].style.color='#000';
       s[c].style.backgroundColor='#fff';
    if(s[c].className=='n'+k){
       s[c].style.border='1px solid #f93';
       s[c].style.color='#fc9';
       s[c].style.backgroundColor='#000';
      }
     }
       k++;
    if(k==num+1){
       k=1;
     }
    setTimeout(function(){goYellow();},500);
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>
    
    This code allows for any length of numbers and rows and some other editable values.

    Those with javascript disabled, will have no numbers.

    coothead

  5. #5
    Join Date
    Feb 2006
    Posts
    89
    Hi coothead ,

    Thank for the script. I like it.

    Actually I would like to replace those numbers above with text like these

    Test message 1*
    This is MESSage #2
    mess-age 3%


    These text are of different length.

    I'm using numbers to explain the intention.

    Regards

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there mlim,

    Why ask for a script to do a specific task, then when you are given it,
    say that you really wanted something entirely different.

    Would you tell your doctor that you had a pain in the elbow when you,
    in fact, had a pain in the arse?

    You are a very, very naughty boy to waste members valuable time in
    such a nonchalant manner.

    coothead

  7. #7
    Join Date
    Feb 2006
    Posts
    89
    Coothead,

    Sorry, I'm trying to explain it with numbers but I did mentioned as "text" at the
    begining. Also the subject title mentioned "text".

    Plse help.

    Very Sorry for the trouble

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there mlim,

    if you want anyone to write a complicated script for you, then you must supply precise information.

    You say that you have three lines of text, then...

    1. supply the actual three lines of text.
    2. show how the text is exactly to be split into nine segments.
    3. provide any other information that may be relevant to the successful creation of the code.


    ...and, if you are very lucky, you might even get some help.


    coothead.

  9. #9
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    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>
     <div id="tst" >
      <div >LIne 1</div>
      <div >LIne 2</div>
      <div >LIne 3</div>
     </div>
    <br />
     <div id="tst1" >
      <div >LIne 1</div>
      <div >LIne 2 Line 2</div>
      <div >LIne 3</div>
     </div>
    <br />
     <div id="tst2" style="background-color:#FFFFCC;" onmouseover="LineColor('tst2');" onmouseout="LineColor('tst2','run');">
      <div > LIne 1 LIne 1 LIne 1 LIne 1 LIne 1 LIne 1 LIne 1 LIne 1</div>
      <div > LIne 2 LIne 2 LIne 2 LIne 2 LIne 2 LIne 2 LIne 2 LIne 2</div>
      <div > LIne 3 LIne 3 LIne 3 LIne 3 LIne 3 LIne 3 LIne 3 LIne 3</div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function LineColor(id,col1,col2,ms){
     var o=LineColor[id],obj=document.getElementById(id);
     if (!o&&obj){
      var clds=obj.childNodes,html,ary=[],cnt=0,max=0,s,z0=0,z1a;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        html=clds[z0].innerHTML.split('');
        clds[z0].innerHTML='';
        ary[cnt]=[];
        for (z0a=0;z0a<html.length;z0a++){
         s=document.createElement('SPAN');
         s.innerHTML=html[z0a];
         s.style.color=col1;
         clds[z0].appendChild(s);
         if (html[z0a]!=' '){
          ary[cnt].push(s);
         }
        }
        max=Math.max(ary[cnt].length,max);
        cnt++;
       }
      }
      o=LineColor[id]={
       ary:ary,
       max:max,
       c:[col1,col2],
       ms:ms,
       cnt:0
      }
     }
     if (o){
      clearTimeout(o.to);
      if (typeof(col1)=='string'){
       o.to=setTimeout(function(){
        for (var z0=0;z0<o.ary.length;z0++){
         if (o.ary[z0][o.cnt]){
          o.ary[z0][o.cnt].style.color=o.c[0];
         }
        }
        o.cnt=++o.cnt%o.max;
        for (var z1=0;z1<o.ary.length;z1++){
         if (o.ary[z1][o.cnt]){
          o.ary[z1][o.cnt].style.color=o.c[1];
         }
        }
        LineColor(id,'run');
       },o.ms);
      }
     }
    
    }
    
    LineColor('tst','black','red',1000);
    LineColor('tst1','black','red',1000);
    LineColor('tst2','red','black',100);
    
    /*]]>*/
    </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/

  10. #10
    Join Date
    Feb 2006
    Posts
    89
    vwphillips,

    This is exactly what I needed. Good work!
    The only problem here is it removed the "space" and joined the text together.

    Many Thanks.

  11. #11
    Join Date
    Feb 2006
    Posts
    89
    vwphillips,

    Any chances of helping to remove those "spaces"

    Best Regards

  12. #12
    Join Date
    Feb 2006
    Posts
    89
    Hi Annieferris,

    Thanks for your comments.
    Good things take time and patience.

    Best Regards.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles