Tengo elementos ALEATORIOS flotantes dentro de DIV, variando la posición IZQUIERDA y SUPERIOR dentro del padre <div class="main"></div> . Cómo calcular y establecer las posiciones IZQUIERDA y SUPERIOR matemáticamente en javascript/jQuery para que ningún elemento aleatorio NO vaya más allá del límite definido por el padre
html:
<div class="main"></div>JavaScript:
for (var i = 0; i < 5; i++) { $('.main').append('<div class="box"></div>'); } $( '.box' ).each(function( index ) { $(this).css({ left : ((Math.random() * $('.main').width())), top : ((Math.random() * $('.main').height())) }); });Ejemplo: https://jsfiddle.net/iahmadraza/u5y1zthv/
Gracias
Los elementos .box se fijan en 100 100px de alto y ancho, por lo que para lograr lo que necesita simplemente elimine esa dimensión del posible valor aleatorio máximo:
$(this).css({ left: Math.random() * ($('.main').width() - $(this).width()), top: Math.random() * ($('.main').height() - $(this).height()) });