Member Avatar for Sisil

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 sad

If anyone knows of an example, I'd appreciate the knowledge. It's just so that the user goes "Ohooh "

  • 5 Contributors
  • 4 Replies
  • 403 Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for tgreer

JavaScript is not well-suited to this task. You need to use a server-side language to render the style sheet link dynamically.

Member Avatar for katarey

Hi there,

first i am agree with tgreer,

well but you can use JavaScript to do this functionality,

here the is Code:
page.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Random Css Using Javascript</title>
<script language="JavaScript" type="text/javascript" src="randomCss.js"></script>
</head>
<body>
<table width="100%" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td height="153"><div align="center">StyleSheet Will change on every reload of this page</div></td>
    <td><div align="center">To view effect Press F5 </div></td>
  </tr>
</table>
</body>
</html>

randomCss.js :

function get_randomCssNum()
{
    var ranCssNum= Math.floor(Math.random()*5);
	//var ranCssNum= Math.floor(Math.random()*Number of CSS you Have);
    return ranCssNum;
}

function getaCss()
{
   var whichCss=get_randomCssNum();

    var cssName=new Array(5)
     // var cssName=new Array(Number of CSS you Have)
     cssName[0]="<link rel='stylesheet' type='text/css' href='a.css'>";
     cssName[1]="<link rel='stylesheet' type='text/css' href='b.css'>";
     cssName[2]="<link rel='stylesheet' type='text/css' href='c.css'>";   
     cssName[3]="<link rel='stylesheet' type='text/css' href='d.css'>";
     cssName[4]="<link rel='stylesheet' type='text/css' href='e.css'>";
     //I am using 5 CSS files in this example. you can add or remove ;)
     //for Add more CSS just add line like this 
     //cssName[Next Number]="<link rel='stylesheet' type='text/css' href='CSS FILE URL'>";
  	return cssName[whichCss]
  }
  document.write(getaCss());

example :http://www.katarey.com/downloads/randomCss/

I hope this will useful or you!

Best Regards,
Rahul Dev

Member Avatar for zirwo01

I used the above example on my website and it works fawlessly

Member Avatar for Taywin

It is 6 years old thread!!!

Anyway, to answer why the JavaScript does not really fit to this task because it is pointless. If you are going to expose all of your CSS file names, why bother putting them in an array and random pick one to add to your document? If you said there are overlap CSS, then why not create a theme instead of separated files? In other words, the idea is already flaw, so enforcing by using JavaScript does not gain you anything...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.