Position div elements randomly on the webpage when it first loads

Question

Position div elements randomly on the webpage when it first loads

I am trying to achieve a set of divs that will appear randomly on the page when it loads. Currently, I have the divs moving around the viewport in a random manner, but they all seem to load in the top left corner.

This is the method I am currently using: (https://jsfiddle.net/j2PAb/634/)

$(document).ready(function() {
    animateDiv($('.a'));
    animateDiv($('.b'));
    animateDiv($('.c'));});

function makeNewPosition($container) {

// Get viewport dimensions (remove the dimension of the div)
var h = $container.height() - 50;
var w = $container.width() - 50;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh, nw];}


function animateDiv($target) {
var newq = makeNewPosition($target.parent());
var oldq = $target.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);

$target.animate({
    top: newq[0],
    left: newq[1]
}, speed, function() {
    animateDiv($target);
});

};

function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = .1;

var speed = Math.ceil(greatest / speedModifier);

return speed;}

javascript jquery css position positioning

Answer 1

Answer №1

To set the initial positions of div elements, you can simply define the top and left properties as shown in this example

div.a {
    width: 50px;
    height: 50px;
    background-color: red;
    position: fixed;
    top: 300px;
    left: 10px;
}
div.b {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: fixed;
    top: 100px;
    left: 50px;
}
div.c {
    width: 50px;
    height: 50px;
    background-color: green;
    position: fixed;
    top: 150px;
    left: 200px;
}

Answer 2

To set the initial positions of div elements, you can simply define the top and left properties as shown in this example

div.a {
    width: 50px;
    height: 50px;
    background-color: red;
    position: fixed;
    top: 300px;
    left: 10px;
}
div.b {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: fixed;
    top: 100px;
    left: 50px;
}
div.c {
    width: 50px;
    height: 50px;
    background-color: green;
    position: fixed;
    top: 150px;
    left: 200px;
}

Answer 3

Answer №2

To ensure smooth animation, it is important to set random values for the top and left positions of these divs before initiating the animation.

Here's an example of how you can achieve this:

function initializeAnimation($target) {
    var newCoordinates = generateRandomPosition($target.parent());
    $target.css({top:  newCoordinates[0], left: newCoordinates[1]});
};

Take a look at the updated fiddle for reference.

Answer 4

To ensure smooth animation, it is important to set random values for the top and left positions of these divs before initiating the animation.

Here's an example of how you can achieve this:

function initializeAnimation($target) {
    var newCoordinates = generateRandomPosition($target.parent());
    $target.css({top:  newCoordinates[0], left: newCoordinates[1]});
};

Take a look at the updated fiddle for reference.

Answer 5

Answer №3

Implement a method for initializing the position of each div element.

Here is an example:

function setInitialDivPosition(target) {
  var newPosition = calculateNewPosition(target.parent());
  target.css({top:  newPosition[0], left: newPosition[1]});
  animateDiv(target.show());
}

Additionally, hide the div elements initially to prevent the user from noticing the movement:

div.a, div.b, div.c {
  display: none;
}

The updated code can be viewed on this fiddle:

$(document).ready(function() {
  setInitialDivPosition($('.a'));
  setInitialDivPosition($('.b'));
  setInitialDivPosition($('.c'));
});

function setInitialDivPosition(target) {
  var newPosition = calculateNewPosition(target.parent());
  target.css({
    top: newPosition[0],
    left: newPosition[1]
  });
  animateDiv(target.show());
}

function calculateNewPosition($container) {
  var h = $container.height() - 50;
  var w = $container.width() - 50;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];
}

function animateDiv($target) {
  var newq = calculateNewPosition($target.parent());
  var oldq = $target.offset();
  var speed = calculateSpeed([oldq.top, oldq.left], newq);

  $target.animate({
    top: newq[0],
    left: newq[1]
  }, speed, function() {
    animateDiv($target);
  });

};

function calculateSpeed(prev, next) {

  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);

  var greatest = x > y ? x : y;

  var speedModifier = .1;

  var speed = Math.ceil(greatest / speedModifier);

  return speed;

}

div#container {
  height: 500px;
  width: 500px;
}
div.a,
div.b,
div.c {
  display: none;
}
div.a {
  width: 50px;
  height: 50px;
  background-color: red;
  position: fixed;
}
div.b {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: fixed;
}
div.c {
  width: 50px;
  height: 50px;
  background-color: green;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class='a'></div>
  <div class='b'></div>
  <div class='c'></div>
</div>

Answer 6

Implement a method for initializing the position of each div element.

Here is an example:

function setInitialDivPosition(target) {
  var newPosition = calculateNewPosition(target.parent());
  target.css({top:  newPosition[0], left: newPosition[1]});
  animateDiv(target.show());
}

Additionally, hide the div elements initially to prevent the user from noticing the movement:

div.a, div.b, div.c {
  display: none;
}

The updated code can be viewed on this fiddle:

$(document).ready(function() {
  setInitialDivPosition($('.a'));
  setInitialDivPosition($('.b'));
  setInitialDivPosition($('.c'));
});

function setInitialDivPosition(target) {
  var newPosition = calculateNewPosition(target.parent());
  target.css({
    top: newPosition[0],
    left: newPosition[1]
  });
  animateDiv(target.show());
}

function calculateNewPosition($container) {
  var h = $container.height() - 50;
  var w = $container.width() - 50;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];
}

function animateDiv($target) {
  var newq = calculateNewPosition($target.parent());
  var oldq = $target.offset();
  var speed = calculateSpeed([oldq.top, oldq.left], newq);

  $target.animate({
    top: newq[0],
    left: newq[1]
  }, speed, function() {
    animateDiv($target);
  });

};

function calculateSpeed(prev, next) {

  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);

  var greatest = x > y ? x : y;

  var speedModifier = .1;

  var speed = Math.ceil(greatest / speedModifier);

  return speed;

}

div#container {
  height: 500px;
  width: 500px;
}
div.a,
div.b,
div.c {
  display: none;
}
div.a {
  width: 50px;
  height: 50px;
  background-color: red;
  position: fixed;
}
div.b {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: fixed;
}
div.c {
  width: 50px;
  height: 50px;
  background-color: green;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class='a'></div>
  <div class='b'></div>
  <div class='c'></div>
</div>

Position div elements randomly on the webpage when it first loads

Answer №1

Answer №2

Answer №3

Similar questions

Attempting to retrieve an image from the database using ajax within a PHP script

A guide on extracting content from a PDF file with JavaScript

Subtracting 25% from the width of the web browser

Automatically adjusting jQuery script now functions on all hyperlinks for seamless resizing

How to incorporate a routing file within another routing file in Node.js

What is the best way to create a seamless change from a black to white invert filter?

Interacting with a C# Web Service Using JQuery

CSS animations - transitioning opacity in and out

Each time the server restarts, Express.js will run a function asynchronously

Attempting to deploy my initial Google Cloud Function, encountering an error message indicating that Express is not detected

The ReactJS component is unable to resolve the specified domain name

Creating a custom styled Drawer with flexbox styling using ReactJS, MUIv5, and the styled-engine-sc library

Interconnected realms communication

When entering a sub-URL into the browser address bar, the routes do not display as expected

Displaying limited items based on conditions in CSS

What is the best way to make an AJAX request for an image src that updates every 3 minutes?

Maintain the state of various panels on page load with the Bootstrap Accordion feature

Difficulty in utilising jQuery to serialize HTML form

Next.js allows you to create a single page that corresponds to the root path '/' as well as a dynamic route '/param'

Ways to automatically check a checkbox using jQuery