CODEWITHSUNDEEP
jqueryhtmlrandom
jkilp
jkilp

Reputation: 317

How to generate a random ID for body tag upon page load using a set array of IDs

Here's my issue:

I have a very simple html website teaser right now with a large background image (www.iambold.org).

The background image is set up on the body tag, and so is the background color. What I need is for the body tag to be randomly assigned a different ID whenever the page is loaded.

The reason for this is that each separate ID will have a different background image and different background color associated with it.

The last part is that I need the generator to only select between the IDs that I have set in the css file.

Here's the CSS for the body backgrounds:

body {font-family:'Lato',verdana,arial,sans-serif; font-size:14px; line-height:22px; }
body#body_1 {background:#fff url(../images/bg_splash.jpg) center -15px repeat-x;}
body#body_2 {background:#353932 url(../images/bg_splash2.jpg) center -15px repeat-x;}

I am familiar with jquery, and can hack codes well enough to do what I need, but I am not good enough to write my own code for these types of things.

Upvotes: 0

Views: 3456

Answers (7)

Joe
Joe

Reputation: 82634

var ids = ['body_1', 'body_2', 'body_3'];
$(function () {
    $('body').attr('id', ids[Math.floor(Math.random()*ids.length)])
});

Demo

if you keep you css declarations constant, just put this at the bottom of you page

    <script> document.body.id = "body_" + Math.floor(Math.random()*[NUMBER_OF_DECLARATIONS]); </script>
</body>

Upvotes: 1

Matt H
Matt H

Reputation: 6530

First, determine the highest tag you can use, assuming a base of #body_1

var iMax = $("style:contains('#body_')").length;

Then, set a random one to the body tag:

$('body').attr('id','body_' + (Math.floor(iMax)+1));

That should do it.

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78550

You should probably use a class and you should use simple DOM calls instead of jQuery. That being said:

var classList = ["v1","v2","v3","v4"];
document.body.className = classList[Math.round(Math.random()*4)];

Upvotes: 0

defau1t
defau1t

Reputation: 10619

You can use Math.random() to generate a random no. between 0 and 1. Then you can Math.floor() to take the nearest no. and then assign this to your body tags and have them pick one based on what is generated by Math.random() functions

Upvotes: 0

Rob W
Rob W

Reputation: 349142

  1. Store the possible IDs in a list (array).
  2. Generate a random integer using Math.random() and Math.floor().
  3. Pick the element from the list.
  4. Set the id attribute to the element's value.

Example (no jQuery needed for this simple script):

$(function(){ //<-- That's jQuery, because `document.body` does not exist
              // in the head of the document.
    var styleIds = ["body1", "body2"];
    document.body.id = styleIds[ Math.floor(Math.random()*styleIds.length) ];
});

The Math.random() method returns a random number satisfying 0 <= x < 1. Math.floor floors the number. With a list size of 2, the possible numbers are: 0 and 1, which is what we want, because indexes of arrays are zero-based.

Upvotes: 3

TJHeuvel
TJHeuvel

Reputation: 12618

You'll need to create an array with valid ids and then grab a random element from it.

Upvotes: 0

chubbsondubs
chubbsondubs

Reputation: 38857

I would use simple classes instead of ID selectors in your CSS. So define several classes in CSS then use the following snippet to assign a random class.

var classes = [ "classBg1", "classBg2", "classBg3" ];

$.ready( function() {
    var nextClass = classes[ Math.round( classes.length * Math.random() ) ];
    $('body').addClass( nextClass );
});

Upvotes: 0

Related Questions