www.webdeveloper.com
Results 1 to 6 of 6

Thread: Randomized Featured Customers

  1. #1
    Join Date
    Mar 2011
    Posts
    3

    Randomized Featured Customers

    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!

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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?
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Mar 2011
    Posts
    3
    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...

  4. #4
    Join Date
    Feb 2006
    Posts
    2,927
    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>
    Last edited by mrhoo; 03-29-2011 at 12:28 PM.

  5. #5
    Join Date
    Mar 2011
    Posts
    3
    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!

  6. #6
    Join Date
    Feb 2006
    Posts
    2,927
    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;
    	}
    Last edited by mrhoo; 03-31-2011 at 11:30 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles