Log in

View Full Version : Random style sheet + Random content... Possible?


candied_ram
01-09-2008, 04:40 PM
Hi, I'm new to these forums and my knowledge of JS is minimal. But, if someone kind would consider helping me out, I'll really appreciate it.

I've been fighting problem after problem trying to implement an idea I had (I really didn't think it would be difficult when I started.) I like to make my own home page and store it on my hard drive. I just wanted to have it have a random style and MIDI (that could be turned on and off via an iframe) each time I load it.

I thought I found just the right script on JSKit, but the random content can't be applied to the style sheet in either FF2 or IE7. (I should have known better. *blush*)

DD, on the other hand, has a script even better than what I imagined for a random style sheet.

I would really, really love to be able to fuse these two scripts somehow, but as I said, I'm a JS novice, and I haven't a clue how to go about it.

The (particularly excellent) random content script can be found here:
http://www.javascriptkit.com/script/script2/randomcontent.shtml

The (mind-blowingly cool) random style sheet is here:
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

If anybody has any ideas on how to do this, or where I can find such a script, please post! (I promise I won't abandon the thread and put you out for no reason like many newbies are prone to doing.)

PS: Just to clarify, I'm hoping for this script because I'd like the style sheet and the random content linked, rather than have each one be independently random.
emminar
01-10-2008, 02:14 AM
I think this is what you want, to have each time the page loads, a random style is embedded.

Just change the values in the array to the random style sheets:


<script language="JavaScript">
<!--
styles = new Array
styles[1]="<style type="text/css>@import url('1.css');</style>"
styles[2]="<style type="text/css>@import url('2.css');</style>"
styles[3]="<style type="text/css>@import url('3.css');</style>"
styles[4]="<style type="text/css>@import url('4.css');</style>"
styles[5]="<style type="text/css>@import url('5.css');</style>"
styles[6]="<style type="text/css>@import url('6.css');</style>"
styles[7]="<style type="text/css>@import url('7.css');</style>"
styles[8]="<style type="text/css>@import url('8.css');</style>"

random_num = (Math.round((Math.random()*7)+1))

document.write(styles[random_num]);
-->
</script>


Put that in your <head> where the style sheet would be called. It will choose a random style sheet out of the array and write it onto your page.

You could also do this in php with array_rand.

For the random content, just use this same script, but replace the css tags with text.

For the content part, if you use the same variable, random_num, you can have one sylesheet match up with one set of text:



content[random_num]


Good luck!


Emminar
candied_ram
01-12-2008, 01:23 AM
Emminar - Thank you so much! :D You're awesome! This is exactly what I was hoping for. Here's hoping I don't screw up the content part (like I said, I'm a total novice) but I think I can manage. :)

Thank you again!