jquery - random position of divs in javascript -


i'm trying make divs appear randomly anywhere on webpage javascript. div appears disappears, div appears somewhere else on page disappears, div appears again in random spot on page disappears, , on. i'm not sure on how generate random units in pixels or technique use generate random positions.

how do that? here's code:

var currentdivposition = mydiv.offset(),     mydivwidth = mydiv.width(),     mydivheight = mydiv.height(),             var mydiv = $('<div>'),     finaldivpositiontop, finaldivpositionleft;  mydiv.attr({ id: 'mydivid', class: 'mydivclass' }); // defined position: absolute css file.  // set new position      finaldivpositiontop = currentdivposition.top + math.floor( math.random() * 100 ); finaldivpositionleft = currentdivposition.left + math.floor( math.random() * 100 );  mydiv.css({ // set div position   top: finaldivpositiontop,   left: finaldivpositionleft });  $('body').append(mydiv);  mydiv.text('my position is: ' + finaldivpositiontop + ', ' + finaldivpositionleft);   mydiv.fadein(500);  settimeout(function(){    mydiv.fadeout(500);    mydiv.remove();         }, 3000); 

here's 1 way it. i'm randomly varying size of div within fixed range, setting position object placed within current window boundaries.

(function makediv(){     // vary size fun     var divsize = ((math.random()*100) + 50).tofixed();     var color = '#'+ math.round(0xffffff * math.random()).tostring(16);     $newdiv = $('<div/>').css({         'width':divsize+'px',         'height':divsize+'px',         'background-color': color     });      // make position sensitive size , document's width     var posx = (math.random() * ($(document).width() - divsize)).tofixed();     var posy = (math.random() * ($(document).height() - divsize)).tofixed();      $newdiv.css({         'position':'absolute',         'left':posx+'px',         'top':posy+'px',         'display':'none'     }).appendto( 'body' ).fadein(100).delay(1000).fadeout(500, function(){       $(this).remove();       makediv();      });  })(); 

edit: fun, added random color.

edit: added .remove() don't pollute page old divs.

example: http://jsfiddle.net/redler/qcupk/8/


Comments

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -