Not able to get the image elements in correct position

Question

I want to achieve something like image shown below.

More specifically, I need to have smiley faces randomly distributed throughout a 500px area and have a border on the right-hand side of the area.

but with the following code I am not getting the desired result.

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            position: absolute
        }

        div {
            width: 500px;
            height: 500px
        }

        #rightSide {
            position: absolute;
            left: 500px;
            border-left: 1px solid black
        }
    </style>
</head>
<body onload="generateFaces()">

<div id="leftSide"></div>
<div id="rightSide"></div>
<script>
    var numberOfFaces = 5;
    var top_position = 400;
    var left_position = 400;
    var theLeftSide = document.getElementById("leftSide");
    var i = 0;
    function generateFaces() {
        while (i < numberOfFaces) {
            var this_img = document.createElement("img");
            this_img.src = "#";

            this_img.style.top = top_position + "px";
            this_img.style.left = left_position + "px";
            theLeftSide.appendChild(this_img);
            top_position = top_position - 50;
            left_position = left_position - 50;
            i++;
        }
    }
</script>

</body>
</html>

The result I am getting for the above code snippet looks like

How will I make it proper?

If one of the answers did help, please accept it. If there is still something missing, please tell. — JSchirrmacher, Jul 02 '16 at 18:56

score 1 · Answer 1 · answered Jun 25 '16 at 04:48

1

In your while loop you subtract 50 from top and left every time, so you get even distances for each image.

Use Math.random() for random values. The function returns values between 0 and 1, so multiply with the container size to get random positions.

answered Jun 25 '16 at 04:48

JSchirrmacher

3,243
2
19
27

Gerardo Furtado · Answer 2 · 2016-06-25T05:13:42.323

1

If you want to use random positions:

top_position  = Math.random()*400; left_position = Math.random()*400;
this_img.style.top = top_position + "px";
this_img.style.left = left_position + "px";
theLeftSide.appendChild(this_img);

Here is the fiddle: https://jsfiddle.net/v222wgav/1/

edited Jun 25 '16 at 05:13

answered Jun 25 '16 at 04:50

Gerardo Furtado

100,839
9
121
171

But the border is not being displayed at the correct position as shown in the topmost image. – d.d. Jun 25 '16 at 05:08
That's just a CSS ajustment. I edited the answer, check the fiddle again. – Gerardo Furtado Jun 25 '16 at 05:14

score 1 · Answer 3 · edited May 23 '17 at 11:44

This is how you generate random top_position locations and random left_position locations.

You should be able to modify the code below to suit your needs.

I've included a random function getRandom which is just a standard "get a random number within this range" function.

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

To use it, just provide a minimum number of pixels, and a maximum number of pixels in the range you need.

getRandom(0, 400);

var numberOfFaces=5;
var top_position = getRandom(0, 400);
var left_position = getRandom(0, 400);
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateFaces()
{
  while(i < numberOfFaces)
  {
    var this_img = document.createElement("img");
    this_img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/718smiley.svg/60px-718smiley.svg.png";

    this_img.style.top = top_position + "px";
    this_img.style.left = left_position + "px";
    theLeftSide.appendChild(this_img);
    top_position = getRandom(0, 400);
    left_position = getRandom(0, 400);
    i++;
  }
}

img {
  position:absolute
}
div {
  width:500px;height:500px
}
#rightSide {
  position:absolute;
  left: 0px;
  top: 0px;
  border-right: 1px solid black
}

<!DOCTYPE html>
<html>
  <body onload="generateFaces()">
    
    <div id="leftSide"></div>
       <div id="rightSide"></div>
  </body>
</html>

I would do away with the #rightSide div all together like so:

var numberOfFaces=5;
var top_position = getRandom(0, 400);
var left_position = getRandom(0, 400);
var theLeftSide = document.getElementById("leftSide");
var i = 0;
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateFaces()
{
  while(i < numberOfFaces)
  {
    var this_img = document.createElement("img");
    this_img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/718smiley.svg/60px-718smiley.svg.png";

    this_img.style.top = top_position + "px";
    this_img.style.left = left_position + "px";
    theLeftSide.appendChild(this_img);
    top_position = getRandom(0, 400);
    left_position = getRandom(0, 400);
    i++;
  }
}

img {
  position:absolute
}
div {
  width:500px;height:500px
}
#leftSide {
  border-right: 1px solid black
}

<!DOCTYPE html>
<html>
  <body onload="generateFaces()">
    
    <div id="leftSide"></div>
  </body>
</html>

Happy Random Smilies!

Resources:

Image Credit: https://commons.wikimedia.org/wiki/File:718smiley.svg

How to use generate random numbers in a specific range

But the border is not being displayed at the correct position as shown in the topmost image.What are the changes should I make in the code so that I will get the border at the correct position? — d.d., Jun 25 '16 at 05:13
I've corrected the code snippet for your request. Please be more specific when you're asking your question in the future. — Jeremy Iglehart, Jun 25 '16 at 05:18
I've edited the question to specify what you're looking for. — Jeremy Iglehart, Jun 25 '16 at 05:20

score 1 · Answer 4 · answered Jun 25 '16 at 05:04

You just need to go with random funtion if you require random positions. For fix position you need to implement particular position checks.

top_position  = Math.random()*400; left_position = Math.random()*400;

JS Fiddle - https://jsfiddle.net/manishghec/13k8caen/

Not able to get the image elements in correct position

4 Answers4

Resources: