Load different stylesheets at random on page load

[mattron]

Hey fancy folks! I have a challenge I’m trying to solve that involves loading different background images at random on the page load, but here’s the tricky part, for two separate elements on the page that correspond to each other.

So I have a banner with a background image, and a “logo” that has a corresponding background image. See this screenshot:

The banner is the long thing with the “Matt Soria” on it (obviously I think), and the “logo” is that triangular shape.
The idea is to have a directory of background-images that will load for these elements at random upon each page load, for example, here is a variation where a different image is used:

So loading random background-images for each of the images INDEPENDENTLY is no problem at all (I have used Matt Mullenweg’s Random Image Script with satisfaction) – but the challenge I face is that the background image that loads in the banner needs to be the corresponding image that loads in the triangular logo.

My initial thought was to find out how to load different stylesheets (on top of the base stylesheet) at random upon the page load, and simply create a different stylesheet for each image set (probably around 5 or so) and only include the styles that would change those background images, like such:

#banner {
background: url('banner-image-1.png');
}
#logo {
background: url('logo-image-1.png');
}

I found a post on Stack Overflow that showed how to load random stylesheets with javascript using the following method:

var link = [];
link[0] = "http://site.com/css/style1.css";
link[1] = "http://site.com/css/style2.css";
link[2] = "http://site.com/css/style3.css";


$(function() {
var style = link[Math.floor(Math.random() * link.length )];
$('<link />',{
rel :'stylesheet',
type:'text/css',
href: style
}).appendTo('head');
});

My worry about using this method is will this load the styles inline, directly into the page’s head? And if so, is that bad? My usual tendency is to steer clear of having any styles load inline.

Has anyone had to achieve something similar to this, and know a good or better way of doing it? I’d appreciate any insight, guidance, or help!

Thanks!

[mattron]

right on – yeah, I’ll have a standard background image in the main css set, and probably just use “important!” in the separate stylesheets to have them take priority over the fallback images when JS is enabled.

But you think this will work alright? No idea on a simpler solution?

Thanks for in the input!

[mattron]

So I found this solution, which I like much better than the JS solution I listed in the original post:

#125896

[Kitty Giraudel]

Unless you plan on changing the entire layout, you’d better go with a little JS script which handles this without adding/removing stylesheets (less HTTP requests).

Something like:

function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}

var items = [
'path/img1.jpg',
'path/img2.jpg',
'path/img3.jpg',
'path/img4.jpg',
'path/img5.jpg'
];
var rand = randomFromTo(0,4);
var header = document.getElementById('header');

header.style.backgroundImage = items[rand];

Forgive my JS. It only aims at giving you the idea. :)

[wolfcry911]

why not use one stylesheet and change a body id?

[Kitty Giraudel]

why not use one stylesheet and change a body id?

Very good idea indeed. Probably the fastest way to do it.

[Paulie_D]

why not use one stylesheet and change a body id?

But not random as he wanted.

[Kitty Giraudel]

With a very tiny bit of JS he could randomly change the ID. Or even better with PHP.

[Paulie_D]

The other part was

here’s the tricky part, for two separate elements on the page that correspond to each other.

However, I’m not seeing the need as this could just be done with the ‘header’ bg based on the supplied images…but perhaps there is something else we’re not seeing in the HTML that makes this necessary?

[mattron]

Hey – thanks everyone for your input, I really appreciate it!

But yeah, Paulie_D is right – those ideas are great but they don’t solve the issue of having two elements change at random, but CORRESPONDINGLY, which yeah Paulie_D, the easiest solution is make it one bg image, but the triangle element is independent because it is a clickable anchor and does some things on hover, etc., and the banner is obviously just decorative.

So I ended up using the php random stylesheet linked in the header:

<link href="/styles/<?php echo mt_rand(1, 5); ?>.css" rel="stylesheet" type="text/css"/>

Works well, but I’m still definitely open to any other suggestions any has – this has been the simplest one I’ve come across so far…

[wolfcry911]

Use php or javascript to randomly change the body id. Load one stylesheet – cached for the entire site, with your random settings.

The body id can easily handle the corresponding elements. As a very rough example using your images above (and an additional blue tone):

.logo { background: url(/img/charcoal_logo.png); }
.banner { background: url (/img/charcoal_banner.png); }
#scenic .logo { background: url(/img/scenic_logo.png); }
#scenic .banner { background: url(/img/scenic_banner.png); }
#sky .logo { background: url(/img/sky_logo.png); }
#sky .banner { background: url(/img/sky_banner.png); }

Here the default will be the charcoal banner and logo. If an id of #scenic is put on body, then the logo and banner change backgrounds; likewise with sky…

[mattron]

wolfcry911 – sorry I didn’t pick up on this when you mentioned it in your earlier comment, for whatever reason I just didn’t comprehend what you were saying until you just laid it out like this – and thanks! That’s a brilliant idea! I like the idea of loading different ids at random a lot more than loading different stylesheets at random – granted they are really small so I doubt they will add much weight, but still. This is much more simple…I like simple!

Thanks a lot!

[Author]

Posts