Question

I would like to add a randomly generated margin-left and margin-top values to each element, however within a range.

Between -50px and 0px and 50px. Creating a different staggered and overlapping look each time you refresh

<div class="thumbnail" style="margin-top:55px; margin-left: -20px;">
<p>content</p>
</div>

<div class="thumbnail" style="margin-top:-20px; margin-left: 40px; ">
<p>content</p>
</div>

<div class="thumbnail" style="margin-top:70px; margin-left: 2px;">
<p>content</p>
</div>

Any advice would be great.

Answer 1

You could do:

function randomMargin(){
    var randomnumber1=Math.floor(Math.random()*101) - 50;
    var randomnumber2=Math.floor(Math.random()*101) - 50;
    $('.thumbnail').css({"margin-top": randomnumber1+"px", "margin-left": randomnumber2+"px"});
}

setInterval(randomMargin, 1000);

Fiddle here http://jsfiddle.net/dnxFn/1/

EDIT for multiple object and a wicked effect:

function randomMargin(){
    $('.thumbnail').each(function(){
        randomizeObject(this);

    });

}

function randomizeObject(el){
    var randomnumber1=Math.floor(Math.random()*101) - 50;
    var randomnumber2=Math.floor(Math.random()*101) - 50;
    $(el).css({"margin-top": randomnumber1+"px", "margin-left": randomnumber2+"px"});
}

setInterval(randomMargin, 1000);

fiddle here http://jsfiddle.net/dnxFn/2/

EDIT -2 this one is the best looking by far http://jsfiddle.net/dnxFn/4/