How can i put random values to css properties using JQuery?

Question

I want to generate properties to a known number of divs but i can figure out where did i go wrong. What i have tried for now is:

$(document).ready(function(){
   for(var i=1; i<=7; i++)
   {
    var randBottom = Math.ceil(Math.random()*200); 
    var randHeight = Math.ceil(Math.random()*300)+200-randBottom;
    var randWidth = Math.ceil(Math.random()*50)+20;
    var oceanWidth= $("#ocean").css(["width"]);
    var randLeft= Math.ceil(Math.random()*oceanWidth)-randWidth;
     var cssObj = {
        'bottom' : randBottom+'px',
         'height' : randHeight+'px',
         'widht' : randWidth+'px
        };
    $("#bubble"+i).css(cssObj);
   }
});

Here is a complete work-in-progress sample.

Works for me: jsfiddle.net/JdkPb

Jan Hančič
– Jan Hančič

2013-01-24 08:17:09 +00:00
Commented Jan 24, 2013 at 8:17 — Jan Hančič
– Jan Hančič, Commented Jan 24, 2013 at 8:17

Guffa · Accepted Answer · 2013-01-24 08:31:16Z

There are some problems with the code:

Use the width method to get the size of the element, using css(["width"]) doesn't give you the width as a number, it gives you an object with a property named width that is a string with the width and unit, e.g. { width: '420px' }.
You forgot to include the style for left.
Specify top and left instead of bottom and left. (You may need to change the calculations for that.)
You misspelled 'width' as 'widht'.
You would probably want to subtract the width of the element before multiplying with the random number to calculate the left position, otherwise you get negative values.

This will at least place the elements somewhere:

for(var i=1; i<=7; i++)
   {
    var randBottom = Math.ceil(Math.random()*200); 
    var randHeight = Math.ceil(Math.random()*300)+200-randBottom;
    var randWidth = Math.ceil(Math.random()*50)+20;
    var oceanWidth= $("#ocean").width();
    var randLeft= Math.ceil(Math.random()*(oceanWidth-randWidth));
     var cssObj = {
        'left': randLeft + 'px',
        'top' : randBottom+'px',
         'height' : randHeight+'px',
         'width' : randWidth+'px'
        };
       console.log(cssObj);
    $("#bubble"+i).css(cssObj);
   }

Ali Bassam · Accepted Answer · 2013-01-24 08:18:03Z

1

There's some errors in your code.

$(document).ready(function(){
   for(var i=1; i<=7; i++)
   {
    var randBottom = Math.ceil(Math.random()*200); 
    var randHeight = Math.ceil(Math.random()*300)+200-randBottom;
    var randWidth = Math.ceil(Math.random()*50)+20;
    var oceanWidth= $("#ocean").css(["width"]);
    var randLeft= Math.ceil(Math.random()*oceanWidth)-randWidth;
     var cssObj = {
        'bottom' : randBottom+'px',
         'height' : randHeight+'px',
         'width' : randWidth+'px'
        };
    $("#bubble"+i).css(cssObj);
   }
});

answered Jan 24, 2013 at 8:18

Ali Bassam

10k24 gold badges71 silver badges121 bronze badges

Comments

Dipesh Parmar · Accepted Answer · 2013-01-24 08:19:14Z

1

You forget ' at the end of last element in css object.

var cssObj = 
{
    'bottom' : randBottom + 'px',
    'height' : randHeight + 'px',
    'widht' : randWidth + 'px'
};

answered Jan 24, 2013 at 8:19

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Collectives™ on Stack Overflow

How can i put random values to css properties using JQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related