Struggling to align the image elements accurately

Question

Struggling to align the image elements accurately

I am aiming to create a layout similar to the image displayed below.https://i.sstatic.net/Q5n8J.png

To be more specific, my goal is to scatter smiley faces randomly within a 500px area while also having a border on the right side of the area.

However, with the current code I'm using, I'm not achieving the desired outcome.

<!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 output I am currently getting from the provided code snippet appears likehttps://i.sstatic.net/aG1ET.png

What steps should I take to correct this?

javascript html css

Answer 1

Answer №1

By incorporating a while loop, you consistently reduce both the top and left positions by 50 in each iteration, ensuring equal spacing between images.

To introduce randomness, consider utilizing the Math.random() method which generates values ranging from 0 to 1. By scaling these values with the container's dimensions, you can achieve varied and unpredictable image placements.

Answer 2

By incorporating a while loop, you consistently reduce both the top and left positions by 50 in each iteration, ensuring equal spacing between images.

To introduce randomness, consider utilizing the Math.random() method which generates values ranging from 0 to 1. By scaling these values with the container's dimensions, you can achieve varied and unpredictable image placements.

Answer 3

Answer №2

If you need to generate random positions, simply use the random function. However, if you want fixed positions, you will need to implement specific position checks.

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

Check out this JS Fiddle for an example: https://jsfiddle.net/manishghec/13k8caen/

Answer 4

If you need to generate random positions, simply use the random function. However, if you want fixed positions, you will need to implement specific position checks.

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

Check out this JS Fiddle for an example: https://jsfiddle.net/manishghec/13k8caen/

Answer 5

Answer №3

If you're looking to incorporate random positioning:

topPos = Math.random()*400; leftPos = Math.random()*400;
thisImage.style.top = topPos + "px";
thisImage.style.left = leftPos + "px";
leftContainer.appendChild(thisImage);

Check out the fiddle here: https://jsfiddle.net/v222wgav/1/

Answer 6

If you're looking to incorporate random positioning:

topPos = Math.random()*400; leftPos = Math.random()*400;
thisImage.style.top = topPos + "px";
thisImage.style.left = leftPos + "px";
leftContainer.appendChild(thisImage);

Check out the fiddle here: https://jsfiddle.net/v222wgav/1/

Answer 7

Answer №4

Here's a method to create random top_position positions and random left_position positions.

You have the freedom to adjust the code below according to your requirements.

I've integrated a random function called getRandom, which is basically a standard function for generating a random number within a specified range.

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

To utilize it, simply provide the minimum and maximum number of pixels within the desired range.

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>

The #rightSide div can be removed completely like this:

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>

Enjoy your Random Smilies!

Resources:

Image Credit:

How to use generate random numbers in a specific range

Answer 8

Here's a method to create random top_position positions and random left_position positions.

You have the freedom to adjust the code below according to your requirements.

I've integrated a random function called getRandom, which is basically a standard function for generating a random number within a specified range.

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

To utilize it, simply provide the minimum and maximum number of pixels within the desired range.

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>

The #rightSide div can be removed completely like this:

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>

Enjoy your Random Smilies!

Resources:

Image Credit:

How to use generate random numbers in a specific range

Struggling to align the image elements accurately

Answer №1

Answer №2

Answer №3

Answer №4

Resources:

Similar questions

React is choosing to re-render only one of the setState functions, neglecting the other

What is the method to modify an action in an Ajax function?

Is there a specific CSS selector that targets elements with "multiline" content?

The hover effects cease before the cursor is even shifted

Transform a string (variable) into an object using JSON.parse, encountering an unexpected token error

Aligning variable width numbers within a div container

Connect the checkbox input to the text input

Looking to convert a jQuery function to plain JavaScript code?

I am encountering difficulties with a nodejs query where I am unable to successfully include the "+" symbol as part of the query

Oops, seems like there was a problem with parsing the

Retrieving the caret's position in TinyMCE 4

Having difficulty transitioning Express Controller logic to a Service Class

Using JavaScript to fetch elements by their ID along with a button

The hyperlink tag doesn't respond to clicks in Safari, yet functions properly in all other web browsers

Display the invoice bill using text in a Vue component

Avoiding line breaks when submitting data through Ajax calls is achievable by using the `.val` method

Issues with tangents in three.js compared to the VertexTangentsHelper with problems on display

Is it possible to prioritize CSS selectors in a specific sequence?

Ensure that the footer remains at the bottom of the webpage, without being positioned as fixed

Using AngularJS variables within JavaScript code