unique mix of random div elements and a dynamic background

Here is a code snippet that generates random background images for a div. I am looking to add description divs for each background image.

<div class="slider"></div>


$(function () {
var url = "http://maispc.com/samuel/content/images/",
    imgArray = [url+"avatar.png",
               url+"provider/blogger.png",
               url+"provider/LinkedIn-32x32.png",
               url+"provider/myspace.png",
               url+"provider/instagram.png",
               url+"provider/Twitter-32x32.png",
               url+"provider/stackoverflow.png",
               url+"provider/Facebook-32x32.png"],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

$(".slider", ".tab").css('background-image', baseUrl);
})();

I want the code to look like this:

{ $(function () {
var url = "http://maispc.com/samuel/content/images/",
    imgArray = [url+"avatar.png",
               url+"provider/blogger.png", // description div 1
               url+"provider/LinkedIn-32x32.png", // description div 2
               url+"provider/myspace.png", // and so on...
               url+"provider/instagram.png",
               url+"provider/Twitter-32x32.png",
               url+"provider/stackoverflow.png",
               url+"provider/Facebook-32x32.png"],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

$(".slider").css('background-image', baseUrl);
})();

}
jqueryhtmlcss

Answer №1

Create an array containing various descriptions.

HTML Structure:

<div class="slider">
    <div class="description"></div>
</div>

JavaScript Script:

$(function () {
    var url = "http://example.com/images/";
    var imgArray = [url+"image1.png",
               url+"image2.png",
               url+"image3.png",
               url+"image4.png",
               url+"image5.png",
               url+"image6.png",
               url+"image7.png",
               url+"image8.png"];
    var descriptionArray = ["Description A",
               "Description B",
               "Description C",
               "Description D",
               "Description E",
               "Description F",
               "Description G",
               "Description H"];
    var randomNumber = Math.floor((Math.random() * imgArray.length));
    var baseUrl = "url('" + imgArray[randomNumber] + "')";
    var description = descriptionArray[randomNumber];
    $(".slider").css('background-image', baseUrl);
    $(".description").text(description);
})();

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

Ways to emphasize specific sections of the navigation bar

I am currently in the process of coding my own portfolio as part of my UX/UI program. My navigation bar is styled using the CSS code below: .nav-links { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-column-start: span; list-style ...

cssfrontendcss-grid

Discovering the clicked element using JavaScript: A complete guide

Let me start by saying that I have come across similar posts about tracking event listeners, but in my specific case, I am struggling to figure it out. While I am familiar with the event.target property, I just can't seem to make it work. Here is a s ...

javascripthtmlcssevent-handling

The Jquery UI datepicker appears in all rows except for the final one

I'm facing an issue with a piece of jquery code that I have. It gets dynamically called and generates multiple tr tags, each containing an input field of type text set to the jQuery UI datepicker. Strangely, the datepicker renders in every tr tag exce ...

jqueryasp.net-mvcjquery-ui

Tips on importing CSS from React Quill

I'm in the process of creating a interactive bulletin board with React. I successfully used React Quill for the POST editor and saved the content to the server without any issues. While the CSS styles from the Quill editor were properly reflected and ...

htmlcssreactjsquillreact-quill

Cloning blank records in SQL during data refreshment

My recent project involves a system where users can input data that gets stored in a MySql database via SQL queries. However, I'm encountering an issue where empty data is inserted into the database every time the page is refreshed. The connection, qu ...

phphtmlsql

The loading image display is experiencing technical difficulties

This is the script I have created to implement paging functionality: var loadPage = function () { var $link = $(this); var options = { url: $link.attr("href"), data: $("form").serialize(), type: "get ...

javascriptjquery

I can't seem to figure out why my characters keep disappearing from the HTML string when I attempt to dynamically add HTML using JavaScript

I am currently facing an issue with dynamically adding links to a page. The links are being added successfully, however, the '[' and ']' at the beginning and end of the line are disappearing. Here is the code snippet from my .js file: ...

javascriptjquery

What is the process of duplicating an element using jQuery?

I have successfully implemented a drag and drop feature using jQuery, but now I want to replace the dragged element with another in its original position. Although I attempted to use the clone() method, being new to jQuery has resulted in the cloned eleme ...

jqueryclonejquery-ui-draggable

The issue with displaying Fontawesome icons using @import in CSS-in-JS was not resolved

I recently changed how I was importing Fontawesome icons: src/App.css @import "@fortawesome/fontawesome-free/css/all.css";` After shifting the @import to CSS-in-Js using emotion: src/App.js // JS: const imports = css` @import "@fortawes ...

javascriptcssreactjsemotioncss-in-js

Is there a way to dynamically update the 'src' attribute of an iframe by clicking on a different page?

On my website, I have two html pages named 1.html and 2.html. In 1.html, there are two buttons that each link to different websites - Google and Facebook. One button directs to Google The other button directs to Facebook Within 2.html, I have an iframe ...

javascriptjqueryhtml

Struggling with integrating Bootstrap 4 Modals in Angular 2 environment

I attempted to incorporate a modal from into my navbar, but nothing happens when I click on it. <div class="pos-f-t fixed-top header"> <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> <button class="navbar- ...

javascripthtmltwitter-bootstrapangular

managing the AJAX server's response

Struggling with a seemingly simple project where a button click should display a random saying generated from PHP, I don't have access to the PHP code and feel a bit lost. The issue seems to be in how I'm handling the server response (the handleS ...

javascriptjqueryajax

Eliminate the Internet Explorer download prompt

I am facing a challenge with a complex web-page form that includes a "preview" button utilizing jquery to gather form data, send it to the server, then generate either a .rtf or .txt document before returning a link to the created file for the client. My ...

jqueryajaxinternet-explorerinternet-explorer-8internet-explorer-7

Initiating a video by floating over a container

This code snippet allows me to trigger videos to play when hovered over individually: //play video on hover $(document).on('mouseover', 'video', function() { $(this).get(0).play(); }); //pause video on mouse leave $(document).on(&ap ...

htmljqueryvideomouseover

Can a string be utilized as an HTML id in HTML5 without breaking any rules?

Would it be considered acceptable to use a string as an id? For instance, id="Nick Drake". I have seen that in html4 it is not recommended. Nevertheless, it serves my purpose effectively. I am just curious about the correctness of this approach. Thank you ...

html

The image appears to be overlapping within the navigation bar

I'm having trouble understanding why the image is overlapping on this website. The image is enclosed in a link tag, and upon inspecting it, the link tag seems to be correctly positioned while the image appears slightly below. I can't seem to ide ...

htmlcssimagetwitter-bootstrap

What is the best way to use res.send() to target a specific ID within an HTML tag in Node.js?

In my search.html file, I have the following form: <form class="myform" action="/classi" autocomplete="on"> <input type="text" name="search" > <button type="submit" ></button> Upon pressing the button, the following code in ind ...

htmlnode.jsexpress

The XML file fails to save once a new element has been inserted

I am currently in the process of developing a chat system where I want the computer to automatically add a new element to an XML file every time a user sends a message by pressing a button. Although I have successfully created a new message element and add ...

javascripthtmlasp.netajaxxml

When floating divs with varying heights are wrapped, they may become stuck in place

Hey there! Let's tackle a challenge: I've got a few divs, each with varying heights. These divs contain portlets that can expand in height. Here's a basic example: .clz { float: left; } <div class="container"> <div class="cl ...

htmlcssheight

What could be causing my CSS and HTML to display incorrectly in IE and Chrome browsers?

I am currently facing a challenge with my landing page design. The positioning of a specific div element seems to be correct in Internet Explorer, but it is misaligned in Chrome. Is there a way to ensure consistent display across different browsers? The pr ...

htmlcssgoogle-chrome