Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

jQuery Color Randomizer

Discussion in 'Website Design Forum:' started by iEthan, Jul 29, 2009.

  1. iEthan

    iEthan Member

    I'm making a update to my site (Ethan Turkeltaub). If you visit it, you see that the lines at the top and bottom and nav links are a blue. When you click About, they all change color. And vice versa for the other links.

    I want to be able to randomize between these colors and change the lines and links accordingly. So, if I go to the home page, it could be blue or one of the other colors found in my site, then I refresh, and it is different.

    How could I do this?
     
  2. Sunburn

    Sunburn Active Member

  3. iEthan

    iEthan Member

    That doesn't really help...
     
  4. Renniks

    Renniks Senior Member

    Read the links and google the keywords from his post, dont expect the answer to be typed word for word?
     
  5. Sunburn

    Sunburn Active Member

    What you mean it doesnt help?

    Take a look through the two examples I have provided, Im sure you can modify them to suit your needs, the first link in particular you could create an array of css classes that equate to differing colour scheme, then using jquery pick from the array (randomly ) one of the values / classes and apply that to the body class of your page, thus changing the colour scheme.

    Alternatively you can do something similar using php, should you so wish.
     
  6. glenwheeler

    glenwheeler Senior Member

    The ones sunburn posted should help they just taught me a thing or 2
     
  7. Harry

    Harry Senior Member

    PHP:
    <?php
        
        $colours 
    = array('f00','0f0','00f');
        
    shuffle($colours);
        
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <title>Random colours</title>
        <style type="text/css">
            a    { color:#<?php echo $colours[1]; ?>; }
        </style>
    </head>
    <body>
        <p><a href="http://csswizardry.com/">Link</a></p>
    </body>
    </html>
    Done.
     
  8. iEthan

    iEthan Member

    Thank you Harry. That is what I was looking for.

    See, I am terrible at Javascript, and I tried modding them--no dice.
     
  9. Harry

    Harry Senior Member

    You're welcome.
     
  10. Sunburn

    Sunburn Active Member

    Have you learnt anything though?
     
  11. Harry

    Harry Senior Member

    He should do by reverse engineering. It's quite simple to see what the PHP does.
     
  12. Renniks

    Renniks Senior Member

    For you maybe, but someone with no knowledge of php or programming would probably get nothing out of that :D
     
  13. Harry

    Harry Senior Member

    Okay.

    $colours is an array which contains a series of colour values. You can continue adding to these values but make sure they are separated by a comma each time.

    Next, shuffle($colours) randomises the order of the array's content. This means the first value of the array is randomised each time the script runs.

    Finally, echoing the second (arrays start at 0, so 0=1st, 1=2nd etc etc) value of the randomised array, you should get a different colour each time.

    Think of it like this:

    The array is a deck of cards.
    Shuffle is shuffling those cards.
    Echoing the second value is picking the second card from the shuffled deck. So although it's always the second card, it's a different one as the order of the cards keeps changing.
     
  14. iEthan

    iEthan Member

    Yeah, I had no idea the shuffle function existed. Thanks.
     

Share This Page