I want to swap around profile order after every refresh. Essentially, each 'profile' is a small thumbnail picture along with some corresponding text next to it.
I found many scripts that allow me to rotate pictures or Div's on refresh, but none that can rotate 'profiles' on the same page without any duplication.
Let's say these profiles are shown in 2 columns with 4 rows, for a total of 8 profiles, like below.
P1 P2
P3 P4
P5 P6
P7 P8
I want a script that when on refresh, these same profiles are still shown on the page, but only rearranged in a random order, so that the next time a user visits or refreshes the page, the profiles might be in the order below as an example (or any other random order).
P7 P2
P4 P6
P8 P1
P3 P5
Note that the thumbnail picture and the small amount of text that goes along with that profile should always be shown together.
In short you need to shuffle the images/texts onload keeping each image and its associated text aligned by separating them by a delimiter such as a tilde ~ and then using the split() method to break down each element of the shuffled array into the two components - image and text.
Use this as a template:-
Code:
<html>
<head>
<script type = "text/javascript">
Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
while (s.length) this.push(s.pop());
return this;
}
var quotations = new Array();
quotations[0]= "One.gif~germaine arnold"; // the images and associated texts
quotations[1]= "Two.gif~endearing moral";
quotations[2]= "Three.gif~analog reminder";
quotations[3]= "Four.gif~regained normal";
quotations[4]= "Five.gif~renaming ordeal";
quotations[5]= "Six.gif~nominal regrade"
quotations[6]= "Seven.gif~arraigned lemon"
quotations[7]= "Eight.gif~ringleader moan"
quotations.shuffle();
alert (quotations); // for testing
function show() {
var a = quotations[0].split("~");
document.getElementById("myimage1").src = a[0]; // the image
document.getElementById("q1").innerHTML = a[1]; // the text
// repeat for subsequent images/texts
// var b = quotations[1].split("~");
//document.getElementById("myimage2").src = b[0]; // the image
//document.getElementById("q2").innerHTML = b[1]; // the text
}
</script>
</head>
<body onload = "show()">
<image id = "myimage1">
<span id = "q1"></span>
<br>
<image id = "myimage2">
<span id = "q2"></span><br>
</body>
</html>
That performance has left us speechless. Let's talk about it. - Olympic Commentator BBC 1
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Last edited by Philip M; 08-11-2012 at 08:47 AM..
Reason: Noticed typo
Thanks for this Philip. I tried your code and while it does shuffle image and associated text, I need all 8 profiles to appear on the same page at one time, instead of how you have it now, where only 1 image and its text appears at a time.
Essentially, there are 8 fixed positions on the page that shows the 8 profiles all at once. At any given time, any of the 8 profiles could appear at any of the 8 fixed positions, randomly. So for your first visit, you might see one configuration. For the next, another. But each time, you would still in fact see the same exact profiles, only in different locations.
Is there perhaps a way to modify your code to do this?
Thanks for this Philip. I tried your code and while it does shuffle image and associated text, I need all 8 profiles to appear on the same page at one time, instead of how you have it now, where only 1 image and its text appears at a time.
Essentially, there are 8 fixed positions on the page that shows the 8 profiles all at once. At any given time, any of the 8 profiles could appear at any of the 8 fixed positions, randomly. So for your first visit, you might see one configuration. For the next, another. But each time, you would still in fact see the same exact profiles, only in different locations.
Is there perhaps a way to modify your code to do this?
The code I gave you is a template. It is for you to write the HTML/CSS to define the position of the eight images on the page.
Did you not notice
// repeat for subsequent images/texts
// var b = quotations[1].split("~");
//document.getElementById("myimage2").src = b[0]; // the image
//document.getElementById("q2").innerHTML = b[1]; // the text
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Philip M and vwphillips have already posted solutions to the problem but I have another solution and, I think, it is better.
You have to separate your task into 2 logically loosely related subtasks:
1) obtain an array containing 8 randomly ordered numbers 0 ... 7.
2) place the 8 profiles on the page in the order given by an array containing their indexes.
The sample solution to the 1st subtask:
Code:
function shuffle() {
var a=Array(8), result=[];
for (var i=0; i<8; i++)
a[i]=i;
while (i>0) {
var c=Math.floor(Math.random()*i);
result.push(a[c]);
a[c]=a[--i];
}
return result;
}
Philip M, I think this solution is better than yours because I used replacing one element in the array instead of splice.
General advice: never use splice if the order of the elements in the resulting array is unimportant.
General advice: never use splice if the order of the elements in the resulting array is unimportant.
Maybe I shouldn't have said "never" here, but at least it's a bad idea to use splice if the order of the elements in the resulting array is unimportant and the absolute value of the difference between the number of added and removed elements is much smaller than the number of elements after the removed ones, because many unnecessary replacements are done then.
Before you post, read our: 
