jQuery - load/replace a navigation with a new navigation randomly each time the user refreshes the home page

I’m pretty new to jQuery and am finding it very difficult finding a plugin/ script that can help me achieve what I would like to, there are scripts that randonly change a background image and lots of rotators that auto refresh, it's not quite wh开发者_StackOverflowat I'm after. I’m building a website for an artist and would like to load/replace a navigation with another navigation randomly each time the user refreshes the home page, a little unconventional I know but part of the whole art experience I guess...

I’d like to replace the ul.home-nav-left class randomly with e.g. ul.home-nav-left-1, ul.home-nav-left-2, ul.home-nav-left-3 - each one of these navs shows different artistic work and are css sprites - I have all that working great so don't need help with that bit, I don't want to randomly replace the list items but rather the whole unordered list.

Any assistance or a point in a direction would be a great help, thanks!

You need to generate a random index. And use the "home-nav-left" in your nav s, with the css ".home-nav-left { display: none; }".

But the generated random number on a short range will be often the same.

So you will need a way to remember the last menu displayed for a user (cookie, database log, session, ...).
If you have access to php, use rand() function, way easier, but with the same drawbacks.

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

$(document).ready(function(){  
    var r = randomFromTo(1, $('.home-nav-left').length);  

    $('.home-nav-left').eq(r - 1).show();  
});  

http://jsfiddle.net/n4LWH/

If I were you I wouldn't do that in jquery I would do that in a server side language (ASP/PHP/.NET). You could write out all your navigation options and then place a simple 'display:none' on all but the randomly selected navigation, or even better, only write out the randomly picked navigation option.