I have several frames in my html that are draggable using a js function. They are scattered around with a unique "left" and "top" values in CSS.
I want to generate random left and top values every time the page is loaded / refreshed. They should range from 10 to 1000 (px).
div CSS (I have around 7 of them):
#mydiv1 {
position: absolute;
z-index: 0;
width: 250px;
height: 250px;
top: 400px;
left: 500px;
background-color: black;
border: 2px solid #e8ff26;
text-align: center;
box-shadow: 2px 2px 4px #888888;
cursor: move;
}
Left and top are what I want to randomize for each of the 7 or more divs I have.
I looked up some JS examples but I have not been successful yet. Below is a not working attempt:
$(function(){
var divClass = "div_"+Math.floor((Math.random() * 10) + 1);
$('body').addClass(divClass);
});
attempt 2:
$(document).ready(function() {
$("body").css("left", "(" + Math.floor(Math.random() * (10)) );
});
Random values can be generated and applied without using the JQuery
const myDiv = document.querySelector("#mydiv1");
const randomLeftValue = Number.parseInt(Math.random() * (1000 - 10) + 10);
const randomTopValue = Number.parseInt(Math.random() * (1000 - 10) + 10);
myDiv.style.top = `${randomLeftValue}px`;
myDiv.style.left = `${randomTopValue}px`;#mydiv1 {
position: absolute;
z-index: 0;
width: 250px;
height: 250px;
background-color: black;
border: 2px solid #e8ff26;
text-align: center;
box-shadow: 2px 2px 4px #888888;
cursor: move;
}<div id="mydiv1">
</div>document.addEventListener("DOMContentLoaded", function(event) {
let item = document.getElementById('mydiv1');
let rng_top = Math.floor(Math.random() * 1000);
let rng_left = Math.floor(Math.random() * 1000);
item.style.top = `${rng_top}px`;
item.style.left = `${rng_left}px`;
});
$('document').ready(() => { // will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
const left = Math.floor(Math.random() * 991 + 10); // random int [10 - 1000]
const top = Math.floor(Math.random() * 991 + 10); // random int [10 - 1000]
$('#mydiv1').css({ 'left': `${left}px`, 'top': `${top}px` }); // styling the div
});