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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    33
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Smile 3 Random links from list

    Hi,

    I'm looking for a script which will display 3 url links at random from a pre-defined list. If possible it would be ideal if no links were repeated i.e. the same one shown twice.

    I've found a few 'random link' scripts, but none that can do this.

    Anyone?

    thanks

  • #2
    New Coder
    Join Date
    Mar 2013
    Location
    Indiana
    Posts
    26
    Thanks
    0
    Thanked 7 Times in 7 Posts
    A few changes to this code: http://jsfiddle.net/ynhCN/1/ and you could find what you need. Essentially you create the list as an array, randomly select an item, remove it from the array, and repeat.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Well, yes, but you can do it a lot simpler.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * { font-size: x-large; }
    </style>
    </head>
    <body>
    <div>
    <a id="link1" href="#">link1</a><br/>
    <a id="link2" href="#">link2</a><br/>
    <a id="link3" href="#">link3</a>
    </div>
    <script type="text/javascript">
    (
      function( )
      {
          var links = [
               "http://www.google.com",
               "http://www.bing.com",
               "http://www.yahoo.com",
               "http://www.codingforums.com",
               "http://www.cnn.com",
               "http://www.ebay.com"
          ];
          for ( var i = 1; i <= 3; ++i )
          {
              var pick = Math.floor( Math.random() * links.length );
              var link = document.getElementById("link"+i);
              link.href = links[pick];
              link.innerHTML = links[pick]; // optional
              links.splice( pick, 1 ); // removed the picked one
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    33
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thanks a lot. Is there a way the text for the link can be something other than the actual link address though?

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Looks like a minor change to Old Pedant's code should do the job...
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * { font-size: x-large; }
    </style>
    </head>
    <body>
    <div>
    <a id="link1" href="#">link1</a><br/>
    <a id="link2" href="#">link2</a><br/>
    <a id="link3" href="#">link3</a>
    </div>
    <script type="text/javascript">
    ( function( ) {
        var links = [
           "http://www.google.com|GOOGLE",
           "http://www.bing.com|BING",
           "http://www.yahoo.com|YAHOO",
           "http://www.codingforums.com|CODINGFORUMS",
           "http://www.cnn.com|CNN",
           "http://www.ebay.com|EBAY"
        ];
        for ( var i = 1; i <= 3; ++i ) {
          var pick = Math.floor( Math.random() * links.length );
          var link = document.getElementById("link"+i);
          var tmp = links[pick].split('|');
          link.href = tmp[0];
          link.innerHTML = tmp[1]; // optional
          links.splice( pick, 1 ); // removed the picked one
        }
      }
    )();
    </script>
    </body>
    </html>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Note that JMrkr use just | as his delimiter there.

    On the odd offchance that you need | as part of the text for some link, just choose a different delimiter.

    I'm partial to using more than one character as a delimter, such as $$.

    That way, even if there is a $ in the text, the split won't find it, when you do var tmp = links[pick].split('$$');

    But surely the single | is fine for 98% of all cases. It's just my paranoia talking.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Here is another way to kill the cat (shuffle the array of links):-

    Code:
    <html>
    <head> 
    
    <style type = "text/css">
    a {font-size:150%; font-weight:bold;line-height:150%}
    }
    </style>
    
    </head>
    <body>
    
    <div id = "mylinks" style="display:none">
    <a id="link1"></a><br/>
    <a id="link2"></a><br/>
    <a id="link3"></a>
    </div>
    
    <script type = "text/javascript">
    
    document.getElementById("mylinks").style.display="block";  // reset to show if Javascript enabled
    
    Array.prototype.shuffle = function() {
    var s = [];
    while (this.length) s.push(this.splice(Math.random() * this.length, 1));
    while (s.length) this.push(s.pop());
    return this;
    }
    
    var links = [
           "http://www.google.com~GOOGLE",
           "http://www.bing.com~BING",
           "http://www.yahoo.com~YAHOO",
           "http://www.codingforums.com~CODINGFORUMS",
           "http://www.cnn.com~CNN",
           "http://www.ebay.com~EBAY"
        ];
    
    links.shuffle();
    
    for (var i =1; i<=3; i++) {
    var link = document.getElementById("link"+i);
    var temp = links[i-1].toString();
    var tempsplit = temp.split("~");
    link.href = tempsplit[0];
    link.innerHTML = tempsplit[1]; 
    }
    
    </script>
    
    </body>
    </html>
    I personally prefer to use ~ as the delimiter. Just my preference. ~~ is fine as well. | to me means or in a regex.

    It is best to remove the href and innerHTML of the links (link 1 etc.) as otherwise they will show but not work if Javascript is disabled.
    And/or hide the div.

    * { font-size: x-large; } sets the font size for the whole page.


    Quizmaster: In mythology, what term for a potion that increases sexual desire is derived from the name of the Greek goddess of love?
    Contestant: Viagra
    Last edited by Philip M; 03-16-2013 at 11:59 AM. Reason: Added style

    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.

  • #8
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    The best delimiter is the one that cannot occur in the given data type. '~' is a bad choice because it is a valid character in URLs (and actually isn't that uncommon at all). The same goes for '$'. That makes '|' the best choice of the mentioned ones because it has a 100% guarantee to not come up in a URL for at least many years to come.
    Of course this is false if your links include GET-request parameters, i.e. www.foobar.com/?this=is|sparta.

    To be absolutely safe, just don't use such a format at all. You can use something like

    Code:
    var links = [
    { href: 'http://www.google.com', text: 'Google' },
    { href: 'http://www.yahoo.com', text: 'Yahoo' }];
    and then in Philip's script replace

    Code:
    var temp = links[i-1].toString();
    var tempsplit = temp.split("~");
    link.href = tempsplit[0];
    link.innerHTML = tempsplit[1];
    with

    Code:
    link.href = links[i-1].href;
    link.innerHTML = links[i-1].text;
    You will also have to change the shuffle implementation. The following code is an implemented version of what I was talking about and uses the Fisher-Yates algorithm to shuffle the array:

    Code:
    <html>
        
        <head>
            <style type="text/css">
                a {
                    font-size:150%;
                    font-weight:bold;
                    line-height:150%
                }
            }
            </style>
        </head>
        
        <body>
            <div id="mylinks" style="display:none">
    <a id="link1"></a>
                <br/>
    <a id="link2"></a>
                <br/>
    <a id="link3"></a>
    
            </div>
            <script type="text/javascript">
                document.getElementById("mylinks").style.display = "block"; // reset to show if Javascript enabled
    
                Array.prototype.shuffle = function () {
                    for (var i = this.length - 1; i > 0; i--) {
                        var j = Math.floor(Math.random() * (i + 1));
                        var temp = this[i];
                        this[i] = this[j];
                        this[j] = temp;
                    }
                    return this;
                }
    
                var links = [{
                    href: 'http://www.google.com',
                    text: 'Google'
                }, {
                    href: 'http://www.yahoo.com',
                    text: 'Yahoo'
                }, {
                    href: 'http://www.codingforums.com',
                    text: 'CodingForums'
                }, {
                    href: 'http://www.foo.com',
                    text: 'Foo'
                }, {
                    href: 'http://www.bar.com',
                    text: 'Bar'
                }, {
                    href: 'http://www.9gag.com',
                    text: '9gag'
                }];
    
                links.shuffle();
    
                for (var i = 1; i <= 3; i++) {
                    var link = document.getElementById("link" + i);
    
                    link.href = links[i-1].href;
                    link.innerHTML = links[i-1].text;
                }
            </script>
        </body>
    
    </html>
    Last edited by Airblader; 03-16-2013 at 02:07 PM.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Airblader View Post
    The best delimiter is the one that cannot occur in the given data type. '~' is a bad choice because it is a valid character in URLs (and actually isn't that uncommon at all). The same goes for '$'. That makes '|' the best choice of the mentioned ones because it has a 100% guarantee to not come up in a URL for at least many years to come.
    Of course this is false if your links include GET-request parameters, i.e. www.foobar.com/?this=is|sparta.

    Funny, I do not see either a ~ or a $ in the url's listed. Still less ~~ or $$.

    Fisher-Yates algorithm uses Math.random() but Math.random() is not random at all, and therefore the Fisher-Yates Shuffle will not randomly shuffle for sufficiently large sets. The code I posted returns an unbiassed shuffle.
    Last edited by Philip M; 03-16-2013 at 02:08 PM.

    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.

  • #10
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Not in the URLs listed, but they may appear in URLs (and the ~ is quite common; ~~ probably not as much).

    I also updated my answer.

  • #11
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    If you like you can use any other shuffle implementation. As long as it works.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Airblader View Post
    Not in the URLs listed, but they may appear in URLs (and the ~ is quite common; ~~ probably not as much).

    I also updated my answer.
    Well, if one of the urls did contain a ~, then it would mean that you had to choose a different delimiter. I would have thought that too obvious to be worth mentioning. I think you are reverting back to your bad habit of picking pedantic holes for the sake of it. The code I posted works just fine. Yours does not because, as I say, the Fisher-Yates algorithm is biased.
    Last edited by Philip M; 03-16-2013 at 02:18 PM.

    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.

  • #13
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    But in sufficiently large sets, you might not notice that your delimiter is contained in a URL. I think it's less trouble to just pick a delimiter that can't ever occur in URLs anyway rather than having to check everytime you add a link.

    But as I said, even easier is just not using delimiter-based methods anyway. It's not really more work, is it? I think of this as an addition to your answer. Yes, in the given scenario your script works just fine, I didn't say it doesn't. My main point was that everyone was talking about delimiters and in my opinion delimiters are not the best way, no matter which one you choose.

  • #14
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by Philip M View Post
    [..]because, as I say, the Fisher-Yates algorithm is biased.
    I'll gladly accept that point, but the main point of my post was not the shuffle implementation but the actual data structure. All I did was present an alternate approach to the ones before. I just had to change the shuffle implementation because the one you posted wouldn't work with the rest of my code.

  • #15
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Oh, WTF

    "http://www.google.com~~~~GOOGLE",

    var tempsplit = temp.split("~~~~");


    If you can show me a real url with four tildes in it I will eat my hat!

    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.


  •  
    Page 1 of 2 12 LastLast

    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
    •