Random Content Order issue in IE

[Beachcomber]

1) Script Title: Random Content Order

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ntentorder.htm

3) Describe problem:

I have a table with this script posted on this page pictonsoundsbb.co.nz/picton-bed-breakfast.html which works well in Mozilla.

However in IE, the bottom row frequently stays on the bottom, and after several refreshes one or two or the rows get hooked in with the footer colored row.

Any help gratefully received thank you.

[jscheuer1]

Well the random algorithms in javascript are less than ideal and even that varies by browser, but there's no reason why the table should get messed up.

This seems to work. Get rid of:

		<script type="text/javascript">

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

</script>

and replace the main script with:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

/***********************************************
* Random Content Order script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified 09/11/2012 for use w/table in IE via jQuery by jscheuer1 in http://www.dynamicdrive.com/forums/
***********************************************/

jQuery(function($){
	function randomizeContent(classname){
		var contents = {
			ref: $('.' + classname),
			text: []
		};
		contents.ref.each(function(){
			contents.text.push(this.innerHTML);
		});
		contents.text.sort(function(){return 0.5 - Math.random();});
		contents.ref.each(function(i){
			$(this).html(contents.text[i]).css('visibility', 'visible');
		});
	}
	//randomize order of contents with class="group1"
	randomizeContent("group1");
});

</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

[Beachcomber]

thank you John - very much appreciated.

This is the first attempt I have made at randomising anything. I note your comment "the random algorithms in javascript are less than ideal". Could you recommend what I should be using. I am familiar only with HTML and CSS at this stage.

[jscheuer1]

The randomizing algorithm of javascript isn't perfect, but with a large enough sample like you have it's pretty good. Some browsers will do a better job than others. On any given day one browser may seem better than another, and on any given occasion a given browser may seem to be doing a better job than on others. Random means random though, so technically speaking one could get the same result many times in a row.

The handiest alternative for the web would be PHP if available on the server. I just worked this out, if you were to give the page a .php extension:

picton-bed-breakfast.php

You could get rid of javascript entirely and rewrite the table like so:

        <table summary="B&amp;B summary">
            <caption>Picton &amp; Marlborough Sounds B&amp;B</caption>
            <thead>
                <tr>
                    <th scope="col">B&amp;B</th>
                    <th scope="col">Location</th>

                    <th scope="col">Price<br />from</th>
                    <th scope="col">Rooms</th>
                    <th scope="col">Bathroom</th>
                    <th scope="col">Dinner<br />available</th>
                    <th scope="col">Credit Card</th>
                </tr>
            </thead>    
            <tfoot>
                <tr>
                    <th scope="row">&nbsp;&nbsp;</th>

                    <td colspan="6">&nbsp;&nbsp;</td>
                </tr>
            </tfoot>
            <tbody>
<?php
$bnbrows = array(
            '<tr class="group1">
                <th><a href="anchordown.html">Anchor Down</a></th>
                    <td>Picton</td>

                    <td>$110</td>
                    <td>2Q 1T</td>
                    <td>ensuite</td>
                    <td>Yes</td>
                    <td>No</td>
                <tr>',
            '<tr class="group1">
                <th scope="row"><a href="cnocnalear.html">Cnoc na Lear Guest House</a></th>
                    <td>Endeavour Inlet</td>

                    <td>$180</td>
                    <td>1K/T, 1Q</td>
                    <td>ensuite</td>
                    <td>Yes</td>
                    <td>Yes</td>
                <tr>',
                
                    '<tr class="group1 odd">
                <th scope="row"><a href="echo-lodge.html">Echo Lodge</a></th>
                    <td>Picton</td>

                    <td>$100</td>
                    <td>2Q 1T 1S</td>
                    <td>ensuite</td>
                    <td>No</td>
                    <td>No</td>
                <tr>',
                '<tr class="group1">
                <th scope="row"><a href="essons-valley.html">Essons Valley</a></th>
                    <td>Picton</td>

                    <td>$100</td>
                    <td>1D, 1 cabin </td>
                    <td>private</td>
                    <td>Yes</td>
                    <td>Yes</td>
                <tr>',
                
            '<tr class="group1 odd">
                    <th scope="row"><a href="fernview.html">Fernview Cottage</a></th>
                    <td>Picton</td>

                    <td>$140</td>
                    <td>1K,1Q,1T</td>
                    <td>private</td>
                    <td>No</td>
                    <td>No</td>
                <tr>',
                '<tr class="group1">
                    <th scope="row"><a href="glengary.html">Glengary</a></th>
                    <td><a >Picton</a></td>

                    <td>$80</td>
                    <td>2Q 1KT</td>
                    <td>ensuite</td>
                    <td>No</td>
                    <td>No</td>
                <tr>',
                                
                '<tr class="group1 odd">
                    <th scope="row"><a href="grandvue.html">Grandvue</a></th>
                    <td><a >Picton</a></td>

                    <td>$75</td>
                    <td>1D 1Q/T</td>
                    <td>ensuite/share</td>
                    <td>No</td>
                    <td>V, M</td>
                <tr>',
                '<tr class="group1">
                
                    <th scope="row"><a href="koromiko-homestead.html">Koromiko Homestead</a></th>
                    <td><a >Koromiko</a></td>

                    <td>$200</td>
                    <td>2Q</td>
                    <td>private</td>
                    <td>No</td>
                    <td>V, M</td>
                <tr>',
                
                '<tr class="group1 odd">
                    <th scope="row"><a href="marineland-house.html">Marineland Heritage</a></th>
                    <td><a >Picton</a></td>

                    <td>$85</td>
                    <td>3T,5D,1S<br />1Q,1SK.</td>
                    <td>ensuite/private</td>
                    <td>No</td>
                    <td>All</td>
                <tr>',
                '<tr class="group1">
                    <th scope="row"><a href="mccormickhouse.html">McCormick House</a></th>
                    <td>Picton</td>

                    <td>$320</td>
                    <td>1Q,1KT,1T</td>
                    <td>ensuite</td>
                    <td>No</td>
                    <td>V A M D</td>
                <tr>',
                '<tr class="group1 odd">
                    <th scope="row"><a href="michiru.html">Michiru</a></th>
                    <td>Waikawa</td>

                    <td>$90</td>
                    <td>1D,1T,1S </td>
                    <td>1 ensuite<br />2 private</td>
                    <td>Yes</td>
                    <td>Yes</td>
                <tr>',
                
                            
                        
                        '<tr class="group1">
                    <th scope="row"><a href="ramona.html">Ramona</a></th>
                    <td>Pelorus Sound</td>

                    <td>$90</td>
                    <td>1Q 1T</td>
                    <td>private</td>
                    <td>Yes</td>
                    <td>V, M</td>
                <tr>',
                '<tr class="group1 odd">    
                    <th scope="row"><a href="retreat-inn.html">Retreat Inn</a></th>
                    <td>Picton</td>

                    <td>$135</td>
                    <td>1Q,1Q or T</td>
                    <td>ensuite/private</td>
                    <td>No</td>
                    <td>No</td>
                <tr>',    
                        
                '<tr class="group1">
                    <th scope="row"><a href="the-gables.html" title="The Gables">The Gables</a></th>
                    <td><a >Picton</a></td>

                    <td>$130</td>
                    <td>2Q 1D 2T</td>
                    <td>ensuite</td>
                    <td>No</td>
                    <td>V M EF</td><tr>',
                    
                    
                
                            '<tr class="group1">    
                    <th scope="row"><a href="waterfront.html" title="Waterfront">Waterfront</a></th>
                    <td>Picton</td>

                    <td>$165</td>
                    <td>2Q</td>
                    <td>ensuite/private</td>
                    <td>Yes</td>
                    <td>No</td>
                <tr>');
shuffle($bnbrows);
foreach ($bnbrows as $bnbrow) {
    echo $bnbrow;
}
?>
                </tbody>    
        </table>

The advantages are that there are no browser differences, the PHP randomizing function is more nearly truly random, generally faster, and you're not relying upon the user having javascript enabled. Of course, as I say the server must be PHP enabled though.

BTW, regardless of whether or not this is done via javascript, PHP, or any other method, you could give a class name (like odd) to alternating rows.

[Beachcomber]

Thanks John - I really appreciate it. Unfortunately the website server does not allow for php but I have saved the code so that when I deal with this again I have it to hand. In the meantime, I will stick with the javascript.
Thank you.
Marilyn