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 9 of 9
Like Tree2Likes
  • 1 Post By glenngv
  • 1 Post By glenngv

Thread: Loop through my h3 tags and set the characters to be different colours

  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post

    Loop through my h3 tags and set the characters to be different colours

    For my h3 header, I've got each character wrapped in a span tag to be able to have different colours for each character. I have a couple of these on my page, however I would like the colours to be random for each one upon page load with no two characters having the same colour next door so to speak.

    How can I search the page for any h3 tags, even ones not currently visible, loop through each one to set their character colours to be different?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    <h3><span>H</span><span>E</span><span>L</span><span>L</span><span>O</span></h3>
    <h3><span>W</span><span>O</span><span>R</span><span>L</span><span>D</span></h3>
    <h3><span>T</span><span>E</span><span>S</span><span>T</span></h3>
    Code:
    $('h3').each(function() {
        var colors = [], randomColor;
        $('span', this).each(function() {
            do {
                randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); //from http://www.paulirish.com/2009/random-hex-color-code-snippets/
            }
            while ($.inArray(randomColor, colors) != -1)
                
            colors.push(randomColor);
            
            $(this).css('color', randomColor);
        });
    });
    Demo at Edit fiddle - JSFiddle

    You might need to change:

    Code:
    '#'+Math.floor(Math.random()*16777215).toString(16);
    to:

    Code:
    '#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6);
    based from some comments in the article that the first may return invalid values (less than 6 chars).
    Last edited by glenngv; 05-21-2014 at 08:39 PM.
    MrTIMarshall likes this.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    MrTIMarshall (05-21-2014)

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    Thank you very much. Is it possible with a minor edit for me to predefine what the colours are if I get down a list of hex codes as it may end up pulling out loads of dull black/white colours?

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Check this out:

    Edit fiddle - JSFiddle

    Edit: You can actually move the availColors var out of the h3 loop as this has a fixed value.
    Last edited by glenngv; 05-21-2014 at 09:49 PM.
    MrTIMarshall likes this.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    MrTIMarshall (05-21-2014)

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    This seems wonderful in the JSFiddle, however I don't understand why I cannot implement it into my site: Untitled Document

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I can't seem to find the script in your site.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv View Post
    I can't seem to find the script in your site.
    I can implement your script and upload, however with your script it crashes my browser and does not load the page.

  • #8
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    Updated with it implemented however it does not load for me and may not for you so I'd suggest going to this url: view-source:Untitled Document

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    What's exactly not working? I can see the "Easy as One, Two, Three?" in different colors.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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