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

Assign the array value to all inputs that share the same class tag

Manifestation for JSON Firebug extension

What could be causing my Bootstrap datepicker to malfunction?

What is the best way to display link icons - as images or using CSS background-image URLs?

Adjusting animation placement when resizing the window

Adding text to a newly appended element using jQuery

Using two different colors in text with CSS

Is there a way to use moment js to change the date format to just show the month and year?

Can we rely on the render method to display the updated state immediately after invoking setState within

Display toggle malfunctioning when switching tabs

Enhancing elements with fade-in effects upon hovering

`Is there a way for Javascript to retrieve information sent from Python Flask's render_template() method?`

When attempting to use JQuery autocomplete, the loading process continues indefinitely without successfully triggering the intended function

Need help with functions in JavaScript?

Executing the `process.nextTick` function throws an error, causing the message: "Headers cannot be set once they have been sent."

Is it possible to use just one <map> tag for multiple images in jQuery or JavaScript?

Incorporating grids for a flickering drag and drop effect in Javascript

Webpack is notorious for creating multiple copies of images

Failure of Ajax to populate dropdowns in Internet Explorer

Unexpected alteration of property value when using methods like Array.from() or insertAdjacentElement