Randomized Featured Customers

**iPurpleLotus** · 03-29-2011 08:52 AM

I have a page with a set of featured clients with business descriptions (they include text and often an image). I'd like to find a script that will allow me to randomize those, so that each time the page is refreshed, they have an equal opportunity to be at the top of the page. Is this possible? Javascript would be best for the host I'm using.

Thanks so much!

**WolfShade** · 03-29-2011 10:54 AM

This is usually best done with a server-side dynamic language like CF, ASP, PHP, etc.

Are the clients being pulled from a database server? Or are they hard-coded on to the page?

**iPurpleLotus** · 03-29-2011 11:23 AM

Thanks for the reply wolfshade. I appreciate the help! I figured it might be, but I'm limited to javascript. No, no database. The customer descriptions are just coded onto the page...

**mrhoo** · 03-29-2011 12:25 PM

The exact language depends on how you set up the html.

This example presents the 5 list items and their contents in a random order each time the page is opened or refreshed:

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Paul Bunyan</title>

<script>
function shuffle(A){
    var i, temp, L= A.length;
    while(--L){
        i= Math.floor(Math.random()*L);
        temp= A[i];
        A[i]= A[L];
        A[L]= temp;
    }
    return A;
}

onload=function(){
    var pa=document.getElementById('contents'), nodes=pa.childNodes, 
    L=nodes.length,temp, A=[];
    while(L){
        temp=nodes[--L];
        if(temp.nodeName=='LI')A.push(temp);
    }
    A= shuffle(A);
    while(A.length)pa.appendChild(A.shift());
}
</script>

</head>
<body>
<h1>Tales of Paul Bunyan</h1> 
<h2>Contents</h2>
<ul id="contents">
<li><a href="paul_1.html">Paul Bunyan, the Pioneer Woodsman</a></li> 
<li><a href="paul_2.html">Babe the Big Blue Ox</a></li>  
<li><a href="paul_3.html">Feeding the Crew</a></li>
<li><a href="paul_4.html">Lucy and the Camp Dogs</a></li>
<li><a href="paul_5.html">Paul Bunyan, Inventer</a></li>
</ul>

</body>
</html>

**iPurpleLotus** · 03-31-2011 10:50 AM

Oh dear. Thank you, MrHoo for your reply. I'm not sure I know how to make a list work with my page. Would it help to see the page I questioning about? This is the page: http://www.small-business-consulting...usinesses.html

Right now, I have each business just alphabetized and separated with a <hr>.

Would your list example work here?

To reiterate, if it's at all possible, I'd like all of the businesses to stay visible on the page and just rotate or randomly re-order each time the page is refreshed, so they all have an opportunity to get to the top of the page.

Thank you so much for your help!

**mrhoo** · 03-31-2011 11:18 AM

1. get a reference to the parent element of the items to be rotated

2. create an array who's members are those you want re-ordered

3. randomize the array

4. append each member of the array to the parent- they will be moved to the end of the parent in a random order
or

If the parent contains items that are not to be moved, you can use parent.replaceChild(item, olditem),
but it would be simpler for you to contain them all in a div or list or some other container.
Swapping items requires you to keep track of the item that is replaced.

Code:

	swap: function(a, b){
		var p1= a.parentNode, p2= b.parentNode, sib= b.nextSibling;
		if(sib== a) sib= sib.nextSibling;
		p1.replaceChild(b, a);
		if(sib) p2.insertBefore(a, sib);
		else p2.appendChild(a);
		return true;
	}

Thread: Randomized Featured Customers

Thread Tools

Display

Randomized Featured Customers

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions