john_dush
Joined: May 07, 2000
# Posts: 144
|
Posted: 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 "
|
 |
Curt
Joined: Eons Ago
# Posts: 3747
|
Posted: 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:
Call the second file: css.random.js
Drop this code into that file:
Call the third file: style1.css
Drop this code into that file:
Call the fourth file: style2.css
Drop this code into that file:
Call the fifth file: style3.css
Drop this code into that file:
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
|
|
john_dush
Joined: May 07, 2000
# Posts: 144
|
Posted: 2006-Mar-10 10:02
Curt,
That's fantastic. Thanks.
|
|
Curt
Joined: Eons Ago
# Posts: 3747
|
Posted: 2006-Mar-11 08:57
Yep, that's why I luv JavaScript! Long live JavaScript!
Glad to help 
|
|
fluidblogger
Joined: Mar 08, 2006
# Posts: 28
|
Posted: 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]
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
|
|
fluidblogger
Joined: Mar 08, 2006
# Posts: 28
|
Posted: 2006-Mar-11 17:00
lol sorry thats so simple it makes the other example well complicted, sorry :
|
|
Curt
Joined: Eons Ago
# Posts: 3747
|
Posted: 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.
|
|
fluidblogger
Joined: Mar 08, 2006
# Posts: 28
|
Posted: 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
|
|
Curt
Joined: Eons Ago
# Posts: 3747
|
Posted: 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.
|
|
fluidblogger
Joined: Mar 08, 2006
# Posts: 28
|
Posted: 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)
|
|
fluidblogger
Joined: Mar 08, 2006
# Posts: 28
|
Posted: 2006-Mar-15 18:45
Here you go :)
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?
|
|
fluidblogger
Joined: Mar 08, 2006
# Posts: 28
|
Posted: 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]
|
|
Curt
Joined: Eons Ago
# Posts: 3747
|
Posted: 2006-Mar-15 23:06
fluidblogger, you could even lose the IF-ELSE statement:
Aren't these exercises fun? :D
|
|
Curt
Joined: Eons Ago
# Posts: 3747
|
Posted: 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.
|
|
fluidblogger
Joined: Mar 08, 2006
# Posts: 28
|
Posted: 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 
|
|
Prowler
Staff
Joined: Aug 14, 2000
# Posts: 1832
|
Posted: 2006-Mar-17 05:21
Wow.
|
|
Curt
Joined: Eons Ago
# Posts: 3747
|
Posted: 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
|
|
fluidblogger
Joined: Mar 08, 2006
# Posts: 28
|
Posted: 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!
|
|
Prowler
Staff
Joined: Aug 14, 2000
# Posts: 1832
|
Posted: 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.
|
|
Curt
Joined: Eons Ago
# Posts: 3747
|
Posted: 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.
|
|
Inbox
