How do I randomize div elements on each page load?

Question

<!DOCTYPE html>
<html lang="en">
<head>
<title>Site Name</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">

 </div>
<div class="navhead" id="myNavbar">
  <ul class="nav navbar-nav">
    <a>Site Name</a>
    <a href="#">Home</a>
    <a href="#">Under $20</a>
    <a href="#">Under $100</a>
    <a href="#">Ballin</a>
    <a href="#">For Him</a>
    <a href="#">For Her</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </ul>
</div>
</div>

</nav>


<div class="container-fluid">

<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

 </div>
</div>

</body>
</html>

How do I get the div class "col-lg-4 col-sm-6 col-xs-12" to appear in a random order every time the page is loaded? I added a js file with the following code but its not working. Im building this page offline, do I need to download javascript for it to work like I had to for bootstrap?

var cards = $(".col-lg-4 col-sm-6 col-xs-12");
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));
}

https://stackoverflow.com/questions/13427287/shuffle-all-divs-with-the-same-class — JM-AGMS, Jul 10 '17 at 23:22

score 5 · Answer 1 · answered Jul 10 '17 at 23:29

Try this code instead

var parent = document.querySelector(".container-fluid .row");
for(var i = 0; i < parent.children.length; i++){
  parent.appendChild(parent.children[Math.random() * i | 0]);
}

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">

 </div>
<div class="navhead" id="myNavbar">
  <ul class="nav navbar-nav">
    <a>Site Name</a>
    <a href="#">Home</a>
    <a href="#">Under $20</a>
    <a href="#">Under $100</a>
    <a href="#">Ballin</a>
    <a href="#">For Him</a>
    <a href="#">For Her</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </ul>
</div>
</div>

</nav>


<div class="container-fluid">

<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info1</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info2</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info3</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info4</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info5</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info6</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info7</button></p></div>

 </div>
</div>

I cant seem to get this to work, do I need to download javascript? I had to download bootstrap to get the responsive effect to work. — Phillip, Jul 11 '17 at 01:06
Javascript is supported in the browser by default. And yes, you need to download bootstrap to display the page styles properly — Dad, Jul 13 '17 at 23:41

charlietfl · Answer 2 · 2017-07-10T23:40:00.397

0

Can use an array shuffle approach as in How can I shuffle an array?

var $cont = $('#content'),
  itemsArr = $cont.children().get();


$cont.append(shuffle(itemsArr))

function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }
    return a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="content">
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #1</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #2</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #3</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #4</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #5</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #6</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #7</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #8</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #9</div>
  <div class="col-lg-4 col-sm-6 col-xs-12">Item #10</div>
</div>

edited Jul 10 '17 at 23:40

answered Jul 10 '17 at 23:29

charlietfl

170,828
13
121
150

I'd love to use this because I can see that it works in your example but I cannot get it to work offline – Phillip Jul 11 '17 at 01:08
Any errors in browser console? Is code after you load jQuery.js and inside `document.ready`? – charlietfl Jul 11 '17 at 01:11
sorry Im new to this, where do I load jQuery.js? console doesnt show anything when I refresh the page – Phillip Jul 11 '17 at 01:16
Try wrapping the code in `$(function(){ /* code here */})` – charlietfl Jul 11 '17 at 01:20

How do I randomize div elements on each page load?

2 Answers2