Creating unique CSS styles through randomly generated values for both the left and top positions each time the page is refreshed or loaded

Question

Creating unique CSS styles through randomly generated values for both the left and top positions each time the page is refreshed or loaded

I have multiple draggable frames within my HTML, each with unique "left" and "top" values in the CSS. I am looking to randomize these values every time the page is refreshed or loaded, with a range of 10 to 1000 pixels.

Here is an example of the CSS for one of the divs:

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

The goal is to randomize the "left" and "top" values for all divs on the page, not just one.

I have tried some JavaScript examples without success. Here is an example of one attempt that didn't work:

$(function(){
    var divClass = "div_" + Math.floor((Math.random() * 10) + 1);
    $('body').addClass(divClass);
});

Another unsuccessful attempt:

$(document).ready(function() {
    $("body").css("left", "(" + Math.floor(Math.random() * (10)) );
});

javascript html css less

Answer 1

Answer №1

One can easily generate and implement random values in their code without relying on 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>

Answer 2

One can easily generate and implement random values in their code without relying on 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>

Answer 3

Answer №2

When the DOM content is loaded, this script randomly positions an element with the ID 'mydiv1' on the page.
    
    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`;
    });

Answer 4

When the DOM content is loaded, this script randomly positions an element with the ID 'mydiv1' on the page.
    
    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`;
    });

Answer 5

Answer №3

$('document').ready(() => { // This code will only execute once the DOM (Document Object Model) of the page is fully loaded and ready for JavaScript to run.

const leftPos = Math.floor(Math.random() * 991 + 10); // Generate a random integer between 10 and 1000

const topPos = Math.floor(Math.random() * 991 + 10); // Generate a random integer between 10 and 1000

$('#mydiv1').css({ 'left': `${leftPos}px`, 'top': `${topPos}px' }); // Apply styling to the div based on the randomly generated positions 

});

Answer 6

$('document').ready(() => { // This code will only execute once the DOM (Document Object Model) of the page is fully loaded and ready for JavaScript to run.

const leftPos = Math.floor(Math.random() * 991 + 10); // Generate a random integer between 10 and 1000

const topPos = Math.floor(Math.random() * 991 + 10); // Generate a random integer between 10 and 1000

$('#mydiv1').css({ 'left': `${leftPos}px`, 'top': `${topPos}px' }); // Apply styling to the div based on the randomly generated positions 

});

Answer 7

Answer №4

I'm a little bit puzzled about your end goal, but based on my understanding, you are looking to achieve the following: generate a random integer between 10 and 1000, and then apply random left and top values for each frame wrapper (referred to as 'frame' here).

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

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

Answer 8

I'm a little bit puzzled about your end goal, but based on my understanding, you are looking to achieve the following: generate a random integer between 10 and 1000, and then apply random left and top values for each frame wrapper (referred to as 'frame' here).

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

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

Creating unique CSS styles through randomly generated values for both the left and top positions each time the page is refreshed or loaded

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Exploring ways to retrieve boolean values with Angular and PHP

Using Ajax/jQuery in combination with Mongodb

ngPrime table column selection and data extraction

Using Linq to Transform Rows into Columns

When the border width is set to 1px in FireFox, the border size is calculated as 0.667

Achieving Center Alignment of Two Elements with Varying Widths in Relation to the Parent Container, all while maintaining Left Alignment and consistent indentation

Is there a way to intercept all AJAX requests in JavaScript?

What could be causing my HTML footer to not grow from its borders?

An array of size 10x10 where each new array replaces the previous one

How about passing some vue props data over?

Element in list displaying a distinct alignment from the rest

Production environment poses a challenge as Rails 4 struggles to locate fonts

I am having trouble getting the filter functionality to work in my specific situation with AngularJS

Why is my Navbar defaulting to be located inside the "./components/Index" folder?

Adjust the div container to wrap underneath the image if the webpage width decreases

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Having trouble with the scrolling feature on a read-only text area within a form

Tips for aligning two canvases with different heights at the top in HTML5

What scenarios call for utilizing "dangerouslySetInnerHTML" in my React code?

Updating Socket.io with multiple data emissions upon refresh or reload