Generating Random values for CSS (left and top) when refreshing / loading the page-CodePudding

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)) );
});

CodePudding user response：

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>

CodePudding user response：

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`;
});

CodePudding user response：

$('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 

});

CodePudding user response：

I'm a bit confused with what you are trying to achieve, but from what I understand you need to do this: generate a random integer between 10 and 1000, and assign for each frame wrapper (here named 'frame') random left and top values.

const getRandomInteger = (max = 1000, min = 10) => {
  return Math.round(Math.random() * (max - min)   min)   "px";
}

$(function () {
  $('.frame').each((index, element) => {
    $(element).css({top: getRandomInteger(), left: getRandomInteger()});
  });
});