PDA

View Full Version : Random Content Order script help



justin-nc
06-03-2011, 09:04 PM
1) Script Title: Random Content Order

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/randomcontentorder.htm

3) Describe problem:

I'm trying to get this script to work on a table, but across two rows.

For example, here's my table code:


<table>
<tr>
<td class="group1">Red</td>
<td class="group1">Blue</td>
<td class="group1">Yellow</td>
</tr>
<tr>
<td>
<td class="group1-bottom">Red footer</td>
<td class="group1-bottom">Blue footer</td>
<td class="group1-bottom">Yellow footer</td>
</tr>
</table>


I want to randomize the display of the columns, but I want to keep "Red" in the same column as "Red Footer" and "Blue" in the same column as "Blue Footer">

I have these items in separate rows for a reason unrelated to this script, so combining them into the same cell is not an option.

Any suggestions?

jscheuer1
06-04-2011, 07:42 AM
You have a stray opening <td> tag in the second row of that table. That threw me off a little when I copied the markup and worked up a script for this. I only mention it because, if you aren't careful, it might throw things off for you as well. I fixed it here in this demo:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function randomizeColumns(table){
table = document.getElementById(table);
var rows = table.rows, cols = rows[0].cells, colAr = [], randtable = table.cloneNode(true),
rrows = randtable.rows, placeholder = randomizeColumns.placeholder, plucked, i, j;
for (i = cols.length - 1; i > -1; --i){
colAr.push(i);
}
colAr.sort(function(){return Math.random() - 0.5;});
for (i = rrows.length - 1; i > -1; --i){
for (j = colAr.length - 1; j > -1; --j){
plucked = rows[i].replaceChild(placeholder(), rows[i].cells[colAr[j]]);
rrows[i].replaceChild(plucked, rrows[i].cells[j]);
}
}
table.parentNode.replaceChild(randtable, table);
}
randomizeColumns.placeholdertd = document.createElement('td');
randomizeColumns.placeholder = function(){return randomizeColumns.placeholdertd.cloneNode(false);};
</script>
</head>
<body>
<table id="table_a">
<tr>
<td class="group1">Red</td>
<td class="group1">Blue</td>
<td class="group1">Yellow</td>
</tr>
<tr>
<td class="group1-bottom">Red footer</td>
<td class="group1-bottom">Blue footer</td>
<td class="group1-bottom">Yellow footer</td>
</tr>
</table>
<input type="button" value="Randomize" onclick="randomizeColumns('table_a');" />
<script type="text/javascript">
randomizeColumns('table_a');
</script>
</body>
</html>

Notes: Randomizes onload and onclick of the Randomize button. The classes are not required. I left them in so they could be used to style the td's. Should work with any number of rows as long as the number of td's in each row is the same as all of the other rows.

justin-nc
06-04-2011, 12:31 PM
Thanks, that works great! My apologies for the sloppy code.

The only issue I encountered in doing some further tinkering is that the script no longer keeps the classes in place. For example, if I add in a class to the first td of each row (ie., "lead-item"), that class stays with the content from that td, even if moved elsewhere. In the original script, I think it stayed in place with the first td. But I can work around this, the important thing is that the columns are randomized in tandem across the rows!

Thank you very much!

jscheuer1
06-04-2011, 12:42 PM
I could have written it so that only the content got moved. I elected to move the actual td elements thinking that if events were attached to any or all of the td's, it would be nice to have them move along with the content.

This does also have the effect that if a class is associated with a td, it moves right along with it as well.

Carver
10-04-2011, 11:17 PM
I realize this is an old post. Yet I was using this script in my wordpress site with no glitches. Then, I did a stupid thing and lost the entire website without a backup or saved code. Now, I am rebuilding. I have Step 2 working and it appears to be clear of mistakes.

Where should I put step 1? It must have been shear luck the first script worked so well. I have put step 1 in the header, I have put it in the css style sheet and my step 2 content disappears. I remove step 1 and step 2 content reappears.

I feel silly because I know its something I am not doing correctly. I mean it was working great 8 days ago.

Thank you for reading and helping if possible.
Carver

[Resolved]
Insert step 1 after

[code] wp_head();
?> [code]

this should be about the 144 line on an original header.php of 2010 theme.

Hope this helps someone else.

Carver