[marcamos]

I'm not sure I can use jQuery for this, since it waits for the page to be ready before firing, but I could be wrong...

Basically, I'd love to change a class-name to one of a few specified names, randomly, every time the document loads. For instance...

.photoSet1 {background-image:url(path/to/photo1.jpg);}
.photoSet2 {background-image:url(path/to/photo2.jpg);}
.photoSet3 {background-image:url(path/to/photo3.jpg);}

<div class="photoSet1">

.. stuff ..

</div>

Every the page is loaded, I'd like to change the div element's class to either 'photoSet1', 'photoSet2', or 'photoSet3', randomly ... then, naturally, based on the class that's pumped into the <div> element, the background image will change.

Can this be done using jQuery? Either way, what's the slimmest JavaScript needed to accomplish this?

Thanks all!

[haku]

I'm not a jquery guy. I have used it a little, and I can kind of use it, but I am by now means a pro. I can give you a few pointers though. First, you want to generate a random number between 1 and however many potential images you have. This way you can use the random number, and assign the class name using that random number. To generate a random number, you can use this formula:

var rand_no = Math.floor((A-(B-1))*Math.random()) + B;

Where A is the top number in the range, and B is the bottom number in the range. So for example if you want a number between 1 and 3, you would use:

var rand_no = Math.floor((3)*Math.random()); // this comes from var rand_no = Math.floor((3-0)*Math.random()) + 0;

Then, you want to attach that random number to the rest of the class name.

var className = 'photoSet' + rand_no

From there, you can use the jquery functions to assign className to the class of the element.

As for waiting until the document loads, I believe that it is possible to target a specific element onload using jquery, though I don't remember exactly how to do it. Maybe someone else can help out a little more with that.

Are there any jquery forums out there?

edit: apparently there is! http://www.jqueryhelp.com/

[marcamos]

Looking around a little bit more, I discovered that there is a way to fire off jQuery before the page finishes loading:

$(document).ready(function(){
	 Your code here
});

Instead of waiting for the page to load, this simply waits for the DOM to load. Knowing that the DOM finishes loading before all images (and, I think, links to CSS files), I should be OK using jQuery.

I just need to apply what you've suggested to this ... I think. I'm so bad with JavaScript.

[marcamos]

Got it to work, thanks to your assistance haku:

$(document).ready(function(){
	var rand_no = Math.floor((4-1)*Math.random()) + 1;
	var className = 'photoSet' + rand_no;
	$("#homePhotoBoard").addClass(className);
});

[haku]

Nice! Glad to have given you a nudge in the right direction. Good job on figuring it out yourself.

[Barnard]

I want to learn java script . where can I learn it tell me please.if you have knowledge about this.

[EncoderDecoder]

try www.w3schools.com..

it's a pretty organized website meant for tutoring web developers like us..