Random CSS Stylesheet selector exists?

Posted By: john_dush () Posted On: 2006-Jan-21 21:51
I'm looking for a Javascript function or similar which will automatically load a different stylesheet randomly each time a page is visited. I have found several which work on user selection, or on browser size. My Javscript coding isn't up to adapting them If anyone knows of an example, I'd appreciate the knowledge. It's just so that the user goes "Ohooh "

Posted By: Curt ()
Posted On: 2006-Mar-09 23:23

Copy the following code to your computer for testing:

Call the first file: test.htm
Drop this code into that file:

Code: [copy]

<html> <head> <title>test</title> <script type="text/JavaScript" src="css.random.js"></script> </head> <body> <p>test page text.</p> <p>Happy random CSS.</p> <p>the random style sheet file picked is: <span class="scolor">style<script type="text/JavaScript"></script>.css</span> </body> </html>

Call the second file: css.random.js
Drop this code into that file:

Code: [copy]

RandCSS() function RandCSS() { a = Math.round(Math.random() * 3 + 1) if (a > 3) { RandCSS() } else { WriteCSS() } } function WriteCSS() { document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"style" + a + ".css\">") }

Call the third file: style1.css
Drop this code into that file:

Code: [copy]

body { background-color: #ccc; font-family: verdana; font-size: 10pt; } .scolor { color: #b00; }

Call the fourth file: style2.css
Drop this code into that file:

Code: [copy]

body { background-color: #a77; font-family: verdana; font-size: 16pt; } .scolor { color: #600; }

Call the fifth file: style3.css
Drop this code into that file:

Code: [copy]

body { background-color: #558; font-family: verdana; font-size: 20pt; color: #fff; } .scolor { color: #bbf; }

Those are your test files. I kept the code real simple so that you can observe what happens each time the page loads up. Each time the page loads, the JavaScript generates a random number of 1, 2, or 3 which corresponds to the style sheet file name with the number as part of the file name.

Reload the test.htm page several times to see it cycle through the style sheets.

HTH

Posted By: john_dush () Posted On: 2006-Mar-10 10:02
Curt, That's fantastic. Thanks.

Posted By: Curt () Posted On: 2006-Mar-11 08:57
Yep, that's why I luv JavaScript! Long live JavaScript! Glad to help

Posted By: fluidblogger ()
Posted On: 2006-Mar-11 16:57

I just wrote this off the top of my head so excuse its shabbyness.. but you could simply have X style sheets and select them randomly..
This should work [untested]

Code: [copy]

if (window.screen){ var ranNum= Math.round(Math.random()*4); document.write("<link rel='stylesheet' href='pathto/stylesheet"+ranNum+".css' type='text/css'>"; }

the above script will select between 4 stylesheets, to get more or less swap the number.. call each style sheet "stylesheetX.css" where X is the number..

hope that makes sence, so simple but it should work

:crosses fingers:

fluid

Posted By: fluidblogger () Posted On: 2006-Mar-11 17:00
lol sorry thats so simple it makes the other example well complicted, sorry :

Posted By: Curt ()
Posted On: 2006-Mar-12 07:14

The only thing with the second JavaScript code is that it will allow for five numbers 0-4 because some numbers will round down to zero. So what appears to be 4 numbers is actually 5 numbers and so forth. You'll need to ensure that the number zero is included for your style sheets for the 2nd code.

The first JavaScript routine is designed to ensure that numbers picked are 1, 2, or 3 and so forth (depending on how many style sheets you want). Both are nearly equally simple really, but neither do exactly the same thing.

Posted By: fluidblogger () Posted On: 2006-Mar-12 15:29
if (window.screen){ var ranNum= Math.round(Math.random()*4+1); document.write("<link rel='stylesheet' href='pathto/stylesheet"+ranNum+".css' type='text/css'>"; } there fixed numbers are now 1-4

Posted By: Curt () Posted On: 2006-Mar-15 09:13
fluidblogger, 4 + 1 = 5 You still have 5 style sheets even though the number looks like 4. The only way to ensure 1-4 is to use the first method. Can't get around the If-Then statement.

Posted By: fluidblogger () Posted On: 2006-Mar-15 18:37
well I hadn't actually put any thought into this, however, give me five and the solution will be here without the if else (if possible)

Posted By: fluidblogger ()
Posted On: 2006-Mar-15 18:45

Here you go :)

Code: [copy]

if (window.screen){ var ranNum= Math.floor(Math.random()*4+1); document.write("<link rel='stylesheet' href='pathto/stylesheet"+ranNum+".css' type='text/css'>"; }

This will only ever produce numbers between 1 and 4

Explanation
math.random() creates a numer BETWEEN 0 and 1
so the highest valu is 0.99
0.99 * 4 = 3.96
3.96 + 1 = 4.96
math.floor, rounds down.. so turns the number into 4

any questions?

Posted By: fluidblogger () Posted On: 2006-Mar-15 18:47
writes a note to himself to actually check all code before simply banging it out onto a page in future to prevent this from happening again [oh.. no if else]

Posted By: Curt () Posted On: 2006-Mar-15 23:06
fluidblogger, you could even lose the IF-ELSE statement: Code: [copy] a = Math.floor(Math.random() * 4 + 1) document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"style" + a + ".css\">") Aren't these exercises fun? :D

Posted By: Curt () Posted On: 2006-Mar-15 23:15
Oops, spoke too soon. My original IF-ELSE statement is needed to hold numbers 1 - 4: a = Math.floor(4.9999999999999999) rounds to: 5 guess yah can't get around the original IF-ELSE.

Posted By: fluidblogger () Posted On: 2006-Mar-17 00:27
well actually.. hate to go with this one but.. math.random creates a figure between 0 and 1 with 15 decimal places.. so the highest value possible is 0.999999999999999 0.999999999999999*4 = 3.999999999999996 3.999999999999996+1 = 4.999999999999996 Math.floor(4.999999999999996) = 4 maybe you can get around it

Posted By: Prowler (Staff) Posted On: 2006-Mar-17 05:21
Wow.

Posted By: Curt () Posted On: 2006-Mar-18 10:54
fluidblogger, it would seem you have something there (provided something else isn't happening in addition when random numbers are generated and multiplied). These hypothetical screwy programming rules can catch us off-guard. I attempted to cover every contingency in my code, but you probably have something there. It was fun

Posted By: fluidblogger () Posted On: 2006-Mar-18 19:34
yup I concurr, scripting / programming is what I do, and pitting ones wits against another is great, makes a pleasant change. No maliciousness in it, its enjoyable!

Posted By: Prowler (Staff)
Posted On: 2006-Mar-19 06:25

This reminds me of one of our clients who took elaborate pains to sniff out the type of browser plugins the visitor used and delivered tailor-made pages. Worked very well for most of the visitors but choked when no parameter was passed on to the PHP script. Robots and browsers which had Javascript turned off were fed with an almost blank page.

"Variables won't and constants aren't "

Some assumptions we make don't always correspond with realities.

Posted By: Curt () Posted On: 2006-Mar-19 19:31
Prowler, I can't imagine taking that kind of time to program the page to work on every browser. It's one thing to code up JavaScript to work well, but quite another to code up a page to work on every browser. For me, I'm quite happy if my JS works on Mozilla, MSIE, and perhaps Opera. The rest of the browsers are bonus if they execute the JS properly. If the rest don't, I do not lose sleep.