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 12 of 12
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Possible to alternate colors of words?

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



  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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>

  • #3
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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>
    Last edited by adios; 09-27-2002 at 08:21 PM.

  • #5
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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'.


  • #6
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    if (document.layers) {
    alert('Faggedaboutit!');
    location = 'http://www.alistapart.com/stories/tohell/';
    }


  • #8
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Interesting link, adios. So I guess that's a definite no go for Netscape, eh?!! And there's absolutely no work-around?


  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    577
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Ökii - formerly pootergeist
    teckis - take your time and it'll save you time.

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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.

  • #11
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ferrari *drools*

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Against my better judgement...

    Code:
    <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.


  •  

    Posting Permissions

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