Skip to content

Instantly share code, notes, and snippets.

@lmccart

lmccart/index.html

Created October 19, 2017 22:53
Show Gist options
  • Save lmccart/084161a66f58a9925936728d81fdd6a2 to your computer and use it in GitHub Desktop.
Save lmccart/084161a66f58a9925936728d81fdd6a2 to your computer and use it in GitHub Desktop.
Download ZIP
random order
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery demo</title>
<link rel="stylesheet" href="style.css"></link>
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<!-- delete any width and height info from url -->
<div class='random'>item 1</div>
<div class='random'>item 2</div>
<div class='random'>item 3</div>
<div class='random'>item 4</div>
</body>
</html>
Raw
main.js
$(document).ready(function() {
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 elements = $('.random');
elements.remove();
shuffle(elements);
for (var i=0; i < elements.length; i++) {
$('body').append(elements[i]);
}
});
Raw
style.css
.random:nth-child(1) {
position: absolute;
left: 100px;
top: 200px;
}
.random:nth-child(2) {
position: absolute;
left: 200px;
top: 500px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment