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.

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 like

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

How to toggle code block visibility in Angular's ngOnInit() method

Developing a Vue.js application with a universal variable

Enhancing the Appearance of Legends in Chartjs

AngularJS: Solving the issue of controllers not exchanging data by utilizing a service

Sending data using jQuery when a button is clicked

Is there a way to efficiently display more than 10 data items at a time using the FlatList component in react-native?

The href link on Android and iPhone devices is not activating, instead showing a focus rectangle

Transform Django Model Instance from Serialized Back to Object using Ajax

Personalized Pinterest button to link to a custom URL (Text Link, Image, or Both)

What is the process for including a new item in the p-breadcrumb list?

submitting URL from dropdown menu without using the 'submit' button

Prevent user scrolling when full-screen menu is activated

Applying onclick css changes to a specific duplicate div among several others?

Discover the method to retrieve every element from a Listbox with the click of a Button and utilizing an ajax call

Is there a point in bundling NPM packages if they are ultimately going to be bundled by the project

Showcasing a variety of product titles with the help of CSS

Assign a class to the checkbox of the first parent

Currently trapped within the confines of a Next.js 13 application directory, grappling with the implementation of a

Incorporate npm libraries into vanilla JavaScript for HTML pages

How can two unique links toggle the visibility of divs with two specific IDs?