Add Random CSS on Each Instance of a Class With jQuery

Question

What I need to do is add one of three CSS styles to every instance of .project_content in my HTML, and the style needs to be picked at random for each instance.

The three styles are as follows:
float:left
float:right OR
margin:auto + width:x (where the width of .project_content is calculated and x is the calculated width)

Right now I have this:

<script type="text/javascript">
$(document).ready(function(){
    var floats         = ["right","left"];                
  var rand = Math.floor(Math.random()*floats.length);           
  $('.project_content').css("float", floats[rand]);
});
</script>

All this script is doing for me is applying float:left or float:right to ALL instances of .project_content instead of choosing right or left for each instance.

How do I get my script to pick a random variable for each instance of project_content and how can I add the margin:auto + calculated width into the mix? Thanks so much.

João Silva · Accepted Answer · 2012-09-07 22:54:55Z

7

You need to get a random style for each element in the set, instead of a single random value for the entire set. That can be done using .css( propertyName, function(index, value) ), since the function gets called for each matched element:

$('.project_content').css("float", function () {
  var rand = Math.floor(Math.random() * floats.length);
  return floats[rand];  
});

DEMO.

To add margin and width into the mix, you can no longer use css() (since you need to modify one of multiple properties), but you can do it using .each():

var styles = [ "left", "right", "margin" ];
$('.project_content').each(function () {
  var randomStyle = styles[Math.floor(Math.random() * floats.length)];
  if (randomStyle == "left" || randomStyle == "right") {
    $(this).css('float', randomStyle);
  } else { // margin
    $(this).css('margin', 'auto')
           .css('width', your_calculated_width);
  }
});

edited Sep 7, 2012 at 22:54

answered Sep 7, 2012 at 22:17

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RiaanP Over a year ago

A little side note on this solution. You can get attributes of the relevant DOM element like this: $('element').css({left:function(){return $(this).attr('original-x');});

Collectives™ on Stack Overflow

Add Random CSS on Each Instance of a Class With jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related