I wrote some code to shuffle my div elements when the page is reloaded, but I really want them to be shuffled every time a new visitor lands on the page. Since I am not an expert in jquery/javascript, I decided to reach out here for some guidance.
Here's the code snippet:
onload = function() {
var parent = document.getElementById("shuffle");
var frag = document.createDocumentFragment();
while (parent.children.length) {
frag.appendChild(parent.children[Math.floor(Math.random() * parent.children.length)]);
}
parent.appendChild(frag);
}
$(document).ready(function() {
window.location.href = window.location.href;
});#shuffle>div {
float: left;
line-height: 30px;
width: 30px;
text-align: center;
background-color: steelblue;
color: #fff;
border-radius: 4px;
margin: 3px;
}
#shuffle {
max-width: 360px;
}<div id="shuffle">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>EDIT - ISSUE RESOLVED! If anyone is interested in how this was fixed, you can view the updated jsfiddle here