Is there a way to shuffle the order of div classes shuffledv, while maintaining the same order of id's each time the page is refreshed?
<div class="shuffledv">
<div id="2"></div>
<div id="3"></div>
<div id="1"></div>
</div>
<div class="shuffledv">
<div id="5"></div>
<div id="4"></div>
<div id="6"></div>
</div>
<div class="shuffledv">
<div id="9"></div>
<div id="8"></div>
<div id="7"></div>
</div>
<div class="shuffledv">
<div id="10"></div>
<div id="11"></div>
<div id="12"></div>
</div>
Here is a solution that may fit your needs:
elems = $('.shuffledv');
elems = shuffle(elems); //randomize the elements.
for (i = 0; i < elems.length; i++) {
$(elems[i]).appendTo($('.container')); //reinsert.
}
function shuffle(array) { //Adapted from COOLAJ86's code at http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
var currentIndex = array.length,
temporaryValue, randomIndex;
// Continue shuffling remaining elements...
while (0 !== currentIndex) {
// Select a remaining element randomly...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// Swap the current element with the selected one.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="shuffledv">
first
<div id="2"></div>
<div id="3"></div>
<div id="1"></div>
</div>
<div class="shuffledv">
second
<div id="5"></div>
<div id="4"></div>
<div id="6"></div>
</div>
<div class="shuffledv">
third
<div id="2"></div>
<div id="3"></div>
<div id="1"></div>
</div>
<div class="shuffledv">
fourth
<div id="5"></div>
<div id="4"></div>
<div id="6"></div>
</div>
</div>This script will rearrange them each time it is executed. Make sure to place them inside a container for better results.
I'm currently developing a TypeScript Azure Function that utilizes an Azure Service Bus topic as its output. Although I am able to send messages successfully, I have encountered difficulties in setting custom metadata properties for the message. In m ...
Within my Menu component, I have an Autocomplete element. When the Autocomplete is clicked, the dropdown list/Popper appears but it's confined within the Menu parent. How can I make it so that the Autocomplete's dropdown list/Popper isn't re ...
I recently completed a project using Vue.js 3.2.13 and Vue-Router 4.0.14. Despite my efforts to ensure everything was set up correctly, I encountered an error in the browser that said "[Vue warn]: Failed to resolve component: router-view". The specific lin ...
I'm attempting to add ellipsis to an item created by ExtJS. My goal is to only modify this item without adding any additional CSS files. After researching, I discovered there is a "style" parameter that accepts CSS styles and attempted the following: ...
I currently have a functioning slider implemented in a React function component. I am now looking to correctly integrate the slider below into a React class component. import * as React from 'react'; import Box from '@mui/material/Box'; ...
I am utilizing a Wordpress menu to act as the primary navigation for my website. Each main item in this menu is a Page Type that redirects to other existing pages, with one of them containing submenus made up of custom links. These custom links' URLs ...
Is there a way to create a filter that functions as a simple modal window triggered by a click event, but can be displayed on top of a grid when placed within the filterHeaderTemplate? I have encountered an issue where the modal window I created is being ...
Working with Liferay 5.2 I would like to show a message related to the current language of Liferay. The code for this message is in Velocity language and can be found in navigation.vm file. <div id="navigation" class="sort-pages modify-pages"> ...
Is it possible to dynamically adjust the width of an input as we type in React? Currently, my input has a default width of 1ch. I would like it to increase or decrease based on the number of characters entered, so that the percentage sign stays at the end ...
Is there a way to independently scale a specific polygon of an image on hover? For example, I have a world map and I would like to enlarge a country when hovering over it, then return it to its original size when no longer hovering. I am familiar with us ...
Looking to add a search bar and login button in the AppBar, where the search Bar is positioned close to the title. The desired order for the AppBar components should be as follows: Title SearchBox LoginButton How can this be achieved? Below is th ...
Does anyone know of a reliable solution or Jquery plugin that can provide location details based on latitude and longitude coordinates? I heard about the Google Reverse Location API but hoping for a pre-made option. I'm not sure if there are any free ...
To better explain the issue, please refer to the accompanying image. I am working with a Master/Detail form, specifically a Bill of Materials, which involves storing data in two separate database tables. The top portion of the form (Product, Quantity) is ...
I've configured my navigation bar using a list with li elements. To give it a rounded appearance, I applied a border-radius to the background. Now, I'm looking to remove the border-left specifically from the home element. Below are the code snipp ...
Hey there! I am currently using a flexible div to house the h1 and arrow image (you can see it https://i.sstatic.net/OgVBp.png). I was wondering if there is a way to utilize a material UI component to give this "black box" a new look? Here is the jsx code ...
Trying to use React to style elements generated by a third-party library has been a challenge. In the snippet below, I was able to achieve the desired styling using CSS, but now I am looking to accomplish the same using JavaScript. This way, users can defi ...
I've been struggling with this problem for quite some time now. Despite my efforts to find a solution through Google and StackOverFlow, I have not been successful. The issue lies within a project I am working on, where I have implemented a "Product" M ...
Despite trying to center-align the div using style="text-align: center;", display: block, and align="center", none of these methods seemed to work for me. Here is the code including all attempts: <div align="center" style="text- ...
I would like to display a message indicating whether the login/register process was successful or not above my form. I am using Boostrap 3 along with some PHP functions. The message appears above my navbar but vanishes after 3 seconds, which is a bit anno ...
Currently, I am utilizing $http.get to retrieve a list of videos from YouTube using the API endpoint 'MY_API_KEY'. The goal is to construct a link with the video ID in the format: "{{videoID}}". However, extracting the videoID proves to be chall ...