Grow your CSS skills. Land your dream job.

Load different stylesheets at random on page load

  • # February 24, 2013 at 9:13 pm

    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 )];
    $(‘ ‘,{
    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!

    # February 25, 2013 at 12:01 am

    This appends a ` ` element to the head, so don’t worry about inline styles. Provide a fallback in your main css in case JS is disabled though.

    # February 25, 2013 at 12:04 am

    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!

    # February 25, 2013 at 12:41 am

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

    # February 25, 2013 at 4:02 am

    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. :)

    # February 25, 2013 at 7:55 am

    With that php solution you can do without additional HTTP requests and it works with JS disabled too.

    # February 25, 2013 at 8:10 am

    why not use one stylesheet and change a body id?

    # February 25, 2013 at 8:16 am

    > why not use one stylesheet and change a body id?

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

    # February 25, 2013 at 8:18 am

    why not use one stylesheet and change a body id?

    But not random as he wanted.

    # February 25, 2013 at 8:20 am

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

    # February 25, 2013 at 8:24 am

    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?

    # February 25, 2013 at 8:58 am

    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:

    # February 25, 2013 at 9:09 am

    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…

    # February 25, 2013 at 10:58 am

    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!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".