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
Post a Comment