Relax with Javascript: Randomize Your CSS Style
Spread it!
This is just a small tip for fun. Sometime, we are bored with the only-one style in our website, but today, we will make some changes. We will create a javascript to randomize the CSS every time we refresh the web page. For what? Just make our style always get new.
Try to refresh the demo page to see the effect.
We will use javascript function Math.random() to generate a random number between 0 and number of elements of an array which is an arrangement of stylesheet items.
Create a new javascript file which contains this function:
function rand(){ return Math.round(Math.random()*(css.length-1)); }
This gets us numbers from 0 to < (css.length-1) (Because the elements start from 0) which is this array below:
var css = new Array( '<link rel="stylesheet" type="text/css" href="default.css">', '<link rel="stylesheet" type="text/css" href="style2.css">', '<link rel="stylesheet" type="text/css" href="style3.css">', '<link rel="stylesheet" type="text/css" href="style4.css">' );
Then write it in HTML
rand = rand(); document.write(css[rand]);
That’s it! Enjoy the random CSS by refresh your webpage. Your random effect will show clearly if you have many elements in array. The more elements, the less repeat.
Related Posts
- Selecting random record from MySQL database table.
- Learning jQuery: Submit form PHP Mac style Modal window
- CSS text-indent: An Excellent Trick To Style Your HTML Form
- Interesting list of tutorials and codes to build a rounded corners with Javascript and CSS
- Post form to clean, a tutorial with JSP/Servlet and JavaScript
13 User Comments
Trackbacks/Pingbacks
-
-
06. Nov, 2009
[...] This post was mentioned on Twitter by Shurandy Thode, Web Design News. Web Design News said: Relax with Javascript: Randomize Your CSS Style http://bit.ly/4nA3Y1 [...]
-
-
07. Nov, 2009
Social comments and analytics for this post…
This post was mentioned on Twitter by allwebdesign: Relax with Javascript: Randomize Your CSS Style http://bit.ly/4nA3Y1...
-
-
07. Nov, 2009
[...] Visit Source. [...]
-
-
07. Nov, 2009
[...] DIRECT LINK » Go to Source Submit this to Script & StyleShare this on BlinklistShare this on del.icio.usDigg this!Post this on DiigoShare this on RedditBuzz up!Stumble upon something good? Share it on StumbleUponShare this on TechnoratiShare this on MixxPost this to MySpaceSubmit this to DesignFloatShare this on FacebookTweet This!Subscribe to the comments for this post?Share this on LinkedinSeed this on NewsvineShare this on DevmarksAdd this to Google BookmarksAdd this to Mister WongAdd this to IzebyShare this on TipdShare this on PFBuzzShare this on FriendFeedMark this on BlogMarksSubmit this to TwittleyShare this on FwispMoo this on DesignMoo!Share this on BobrDobrAdd this to Yandex.BookmarksAdd this to Memory.ruAdd this to 100 bookmarksAdd this to MyPlaceSubmit this to Hacker NewsSend this page to Print FriendlyBump this on DesignBumpAdd this to NingPost this to IdenticaIf you enjoyed this post, make sure you subscribe to my RSS feed! Tags: JavaScript, link, randomize, style, today, website [...]
-
-
09. Nov, 2009
[...] Relax with Javascript: Randomize Your CSS Style [...]
-
-
12. Nov, 2009
[...] Relax with Javascript: Randomize Your CSS Style [...]
-
-
26. Nov, 2009
[...] Link to original Post: [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
Nice . A suggestion. should added a text or something that says refresh the page to see the effect. Might be better for some user
Yes, that’s good for some users. Thanks for the suggestion Kawsar!
Nice, clean and easy!..
I make something like that in my website!..
http://pinguinox.com.ar ( work in progress website!.. )
Saludos!..
Great tips.
Tnx.
Awesome tips. Thanks for sharing this nice post.
thanks for tips