...

View Full Version : Possible to alternate colors of words?



tired&lonely
09-26-2002, 01:18 PM
Other than using <FONT COLOR="#------"> over and over again, is there some easy way to use a simple CSS style or a javascript function or some other kind of code to alternate the colors of every other word in a long block of text? For example:

This is how the line of text should look after the alternating color effect is applied.
And so on, and so forth....


:confused:

MCookie
09-26-2002, 02:21 PM
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.tired {
color:#000066;
}
.lonely {
color:#0066FF;
}
-->
</style>
</head>
<body>
<div class="tired"><span class="lonely">This</span> is <span class="lonely">how</span> the <span class="lonely">line</span> of <span class="lonely">text</span> should <span class="lonely">look</span> after <span class="lonely">the</span> alternating <span class="lonely">color</span> effect <span class="lonely">is</span> applied.
<span class="lonely">And</span> so <span class="lonely">on</span>, and <span class="lonely">so</span> forth....</div>
</body>
</html>

tired&lonely
09-26-2002, 04:13 PM
Ok, that was cute. I guess what I should have said is, is there an "easier" way than having multiple tags for each color change. Like:

<style>some kind of alternating coloring style</style>

<table with the style above>
"This is how the line of text should look after the alternating color effect is applied. And so on, and so forth.... "
</table>

...or do this alternating color scheme using some kind of javascript function or DOM or some other CSS method or something.

Can this be done?

adios
09-26-2002, 06:12 PM
You sure ask interesting questions. OK, this is dumb, non-nodal,and simple (might be cute):

<html>
<head>
<title>untitled</title>
<style type="text/css">

.none {
font: 200 24px "comic sans ms";
color: white;
}

</style>
<script type="text/javascript" language="javascript">

var HTML = '';

function alternate(colorpair) {
var el = document.getElementById('alternator');
if (!HTML) HTML = el.innerHTML;
colorpair = colorpair.split('|');
var text = HTML.split(' '), output = '';
for (var w=0; w<text.length; w++) {
output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
output += ';">' + text[w] + '</span> ';
}
el.innerHTML = output;
}

</script>
</head>
<body bgcolor="black">
<div id="alternator" class="none">
This is how the line of text should look after the alternating color effect is applied.
And so on, and so forth....</div>
<br><br>
<form>
<select style="font:200 11px arial;color:white;background:#333333;"
onchange="alternate(options[selectedIndex].value)">
<option>select colors</option>
<option value="red|yellow">red & yellow</option>
<option value="coral|olive">coral & olive</option>
<option value="green|purple">green& purple</option>
<option value="gold|silver">gold & silver</option>
<option value="skyblue|darkorange">skyblue & dark orange</option>
</select>
</form>
</body>
</html>

tired&lonely
09-30-2002, 03:38 PM
Hey adios,

With a little modification, your code works perfectly for my application. Simply beautiful!!! Thank you soooooo much!!! I must say, I'm immensely impressed by your expertise and the way you seem to spew out code like it's nuttin'.

:thumbsup:

tired&lonely
10-14-2002, 02:36 AM
I recently checked to see if this code works for Netscape 4.-- and unfortunately it doesn't. Are there any conditionals (if... else...) that I can plug in to make it cross-browser compatible?

:confused:

adios
10-14-2002, 05:09 AM
if (document.layers) {
alert('Faggedaboutit!');
location = 'http://www.alistapart.com/stories/tohell/';
}

:D

tired&lonely
10-15-2002, 12:48 PM
Interesting link, adios. So I guess that's a definite no go for Netscape, eh?!! And there's absolutely no work-around?

:mad:

Íkii
10-15-2002, 02:59 PM
You could doc write the iterated through string at page load and include font declarations at spaces.

<table style="color:#990"><tr><td>
<script type="text/javascript">
my_words = 'This is the string that needs to be written out with alternating text colours';
addbit = '</font>';
for (mw=0;mw<my_words.length;mw++) {
if (my_words.charAt(mw)==" ") {
if (addbit != '</font>') {addbit = '</font>';}
else {addbit = '<font style="color:#FF3">';}
document.write(addbit+' ');
}
else {
document.write(my_words.charAt(mw));
}
}
</script>
</td></tr></table>

If NS4 doesn't respect <font style="color:#???">, just change that line to something it does render. The string.charAt is NS2+,IE3.02+ so should be fine.

Roy Sinclair
10-15-2002, 04:15 PM
<font style="color:#???">

Come one now, using style sheets with the font tag is like putting buggy wheels on a Ferrari. If you use style sheets then use the span tag, if you are exceedingly retro and insist on using font then use it's defined properties. Mixing the two is just plain wrong.

cg9com
10-15-2002, 06:14 PM
ferrari *drools*

adios
10-15-2002, 06:16 PM
Against my better judgement...



<html>
<head>
<title>untitled</title>
<style type="text/css">

select, form {
width: 136px;
font: 200 11px arial;
color: white;
background: #333333;
}

.white {
font: 200 24px "comic sans ms";
color: white;
}

.red {
font: 200 24px "comic sans ms";
color: red;
}

.yellow {
font: 200 24px "comic sans ms";
color: yellow;
}

.coral {
font: 200 24px "comic sans ms";
color: coral;
}

.olive {
font: 200 24px "comic sans ms";
color: olive;
}

.green {
font: 200 24px "comic sans ms";
color: green;
}

.purple {
font: 200 24px "comic sans ms";
color: purple;
}

.gold {
font: 200 24px "comic sans ms";
color: gold;
}

.silver {
font: 200 24px "comic sans ms";
color: silver;
}

.skyblue {
font: 200 24px "comic sans ms";
color: skyblue;
}

.darkorange {
font: 200 24px "comic sans ms";
color: darkorange;
}

</style>
<script type="text/javascript" language="javascript">

var HTML = '';

function alternate(colorpair) {
if (document.layers) return NS_alternate(colorpair);
var el = document.getElementById('alternator');
if (!HTML) HTML = el.innerHTML;
colorpair = colorpair.split('|');
var text = HTML.split(' '), output = '';
for (var w=0; w<text.length; w++) {
output += '<span style="color:' + ((w%2) ? colorpair[0] : colorpair[1]);
output += ';">' + text[w] + ' </span>';
}
el.innerHTML = output;
}

function NS_alternate(colorpair) {
HTML = 'This is how the line of text should look after the alternating color effect';
HTML += ' is applied. And so on, and so forth....';
colorpair = colorpair.split('|');
var text = HTML.split(' '), output = '';
for (var w=0; w<text.length; w++) {
output += '<span class="' + ((w%2) ? colorpair[0] : colorpair[1]);
output += '">' + text[w] + ' </span>';
}
document.alternator.document.write(output);
document.alternator.document.close();
}

</script>
</head>
<body bgcolor="black" onload="document.forms[0].reset()">
<form>
<select onchange="if(selectedIndex)alternate(options[selectedIndex].value)">
<option>select colors</option>
<option value="red|yellow">red & yellow</option>
<option value="coral|olive">coral & olive</option>
<option value="green|purple">green& purple</option>
<option value="gold|silver">gold & silver</option>
<option value="skyblue|darkorange">skyblue & dark orange</option>
</select>
</form>
<div id="alternator" class="white" style="position:absolute;top:140px;">
This is how the line of text should look after the alternating color effect is applied.
And so on, and so forth....</div>
</body>
</html>


There are positioning considerations involved with NS4 Layers (which actually are 'layers'). See if you can figure them out. I await your many follow-ups. :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum