Show Random Section

Question

Show Random Section

Hey there! I'm currently working on randomizing the display of these divs on my homepage. The specific CSS I have in place is making it a bit tricky, so I haven't been able to implement any of the usual methods for randomizing images. Any suggestions or assistance would be greatly appreciated!

<div class="banner-images">

<div class="feature" style="background-image: url(images/typewriter.png)">
    <img  class="hero-poster" src="images/typewriter.png" />

    <div class="hero-decoration">
        <div class="side-l"></div>
        <div class="arrow"><img alt="Hero-triangle" src="images/triangle.png" /></div>
        <div class="side-r"></div>
    </div>
</div>

<div class="feature" style="background-image: url(images/printing.png)">
    <img  class="hero-poster" src="images/printing.png" />

    <div class="hero-decoration">
        <div class="side-l"></div>
        <div class="arrow"><img alt="Hero-triangle" src="images/triangle.png" /></div>
        <div class="side-r"></div>
    </div>
</div>

<div class="feature" style="background-image: url(images/newspaper.png)">
    <img alt="Releaser" class="hero-poster" src="images/newspaper.png" />

    <div class="hero-decoration">
        <div class="side-l"></div>
        <div class="arrow"><img alt="Hero-triangle" src="images/triangle.png" /></div>
        <div class="side-r"></div>
    </div>
</div>
</div>

javascript jquery html css

Answer 1

Answer №1

Here is a possible solution:

$(document).ready(function() {
    var randomNumber = Math.floor(Math.random()*3);
     var chosenElement = $('.feature')[randomNumber];
     $(chosenElement).show();
});

This code generates a random number and displays the element associated with that number.

JSFiddle Example

Answer 2

Here is a possible solution:

$(document).ready(function() {
    var randomNumber = Math.floor(Math.random()*3);
     var chosenElement = $('.feature')[randomNumber];
     $(chosenElement).show();
});

This code generates a random number and displays the element associated with that number.

JSFiddle Example

Answer 3

Answer №2

I decided to use a random array shuffle function that I stumbled upon online instead of creating one from scratch. It's a convenient way to achieve the desired outcome. Essentially, you would need to take the array of elements with the class name $('.feature'), shuffle them, and then display them in a randomized sequence.

Here is an example of how it can be implemented:

$(function() {
    var shuffle = function(o){
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    }
    var showArr = shuffle($('.feature'));
    $.each(showArr, function(k,v) { //key, value
        window.setTimeout(function() {
            $(v).css('opacity', 1);
        },k*1000);
    });
});

Feel free to experiment and have fun by trying it out on this demo: http://jsfiddle.net/9bva204y/1/

Remember, this is just a basic illustration. You can customize and enhance it further to suit your preferences.

Answer 4

I decided to use a random array shuffle function that I stumbled upon online instead of creating one from scratch. It's a convenient way to achieve the desired outcome. Essentially, you would need to take the array of elements with the class name $('.feature'), shuffle them, and then display them in a randomized sequence.

Here is an example of how it can be implemented:

$(function() {
    var shuffle = function(o){
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    }
    var showArr = shuffle($('.feature'));
    $.each(showArr, function(k,v) { //key, value
        window.setTimeout(function() {
            $(v).css('opacity', 1);
        },k*1000);
    });
});

Feel free to experiment and have fun by trying it out on this demo: http://jsfiddle.net/9bva204y/1/

Remember, this is just a basic illustration. You can customize and enhance it further to suit your preferences.

Show Random Section

Answer №1

JSFiddle Example

Answer №2

Similar questions

Executing a protractor test on Safari results in the message "Angular was not located on the webpage https://angularjs.org/"

The function FileReader() is not functioning properly within a Vue computed property

The background image spanning across the entire screen, not just confined to the center

Using PHP code in CSS for the background styling

Ways to generate a fixed-length string without relying on the rand() function

"Have you ever noticed that the countdown date and time on your computer references the time from your personal device rather than the server

Help needed with PHP, MYSQL, and AJAX! Trying to figure out how to update a form dynamically without triggering a page refresh. Can anyone

Receive alerts in Swift from WKWebView when a particular screen is displayed in HTML

Transitioning to the Bootstrap library from the jQuery library with the use of several image modals

Adjustable Title in Line Plot

Sliding and repositioning elements using jQuery

Switch up the text inside a div using jQuery

The BottomNavigation component in MUI has a minimum size limit of 400px when it displays 5 items

Storing distinct values in separate variables within a JavaScript for loop

Canvas is unable to duplicate image content

How can I add an item to an array within another array in MongoDB?

What is the best way to trigger a tooltip when an input field is clicked?

Unable to extract tabular information using BeautifulSoup on a specific webpage

How to stop Accordion from automatically collapsing when clicking on AccordionDetails in Material-UI

Solutions for Showing Pop-up Tabs in React Native Webview