Ways to embed a series of images within a stationary container

I have a fixed lateral div (like a menu bar) and I am exploring options for displaying images in a table-like format within the div. The challenge is that these images are dynamically generated.

Specifically, I need to place 10 images in the div. While I can include them directly in html, Javascript will determine which images should be displayed based on various factors, such as user privileges. Therefore, I want the images to automatically re-order themselves.

While I tend to favor JavaScript over CSS, I believe there must be a way to achieve this using CSS (without relying on CSS3 for retro-compatibility) or through a simpler method.

Thank you!

javascripthtmlcssfixed

Answer №1

I believe this will meet your needs. http://jsfiddle.net/x6zfW/10/

Kindly verify.

HTML:

<div id="ui_myMenu">
            <div id ="ui_ui_myMenuTitle">HELLO TITLE</div>
            <img id="ui_image1" class="ui_menuIcons" src ="http://www.designworks.co.nz/uploads/images/case-studies/nz-post/post_button.jpg"/>
            <img id="ui_image2" class="ui_menuIcons" src="http://t2.ftcdn.net/jpg/00/24/77/15/400_F_24771516_GheG3ehk2o3T6mJJkFy9k2siYoMrVigc.jpg"/>
</div>

CSS:

 #ui_myMenu{
position: fixed;
    bottom: 15%;
    width: 575px;
    height: 426px;
    left: 2%;
    top:2%;
    background:url('http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg') left top no-repeat;
}
#ui_myMenuTitle{
    margin-left: 16%;
    margin-top: 4.8%;
    font-size: 380%;
}
.ui_menuIcons{
    float: left;
    width : 5%;
    height : 7%;
}

Answer №2

This task seems tailor-made for a tool like masonry...

If that doesn't work, try enclosing the icons and positioning their container using this link: http://jsfiddle.net/mplungjan/HAggq/

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

Discover updates within a JQuery Ajax call

I am sorry if this question sounds simple, but I would like to know how to set up a function that triggers when the Ajax data changes from the previous request. window.setInterval(function(){ $.get("feed", function(data){ if (data.changed ...

javascriptjqueryajax

How to insert a page break within a <table> element in a React application

Essentially, my table consists of several sub-headers and I need to insert a page break after a certain number of these subsections while avoiding automatic breaks within the sections. It should appear like this rough layout. The gray areas represent the s ...

htmlcsstwitter-bootstrapreactjs

Is there a way to plot countries onto a ThreeJS Sphere?

Currently engaged in a project involving a 3D representation of Earth. Successfully created a 3D Sphere using ThreeJS ...

javascripthtmlcanvasthree.jscoordinates

The issue of the responsive navigation bar overlapping the header and navigation links not functioning properly

Hello everyone, I need some help with my website! I can't seem to find the answer on my own. I'm currently working on making my website responsive, but I've run into an issue with the mobile navigation on phones. The navigation links are ov ...

htmlcssresponsive-designjquery-mobile-navbar

Visual feedback: screen flashes upon clicking to add a class with jQuery

I have successfully added a click event to my pricing tables in order to apply an animation class on mobile devices. However, I am facing an issue where every time I click on a pricing option on my iPhone, the screen flashes before the class is applied. Is ...

javascriptjquerycssiphone

Cypress: Uncovering the method invoked by a button click

I'm currently utilizing Vue3 with Vite and Cypress. My Vue3 component utilizes the script setup SFC syntax. Below is the code snippet for my component: <template> <div> <button data-cy="testBtn" @click="btnClick()&q ...

javascripttypescriptvue.jscypresscypress-component-test-runner

Exploring the possibilities of using React for looping?

I have integrated Dexie.js with React for this specific example. However, the implementation details are not of great importance to me. My main focus is on finding out how to iterate through all objects in my IndexDB database using React. In the code snip ...

javascriptreactjs

Are Lazily Instantiated Singletons a Thing in AngularJS?

After browsing through the AngularJS documentation, I came across an interesting detail about AngularJS services: AngularJS lazily instantiates services, meaning they are only created when a component in the application requires it. Services in AngularJ ...

javascriptangularjsservice

Stop the infiltration of emotions into your style

Utilizing the JsonForms React Component to dynamically generate an HTML form in my web application. The framework I am using handles all view rendering on the server side. To integrate this component, I compiled a small react component by running npm run b ...

javascriptcssreactjsemotionjsonforms

Setting the width of a group of <td> elements using HTML and CSS

Consider the following table structure: <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> Can we ensure that the ...

htmlcsswidth

What is the best way to update the wrapper when the iframe URL is modified?

On my webpage, there is an iframe that contains a form. I have a banner or header visible on the page as well. Once the user submits the form within the iframe, I would like the banner to disappear. To see an example of what I mean, you can visit This pa ...

javascriptjqueryhtmliframe

Error: Property cannot be read after page refresh or modification

Upon refreshing or running the project for the first time, I encounter the error: TypeError: Cannot read property 'statements' of undefined This issue is perplexing as the data renders correctly but it appears that the connection is failing. ...

javascriptreactjsgraphqlnext.js

Including a Pinterest image hover widget following the completion of an Ajax load

I have implemented the Pinterest image hover widget on my website to allow users to easily pin images to their Pinterest accounts. You can find the widget here. (Make sure to click the image hover radio button under button type to see the one I am using.) ...

javascriptajaxpinterest

Limiting keyboard input with a phone number in a gridcolumn tag: A step-by-step guide

I have a query regarding a code line that is used to input a phone number into a designated box. <GridColumn field="phoneNumber" title="Phone Number" editor="text"/> Currently, I am able to enter any text using the key ...

htmlreactjs

JQuery UI button failing to reset correctly after making an AJAX request

One of the features on my website is a form that allows users to update their first and last names. When they click an "Edit" button, a dialog box appears on the screen with input fields for them to make changes. <div id="nameChange"> <table widt ...

jqueryhtmlajax

Using the AJAX post method to generate a JSON object from database results and send it back to a jQuery UI Dialog

I wrote a script that loads sample images from the database based on the relevant category when the page loads. Here's a simplified version of the PHP script: <?php $category = 'granite'; $samples = 'SELECT * FROM material WHERE ma ...

phpjavascriptjqueryjsonjquery-ui

Position the middle character within a span that has the identical width and height

My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...

htmlcss

Managing browser cache while developing locally

During development testing, how can you selectively disable caching for local scripts and styles while keeping cache enabled for external ones? Ideally in Firefox. When editing css, js, or sprite files on my developmental site, I find myself needing to fr ...

javascripthtmlfirefoxcachingmaps

Preventing duplicate Google indexing with .htaccess

I have a website that utilizes a RewriteRule in the root directory to direct queries in this format: http://domain.com/foo/parameter to http://domain.com/index.php?args=parameter Visitors only see the clean URL and everything works smoothly. However, ...

html.htaccessindexingrobots.txt

Position the buttons away from the carousel

I am looking to use Bootstrap 4 to place full-height buttons on the left and right sides of a carousel, with the carousel being the largest element at a size of col-10. This is my current progress: @media (min-width: 768px) { /* CSS code for responsi ...

csstwitter-bootstrap