jquery - scattering images within a defined space so they don't overlap -
jquery - scattering images within a defined space so they don't overlap -
hello coders of quality , others!
i using jquery script (author: marco kuiper - www.marcofolio.net) randomly places images within defined space. using mouse images can dragged around on screen, clicked enlarge.
the problem when page viewed on iphone, images cannot dragged if images overlapping cannot tapped , enlarged. thought create array of random coordinates @ to the lowest degree width of each image away each other while still fitting confines of enclosing div. images same dimensions. 1 time array created, utilize it's values position images.
here's current script places images:
$(".polaroid").each (function () { var tempval = math.round(math.random()); if(tempval == 1) { var rotdegrees = randomxtoy(330, 360); } // rotate left else { var rotdegrees = randomxtoy(0, 30); } // rotate right var position = $(this).parent().offset(); var wiw = $(this).parent().width(); // width of div enclosing object var wih = $(this).parent().height(); // heiht of div enclosing object var leftpos = math.random()*(wiw - $(this).width()) + position.left; var toppos = math.random()*(wih - $(this).height()) + position.top; var cssobj = { 'left' : leftpos, 'top' : toppos, '-webkit-transform' : 'rotate('+ rotdegrees +'deg)', // safari '-moz-transform' : 'rotate('+ rotdegrees +'deg)', // firefox 'tranform' : 'rotate('+ rotdegrees +'deg)' // if css3 standard }; $(this).css(cssobj); } );
my scripting skills not quite sufficient this, help appreciated.
thanks!
i'd need see html , css help grid layout, far javascript goes, , if random rotation suffice, can remove bits positioning:
$(".polaroid").each (function () { var tempval = math.round(math.random()); if(tempval == 1) { var rotdegrees = randomxtoy(330, 360); } // rotate left else { var rotdegrees = randomxtoy(0, 30); } // rotate right var cssobj = { '-webkit-transform' : 'rotate('+ rotdegrees +'deg)', // safari '-moz-transform' : 'rotate('+ rotdegrees +'deg)', // firefox 'tranform' : 'rotate('+ rotdegrees +'deg)' // if css3 standard }; $(this).css(cssobj); } );
jquery image random position overlapping
Comments
Post a Comment