I have a square, when clicked it appears in a random location and it also change size (so for example if I have a 30px box but it is 10px from the left border I still get 10px outside the gamespace).

sometimes the square exceed his container border

How can I make sure that the square will never exceed his container?

function position() {
  var positionTop = Math.random() * 100;
  var positionLeft = Math.random() * 100;
  var position = "position:relative;top:" + positionTop + "%;left:" + positionLeft + "%;"
  return position;
}

document.getElementById("shape").onclick = function() {
  document.getElementById("shape").style.cssText = position();
}

#gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin: 0;
  padding-top: 30px;
}

#playSpace {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px black solid;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="gameSpace">
  <div id="playSpace">
    <!-- here we put the shape -->
    <div id="shape"></div>
  </div>
</div>

I have a square, when clicked it appears in a random location and it also change size (so for example if I have a 30px box but it is 10px from the left border I still get 10px outside the gamespace).

sometimes the square exceed his container border

How can I make sure that the square will never exceed his container?

function position() {
  var positionTop = Math.random() * 100;
  var positionLeft = Math.random() * 100;
  var position = "position:relative;top:" + positionTop + "%;left:" + positionLeft + "%;"
  return position;
}

document.getElementById("shape").onclick = function() {
  document.getElementById("shape").style.cssText = position();
}

#gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin: 0;
  padding-top: 30px;
}

#playSpace {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px black solid;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="gameSpace">
  <div id="playSpace">
    <!-- here we put the shape -->
    <div id="shape"></div>
  </div>
</div>

• javascript
• html
• css

Share Improve this question Follow edited Jun 6, 2017 at 8:21 Abhishek Pandey 13.6k88 gold badges4040 silver badges7272 bronze badges asked Jun 6, 2017 at 7:51 ItairozenItairozen 7988 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

You need to set position: relative; to the parent element and position: absolute; to the shape element. Then use max min value for random where max is the parent width/height and subtract the shape width/height ...

This is snippet before update

function position() {
  var playSpace = document.querySelector('#playSpace');
  var shape = document.getElementById("shape");
  var maxHeight = playSpace.offsetHeight - shape.offsetHeight;
  var maxWidth = playSpace.offsetWidth - shape.offsetWidth;

  var positionTop = Math.random() * (maxHeight - 0) + 0;
  var positionLeft = Math.random() * (maxWidth - 0) + 0;

  // think of this like so:
  // var positionTop = Math.random() * (max - min) + min;
  // more information about it https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

  var position = "position:absolute;top:" + positionTop + "px;left:" + positionLeft + "px;"
  return position;
}

document.getElementById("shape").onclick = function() {
    document.getElementById("shape").style.cssText = position();
}

#gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin:0;
  padding-top: 30px;
}


#playSpace {
  position: relative; /* add this line */
  width: 90%;
  height: 90%;
  margin: 0 auto;
  border: 1px black solid;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red; 
}

<div id="gameSpace">
    <div id="playSpace">
        <!-- here we put the shape -->
        <div id="shape"></div>
    </div>
</div>

Updated after ment Not sure how you added the size() function but probably the problem was with using ...cssText that you overwrote the changes. So now I changed the code with passing the element to the functions and then only change the single CSS statements which need to be changed.

function position(element) {
  var playSpace = document.querySelector('#playSpace');
  var shape = document.getElementById("shape");
  var maxHeight = playSpace.offsetHeight - shape.offsetHeight;
  var maxWidth = playSpace.offsetWidth - shape.offsetWidth;

  var positionTop = Math.random() * (maxHeight - 0) + 0;
  var positionLeft = Math.random() * (maxWidth - 0) + 0;

  // think of this like so:
  // var positionTop = Math.random() * (max - min) + min;
  // more information about it https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

  element.style.position = 'absolute';
  element.style.top = positionTop + "px";
  element.style.left = positionLeft + "px";
}

function size(element) {
  var sizeMath = (Math.random() * 200) + 50;
  element.style.width = sizeMath + "px";
  element.style.height = sizeMath + "px";
}

document.getElementById("shape").onclick = function() {
    size(document.getElementById("shape"));
    position(document.getElementById("shape"));
}

#gameSpace {
width: 100%;
height: 470px;
background: blue;
margin:0;
padding-top: 30px;
}


#playSpace {
position: relative; /* add this line */
width: 90%;
height: 90%;
margin: 0 auto;
border: 1px black solid;
}

#shape {
width: 100px;
height: 100px;
background-color: red; 
}

<div id="gameSpace">
    <div id="playSpace">
        <!-- here we put the shape -->
        <div id="shape"></div>
    </div>
</div>

You can use a specify the range (min/max) in Math.random function and then use this function Math.floor(Math.random() * (max - min + 1)) + min; to limit the returned value of the random function between min and max.

• maxTop : height of the container - height of shape
• maxLeft : width of the container - width of shape
• minTop : 0
• minLeft : 0

You need to use position:absolute and px value on shape for this to work

See code snippet:

function position() {

  var minTop = 0;
  var maxTop = document.getElementById("playSpace").clientHeight - document.getElementById("shape").clientHeight;
  var minLeft = 0;
  var maxLeft = document.getElementById("playSpace").clientWidth - document.getElementById("shape").clientWidth ;
  
 

  var positionTop = Math.floor(Math.random() * (maxTop - minTop + 1) + minTop);
  var positionLeft = Math.floor(Math.random() * (maxLeft - minLeft + 1) + minLeft);

  
  var position = "position:absolute;top:" + positionTop + "px;left:" + positionLeft + "px;"
  return position;

}

document.getElementById("shape").onclick = function() {

  document.getElementById("shape").style.cssText = position();

}

#gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin: 0;
  padding-top: 30px;
  text-align:center;
}

#playSpace {
  width: 90%;
  height: 90%;
  border: 1px black solid;
  position:relative;
  display:inline-block;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="gameSpace">
  <div id="playSpace">
    <!-- here we put the shape -->
    <div id="shape"></div>
  </div>
</div>

With CSS calc, limit the position inside playSpace area (you can use different units, here % and px).

Then with offsetTop/offsetLeft, get the real position of the square and avoid negative positions (when positionTop < 100px or positionLeft < 100px).

function position() {
    var positionTop = Math.random() * 100;
    var positionLeft = Math.random() * 100;
    var position = "position:relative;top: calc(" + positionTop + "% - 100px);left: calc(" + positionLeft + "% - 100px);";
    return position;
}

document.getElementById("shape").onclick = function() {
    var shapeDiv = document.getElementById("shape");
    shapeDiv.style.cssText = position();
    var top = shapeDiv.offsetTop;// Result of calc(" + positionTop + "% - 100px) in px
    if(top < 0) {
        shapeDiv.style.top = '0px';
    }
    var left = shapeDiv.offsetLeft;// Result of calc(" + positionLeft + "% - 100px) in px
    if(left < 0) {
        shapeDiv.style.left = '0px';
    }
}

Don't forget to add position: relative to #playSpace, to get offsetTop/left correct

#playSpace {
    position:relative;/* mandatory */
}

You can get the parent element size, so that in your scirpt, use a condition to prevent the square to exceed.

function position() {

var maxWidth = document.getElementById("playSpace").offsetWidth;
var maxTop = document.getElementById("playSpace").offsetHeight;

var positionTop = Math.random() * 100;
var positionLeft = Math.random() * 100;

if (positionTop > maxTop) { positionTop = maxTop;)
if (positionLeft > maxWidth) { positionLeft = maxWidth;)
var position = "position:relative;top:" + positionTop + "%;left:" + positionLeft + "%;"
return position;

}

I'm not sure if .offsetWidth and .offsetHeight works well, but you got the idea :)

By tweaking just a little your positionTop and positionLeft variable, I managed to keep the square inside. You just need to change the maximum % that it needs to have to not exceed the container. I found that 75% for the top and 80% for the left seems to be the max!

var positionTop = Math.floor(Math.random() * 75)   ;
var positionLeft = Math.random() * 80;

Here's a fiddle

If you set the containing element to position: relative; and the inner element with position: absolute; the inner elements top left right and bottom properties will calculate from the borders of the containing element.

Here is a good source of css positioning.

In your case additional validation should be set to positionTop and positionLeft.

positionTop should be in the interval [( shapeHeight/2 ) - (100 - shapeHeight/2 ) ]

positionLeft should be in the interval [( shapeWidth/2 ) - (100 - shapeWeight/2 ) ]