Stylized with different images scattered across the browser window

Is there a way to ensure that all my randomly positioned images stay within the bounds of their 100% wrap without being cut off? Currently, some images are getting cut off due to the overflow: hidden setting. Also, is it possible to prevent the images from overlapping each other?
Here's a link to a jsfiddle example: http://jsfiddle.net/mdxZL/2/
HTML:

<div id="wrap" style="width: 100%; height: auto; position: absolute; left: 0; top: 0; overflow: hidden;">

<div id="images">
    <img src="http://placekitten.com/200/200" />
    <img src="http://placekitten.com/200/200" />
    <img src="http://placekitten.com/200/200" />
    <img src="http://placekitten.com/200/200" />
    <img src="http://placekitten.com/200/200" />
</div>
</div>

CSS:

    #images
    {
        left: 0; top: 0;
        width: 100%;
    }

    #images img
    {
        padding: 10px;
        position:relative;
}

jQuery:

$(document).ready(function(){
$("#images img").each(
function(intIndex) {

var l = Math.floor(Math.random() * $("#images").width());
var t = Math.floor(Math.random() * $("#images").height());

// Setting the margin-left and margin-top instead of just positioning the elements absolutely
$(this).css("margin-left", l);
$(this).css("margin-top", t);

}

);
});

Answer №1

Attempt

.images img
{
    margin: 5px;
    position:absolute;
    width:90%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to extract and display data when clicking on a Bootstrap switch

I have integrated BootStrap Switch like this: <?php while ($arr = mysql_fetch_array($res)) { ?> <td class="center"> <?php if ($arr['status'] == 1) { ?> <input class="switch" type="checkbo ...

Interactive Image Effects with Hover using HTML and JavaScript

I have observed that the transform works fine, but there is a slight issue when initially hovering or touching the image. After the first touch or hover, everything works great. Any assistance on fixing this minor issue would be greatly appreciated. Thank ...

developing an associative object/map in JavaScript

I have a form featuring various groups of checkboxes and I am attempting to gather all the selected values into an array, then pass that data into an Ajax request. $('#accessoriesOptions input').each(function(index, value){ if($(this).prop(& ...

What is the best way to add a checkbox tag in Rails using JavaScript?

I am attempting to use javascript to append the values from option fields to checkboxes in Rails. Here is a snippet of my javascript code: $("#regions option").each(function(){ $("#region-checkboxes").append('<li><%= check_box_tag "region ...

PHP having trouble recognizing Ajax POST requests

I am currently working on transferring data from an HTML page to a PHP page. After verifying that the dataString is indeed sending text using console log, it appears as pid=12345 Here is my AJAX code: $.ajax({ type: "POST", url: 'Task2.php&apos ...

Develop and test a query by examining its structure, parsing it, and assessing its effectiveness

Building a query using different conditions selected from html controls in a textarea, allowing users to make modifications as needed. On the client side: a(1, 3) > 20 b(4, 5) < 90 c(3, 0) = 80 The query formed is: a(1, 3) > 20 and b(4, 5) < ...

The interaction of a horizontal scroll bar on a CSS Grid layout triggers the appearance of a vertical scroll bar

I am facing a challenge with my HTML layout. In Chrome, when the horizontal scroll bar is visible, a vertical scroll bar also appears. However, in Firefox, everything works fine. This issue seems to be related to the height of the div not auto-scaling prop ...

Utilizing box-sizing for the creation of an internal border

Looking to create an HTML table with clickable cells, each containing a div that adds a border upon clicking. The challenge is ensuring the border stays within the boundaries of the td without altering the size of the table or its cells. Struggling to achi ...

Expanding the content within the modal body in Twitter-Bootstraps does not increase its size

Here's the code snippet that I'm working with: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-conte ...

Understanding the process of extracting map data from JSON files

I am currently working with Spring 3 and JQuery. My goal is to retrieve a Map containing element IDs and their values from my Spring Controller, and then use this data to update the View. Below is a snippet of the Controller code: @RequestMapping(value= ...

assistance in incorporating CSS classes using jQuery

In an attempt to modify the bottom border color of my navigation bar based on the link being hovered over, I want the bottom border color to change to match that of the hovered link. When the link loses focus or hover, the navigation bottom-border should r ...

Linking the User Interface to the Controller and Database

My UI requires a text field where users can input the streamId (e.g. 1, 2, 3) and then click 'ok' to display a table on the screen from the database based on the streamId value. ...

The method to obtain a result array using the getJson function in CodeIgniter

Here is the code snippet I am working with: function retrieveAllProcessingTransactions() { $resultSet = $this->db->query("SELECT a.id_transaksi, ETC"); return $resultSet; } In my controller file: public function fetchTransac ...

Exploring Image Access with Rails and jQuery

Currently, I am facing an issue with accessing images uploaded to my Rails app using jQuery. Specifically, I want to switch out images and perform similar tasks. The jQuery implementation is quite simple: $('#a1').change(function() { var src = ...

Move the Div element up and down when clicked

When a tag is clicked, the corresponding div opens and closes. I would like the div to slide down and up slowly instead of appearing immediately. <a href="" class="accordion">Click here</a> <div class="panel" id="AccordionDiv"> ...

Display numerical data at precise locations above an image

Currently, I am working on a project where I am adding multiple marker pins to an image and saving their positions (x and y coordinates) to a database for later use. To see the code I have written so far, you can visit this link: https://jsfiddle.net/at3w ...

Make sure that the two rows in my Bootstrap table are consistently positioned next to each other, regardless of the length of the text

When working with a Bootstrap panel containing text inside a table, I've encountered a challenge. One side features links while the other displays descriptions. At times, I find myself having to artificially lengthen the text to ensure it aligns corre ...

What is the best way to clear and fill a div without causing it to resize?

I am faced with a challenge involving four thumbnail divs labeled .jobs within a #job-wrap container. When a .job is clicked, I want the #job-wrap to fade out, clear its contents, load information from the selected .job, and then fade back in. However, whe ...

What is the best method for updating inner html with AJAX using the results obtained from json_encode?

If you need further clarification on how this works, feel free to check out this fiddle for a demonstration. In my setup, I have multiple DIVs each with a unique ID such as desk_85 (the number changes accordingly). <div class="desk_box_ver id="desk_8 ...

When transitioning to mobile size, I aim to maintain the consistent design of my background-color circle using Bootstrap 5

I am working on creating a card design with a colored background instead of an image. However, I am facing an issue where the rounded-circle background color changes to an ellipsoid shape after passing the mobile size (sm or xs). Here is what I am aiming ...