Printable View
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.
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>
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
Hi there mlim,
here is my little attempt...
This code allows for any length of numbers and rows and some other editable values. ;)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>
Those with javascript disabled, will have no numbers.
coothead
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
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. :confused:
Would you tell your doctor that you had a pain in the elbow when you,
in fact, had a pain in the arse? :rolleyes:
You are a very, very naughty boy to waste members valuable time in
such a nonchalant manner. :mad:
coothead
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
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.
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>
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.
vwphillips,
Any chances of helping to remove those "spaces"
Best Regards
Hi Annieferris,
Thanks for your comments.
Good things take time and patience.
Best Regards.
