New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


NS6+ IE5+ Opera 7+

Random Content Order script

Author: Dynamic Drive

Updated: Sept 21st, 07 to support randomizing TR elements as well (instead of just DIV).

Description: Randomize the display order of arbitrary content on your page with this script! As a result, the order in which the participating contents is displayed on the page changes randomly each time the page loads. This script is useful when you wish to give certain contents equal visibility on the page, so no one content always occupy the top spot.

Simply wrap the desired contents in DIV containers with a shared CSS class attribute, and the script will scramble the display order of these content relative to one another. You can also use this script on a TABLE to randomize the order of its rows (via the TR tag).

Demo: There are five ordinary content below. Reload page to see their display order randomized each time:

Content 1
Content 2
Content 3
Content 4
Content 5


Directions: Developer's View

Step 1: Insert the following script in the HEAD section of your page

Select All

Step 2: Insert the below sample code into the BODY section of your page:

Select All

The code of Step 2 illustrates how to apply the script to ordinary content on your page- simply wrap the participating content inside a DIV tag with a common "class" attribute:

<div class="group1">
Content 1
</div>

<div class="group1">
Content 2
</div>

"
<script type="text/javascript">

//randomize order of contents with DIV class="group1"
randomizeContent("group1")

</script>

At the very end, call function "randomizeContent()" with a shared (identical) CSS class name to instantly randomize the above contents' display order. That's it!

You can also use this script on TABLE rows to randomize their display order. Just give the participating TR tags a common CSS class name. Make sure the TR elements all belong to the same TBODY:

<table border="1" width="100%">
<tr class="group2">
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr class="group2">
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr class="group2">
<td>Row 3</td>
<td>Row 3</td>
</tr>
</table>

<script type="text/javascript">

//randomize order of contents with DIV class="group1"
randomizeContent("group2")

</script>

Notes

1) As mentioned, to group abitrary content on the page to be randomized, you give every content the same CSS class name. You're free, however, to give certain individual content within this group additional class names to style that content differently from the rest- just separate multiple class names with a space:

<div class="group1">
Content 1
</div>

<div class="catclass group1">
Content 2
</div>

<div class="group1 dogclass">
Content 3
</div>

Here we have 3 contents that will be randomized as a group, with the 2nd and 3rd content each carrying an additional class attribute.

2) You can call "randomizeContent()" multiple times with different class values to randomize multiple groups of contents:

<script type="text/javascript">

//randomize order of contents with DIV class="group1"
randomizeContent("group1")
randomizeContent("group2")

</script>

3) Depending on the type of content you wish to randomize on the page, you may want to call function "randomizeContent()" after the page has fully loaded (instead of instantly) to prevent any problems:

<script type="text/javascript">

window.onload=function(){
//randomize order of contents with DIV class="group1"
randomizeContent("group1")
}

</script>