CODEWITHSUNDEEP
javascriptjquerycsspositionpositioning
sternmd
sternmd

Reputation: 645

Randomly position divs upon page load

I want a set of divs to position randomly upon page load. The divs are currently set to move around the viewport in a random fashion, but all seem to load in the top left corner.

The method I currently have: (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;}

Upvotes: 0

Views: 1027

Answers (3)

loxxy
loxxy

Reputation: 13151

Add an initialization method to set the position of each div.

Something like: 

function initDiv(target) {
  var newq = makeNewPosition(target.parent());
  target.css({top:  newq[0], left: newq[1]});
  animateDiv(target.show());
}

Also do hide the divs initially, so the movement is not noticed by the user:

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

So the Updated code looks like (fiddle) :

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


});

function initDiv(target) {
  var newq = makeNewPosition(target.parent());
  target.css({
    top: newq[0],
    left: newq[1]
  });
  animateDiv(target.show());
}

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;

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

Upvotes: 0

Mg Thar
Mg Thar

Reputation: 1102

Set the random values to the top and left of these divs before you animate them.

Like below... 

function randomstart($target) {
    var newq = makeNewPosition($target.parent());
    $target.css({top:  newq[0], left: newq[1]});

};

Check the updated fiddle.

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68383

just define their initial top and left positions like this

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;

}

Upvotes: 1

Related Questions