Random Div Order on Page Load

Random Div Order on Page Load

HTML

First change all of the ids to classes since id must be unique on a page.

<div class="gallerycard">
     <div class="name">Akulina</div>
    <div class="info">N/A</div>
</div>

<div class="gallerycard">
     <div class="name">Martina</div>
    <div class="info">N/A</div>
</div>

<div class="gallerycard">
     <div class="name">Joseph</div>
    <div class="info">N/A</div>
</div>
...    

CSS (Since markup now uses classes switch the style to reflect)

.gallerycard {
    margin: 8px;
    float: left;
    height: 150px;
    width: 221px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 8px;
}

Javascript

Select all card elements from the DOM then generate two randoms between 0 and cards.length. Use eq to select a random element in the selected elements and position it before another randomly selected element in the set of selected eleemnts.

var cards = $(".gallerycard");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}

JS Fiddle: http://jsfiddle.net/BwJHj/1/

Randomize the arrangement of DIVs on page load

This is such an easy question to google... Since you are sorting a
list of .Table elements, it's content and therefore your code example
is irrelevant. See codepen.io/MillerTime/pen/grZOBo

This was the solution I used, suggested by Pablo as a comment

Randomizing the order of divs on page load with jquery?

The following will get them out of the dom and print them back out randomly.

$(document).ready(function() {
//get list of divs
var div = $(".box").toArray();

//randomly print them back out.
while(div.length > 0) {
    var idx = Math.floor((Math.random() * (div.length-1)));
    var element = div.splice(idx, 1);
    $('body').append(element[0]);
}
});

Randomly placed div's at page load

So something like this?

All that I did was remove the fadeIn and fadeOut parts, and then added a simple function to create a fixed number of divs. I also removed the display: 'none' from the divs that were being created.

var makeDiv = () => {  var divsize = ((Math.random() * 100) + 30).toFixed();  var color = '#' + Math.round(0xffffff * Math.random()).toString(16);  $newdiv = $('<div/>').css({    'width': 2 + 'px',    'height': divsize + 'px',    'border': '1px solid' + color,    'transform': 'rotate(' + divsize + 'deg)',    'background-color': color,  });
  var posx = (Math.random() * ($(document).width() - divsize)).toFixed();  var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
  $newdiv.css({    'position': 'absolute',    'left': posx + 'px',    'top': posy + 'px',    'border-radius': '100px',  }).appendTo('body');}
var generateDivs = (x) => {  for (let i = 0; i < x; i++) {    makeDiv();  }}
generateDivs(100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Order by random a list of div elements with JS

The ideal way to shuffle the categories is through the backend. But incase you can't, we can borrow the shuffle functionality here.

Use jQuery get() to get the array of category divs. Use the function to shuffle the array and use html() to update the content.

function shuffle(array) {  var currentIndex = array.length,    temporaryValue, randomIndex;
  // While there remain elements to shuffle...  while (0 !== currentIndex) {
    // Pick a remaining element...    randomIndex = Math.floor(Math.random() * currentIndex);    currentIndex -= 1;
    // And swap it with the current element.    temporaryValue = array[currentIndex];    array[currentIndex] = array[randomIndex];    array[randomIndex] = temporaryValue;  }
  return array;}
var categories = shuffle($(".container-category>div").get());$(".container-category").html(categories);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container-category">  <div class="col-3">item 1</div>  <div class="col-3">item 2</div>  <div class="col-3">item 3</div>  <div class="col-3">item 4</div></div>

---

Related Topics