Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Rotate 'profiles' on refresh w/ no duplicates

    I want to swap around profile order after every refresh. Essentially, each 'profile' is a small thumbnail picture along with some corresponding text next to it.

    I found many scripts that allow me to rotate pictures or Div's on refresh, but none that can rotate 'profiles' on the same page without any duplication.

    Let's say these profiles are shown in 2 columns with 4 rows, for a total of 8 profiles, like below.

    P1 P2

    P3 P4

    P5 P6

    P7 P8

    I want a script that when on refresh, these same profiles are still shown on the page, but only rearranged in a random order, so that the next time a user visits or refreshes the page, the profiles might be in the order below as an example (or any other random order).

    P7 P2

    P4 P6

    P8 P1

    P3 P5

    Note that the thumbnail picture and the small amount of text that goes along with that profile should always be shown together.

    Is there a script that does what I'm looking for?

    Thanks for any help with this.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,252
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    In short you need to shuffle the images/texts onload keeping each image and its associated text aligned by separating them by a delimiter such as a tilde ~ and then using the split() method to break down each element of the shuffled array into the two components - image and text.

    Use this as a template:-

    Code:
    <html>
    <head>
    <script type = "text/javascript">
    
    Array.prototype.shuffle = function() {
    var s = [];
    while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
    while (s.length) this.push(s.pop());
    return this;
    }
    
    var quotations = new Array();
    quotations[0]= "One.gif~germaine arnold";  // the images and associated texts
    quotations[1]= "Two.gif~endearing moral";
    quotations[2]= "Three.gif~analog reminder";
    quotations[3]= "Four.gif~regained normal";
    quotations[4]= "Five.gif~renaming ordeal";
    quotations[5]= "Six.gif~nominal regrade"
    quotations[6]= "Seven.gif~arraigned lemon"
    quotations[7]= "Eight.gif~ringleader moan"
    
    quotations.shuffle();
    
    alert (quotations);  // for testing
    
    function show() {
    var a = quotations[0].split("~");
    document.getElementById("myimage1").src = a[0];  // the image
    document.getElementById("q1").innerHTML = a[1];  // the text
    // repeat for subsequent images/texts
    // var b = quotations[1].split("~");
    //document.getElementById("myimage2").src = b[0];  // the image
    //document.getElementById("q2").innerHTML = b[1];  // the text
    
    }
    </script>
    
    </head>
    <body onload = "show()">
    
    <image id = "myimage1">
    <span id = "q1"></span>
    <br>
    <image id = "myimage2">
    <span id = "q2"></span><br>
    
    </body>
    </html>

    That performance has left us speechless. Let's talk about it. - Olympic Commentator BBC 1
    Last edited by Philip M; 08-11-2012 at 09:47 AM. Reason: Noticed typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    arliss36 (08-12-2012)

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for this Philip. I tried your code and while it does shuffle image and associated text, I need all 8 profiles to appear on the same page at one time, instead of how you have it now, where only 1 image and its text appears at a time.

    Essentially, there are 8 fixed positions on the page that shows the 8 profiles all at once. At any given time, any of the 8 profiles could appear at any of the 8 fixed positions, randomly. So for your first visit, you might see one configuration. For the next, another. But each time, you would still in fact see the same exact profiles, only in different locations.

    Is there perhaps a way to modify your code to do this?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,252
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    Quote Originally Posted by arliss36 View Post
    Thanks for this Philip. I tried your code and while it does shuffle image and associated text, I need all 8 profiles to appear on the same page at one time, instead of how you have it now, where only 1 image and its text appears at a time.

    Essentially, there are 8 fixed positions on the page that shows the 8 profiles all at once. At any given time, any of the 8 profiles could appear at any of the 8 fixed positions, randomly. So for your first visit, you might see one configuration. For the next, another. But each time, you would still in fact see the same exact profiles, only in different locations.

    Is there perhaps a way to modify your code to do this?
    The code I gave you is a template. It is for you to write the HTML/CSS to define the position of the eight images on the page.

    Did you not notice

    // repeat for subsequent images/texts
    // var b = quotations[1].split("~");
    //document.getElementById("myimage2").src = b[0]; // the image
    //document.getElementById("q2").innerHTML = b[1]; // the text

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    arliss36 (08-12-2012)

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .profile {
      width:100px;height:100px;background-Color:red;float:left;margin:5px;
    }
    
    /*]]>*/
    </style>
    
    
    </head>
    
    <body>
    <div class="profile" >1</div>
    <div class="profile" >2</div>
    <div class="profile" >3</div>
    <div class="profile" >4</div>
    <div class="profile" >5</div>
    <div class="profile" >6</div>
    <div class="profile" >7</div>
    <div class="profile" >8</div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcShffle(nme){
     var reg=new RegExp('\\W'+nme+'\\W'),els=document.getElementsByTagName('*'),ary=[],sary=[],r,t,z0=0,z1=0,z2=0,z3=0
     for (;z0<els.length;z0++){
      if(reg.test(' '+els[z0].className+' ')){
       ary.push(els[z0]);
      }
     }
     for (;z1<ary.length;z1++){
      s=document.createElement('A');
      sary[z1]=s;
      ary[z1].parentNode.insertBefore(s,ary[z1]);
     }
     for (;z2<ary.length;z2++){
      r=Math.floor(Math.random()*ary.length);
      t=ary[z2];
      ary[z2]=ary[r];
      ary[r]=t;
     }
     for (;z3<ary.length;z3++){
      sary[z3].parentNode.replaceChild(ary[z3],sary[z3]);
     }
    }
    
    zxcShffle('profile');
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    arliss36 (08-12-2012)

  • #6
    New Coder
    Join Date
    Jul 2012
    Location
    Ukraine
    Posts
    71
    Thanks
    1
    Thanked 18 Times in 17 Posts
    Philip M and vwphillips have already posted solutions to the problem but I have another solution and, I think, it is better.
    You have to separate your task into 2 logically loosely related subtasks:
    1) obtain an array containing 8 randomly ordered numbers 0 ... 7.
    2) place the 8 profiles on the page in the order given by an array containing their indexes.
    The sample solution to the 1st subtask:
    Code:
    function shuffle() {
      var a=Array(8), result=[];
      for (var i=0; i<8; i++)
        a[i]=i;
      while (i>0) {
        var c=Math.floor(Math.random()*i);
        result.push(a[c]);
        a[c]=a[--i];
      }
      return result;
    }
    Philip M, I think this solution is better than yours because I used replacing one element in the array instead of splice.
    General advice: never use splice if the order of the elements in the resulting array is unimportant.
    Last edited by oneguy; 08-11-2012 at 03:20 PM.

  • Users who have thanked oneguy for this post:

    arliss36 (08-12-2012)

  • #7
    New Coder
    Join Date
    Jul 2012
    Location
    Ukraine
    Posts
    71
    Thanks
    1
    Thanked 18 Times in 17 Posts
    Error

  • #8
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you all for your help!

    I'll see which one I can tweak to best fit my page.

    Thanks everyone!

  • #9
    New Coder
    Join Date
    Jul 2012
    Location
    Ukraine
    Posts
    71
    Thanks
    1
    Thanked 18 Times in 17 Posts
    Quote Originally Posted by oneguy View Post
    General advice: never use splice if the order of the elements in the resulting array is unimportant.
    Maybe I shouldn't have said "never" here, but at least it's a bad idea to use splice if the order of the elements in the resulting array is unimportant and the absolute value of the difference between the number of added and removed elements is much smaller than the number of elements after the removed ones, because many unnecessary replacements are done then.


  •  

    Posting Permissions

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