SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Idler. Chazzy's Avatar
    Join Date
    Jan 2004
    Location
    Uk
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    random (no repeats)

    Morning,

    Ive trawled through google and the tutorials on here to no avail.

    Im after creating a function to assign image sources of 16 img's (within cells) to cell*.gif. There must be no repeats and it needs to be within 0-15. (randomly called from a button)

    I have tried comparing two arrays (1 containing 1-15.gif and the other 0's to set to 1 when used) -- i just ended up completely confused.

    Wondering and hoping someone will have pity on this poor person and help

    Thanks guys.

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a sample of the page?

    The easiest way to do this is to create an 'array of indices' and shuflle that, using the results as pointers to an array of image urls. No naming kludges required. Basic technique illustrated here. Glad to adapt it for you...only $39.99 while they last!
    ::: certified wild guess :::

  3. #3
    Idler. Chazzy's Avatar
    Join Date
    Jan 2004
    Location
    Uk
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    /me reads... thanks very much adios my friend

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    table {
           margin: 100px auto 0 auto;
           border: 4px #000 dashed;
           padding: 2px;
           background: #ffc;
           cursor: crosshair;
           }
    td     {
           margin: 3px;
           border: 1px black solid;
           }
    img    {
    	cursor: crosshair;
           }
    
    
    </style>
    <script type="text/javascript" src="random.js"></script>
    </head>
    <body>
    <table onclick="self.location.reload()">
      <tr> 
        <td width="56" height="67"><img id="random0" src="pixel.gif" width="56" height="67" /></td>
        <td width="56" height="67"><img id="random1" src="pixel.gif" width="56" height="67" /></td>
        <td width="56" height="67"><img id="random2" src="pixel.gif" width="56" height="67" /></td>
        <td width="56" height="67"><img id="random3" src="pixel.gif" width="56" height="67" /></td>
        <td width="56" height="67"><img id="random4" src="pixel.gif" width="56" height="67" /></td>
      </tr><tr>
        <td width="56" height="67"><img id="random5" src="pixel.gif" width="56" height="67" /></td>
        <td width="56" height="67"><img id="random6" src="pixel.gif" width="56" height="67" /></td>
        <td width="56" height="67"><img id="random7" src="pixel.gif" width="56" height="67" /></td>
        <td width="56" height="67"><img id="random8" src="pixel.gif" width="56" height="67" /></td>
        <td width="56" height="67"><img id="random9" src="pixel.gif" width="56" height="67" /></td>
      </tr>
    </table>
    <div style="text-align:center;font-size:smaller;">click it</div>
    </body>
    </html>
    [random.js]
    Code:
    ///////////////
    // random.js //
    ///////////////
    
    var img_urls = [ 
                     'http://www.SitePoint.com/graphics/v2/heads/default3.jpg' , 
                     'http://www.SitePoint.com/graphics/author_andrew.jpg' , 
                     'http://www.SitePoint.com/graphics/nigel.jpg' , 
                     'http://www.SitePoint.com/graphics/author_ivan.jpg' ,
                     'http://www.SitePoint.com/graphics/mike.jpg' , 
                     'http://www.SitePoint.com/graphics/1kev.jpg' , 
                     'http://www.SitePoint.com/graphics/author_josh.jpg' ,
                     'http://www.SitePoint.com/graphics/1danielk.jpg' , 
                     'http://www.SitePoint.com/graphics/patrick.jpg' ,
                     'http://www.sitepoint.com/graphics/author_dennispallett.jpg'
                   ];
    
    var idx, i, ind1, ind2, temp, arraylength = img_urls.length;
    var idx_array = new Array(arraylength);
    for (i = 0; i < arraylength; ++i)
    	idx_array[i] = i;
    for (i = 0; i < arraylength; ++i)
    {
    	ind1 = Math.floor(Math.random() * arraylength);
    	ind2 = Math.floor(Math.random() * arraylength);
    	temp = idx_array[ind1];
    	idx_array[ind1] = idx_array[ind2];
    	idx_array[ind2] = temp;
    }
    
    onload = function()
    {
    	var img, i = 0;
    	while (img = document.getElementById('random' + i))
    		img.src = img_urls[idx_array[i++]];
    }
    Don't forget "pixel.gif" (1px transparency/placeholder...or something else!).
    ::: certified wild guess :::

  5. #5
    Idler. Chazzy's Avatar
    Join Date
    Jan 2004
    Location
    Uk
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Majorly struggling today

    Any ideas on how to generate 16 random integers between 0 and 15 no repeats into 16 variables?

    btw, your a legend at this heh. thanks VERY much for your help thus far. ((i try to help back in other areas))
    Last edited by Chazzy; Mar 12, 2004 at 09:34.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chazzy
    Any ideas on how to generate 16 random integers between 0 and 15 no repeats into 16 variables?
    Indeed, adios has done that. It seems that you are not actually talking about random "numbers" - but rather: a random "sequence" of the integers 0 - 15.

    In adios' code, the array "idx_array" contains a random sequence of the integers 0 - 9, and could easily be changed to be 0 - 15.

    As usual, excellent work, adios.

  7. #7
    Idler. Chazzy's Avatar
    Join Date
    Jan 2004
    Location
    Uk
    Posts
    336
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really really really shouldnt be doing this course with all this damn coding .

    Thanks for the clarification Mike and indeed, I just read the solution to another javascript problem i had and it was Adios who helped me (can we give him a cookie or something?)

  8. #8
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mike (as usual). Actually...I just ripped that script from another one which stored the serialized index array in the window.name property to preserve the sequence. Not really needed here so, tossed it and came up with this, visibly faster, avoids ids completely. Just add urls & stir.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Random Pix</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    body   {
            background: #eca;
           }
    table  {
            margin: 100px auto 0 auto;
            border: 8px #900 dashed;
            padding: 2px;
            background: #fa8;
            cursor: crosshair;
            }
    td      {
            margin: 0;
            border: 1px #000 solid;
            }
    .random {
             border-width: 0;
    	 cursor: crosshair;
            }
    
    
    </style>
    <script type="text/javascript">
    
    var allpix = document.getElementsByTagName('IMG');
    
    var pix = [ 
    		'http://www.SitePoint.com/graphics/v2/heads/default3.jpg' , 
    		'http://www.SitePoint.com/graphics/author_andrew.jpg' , 
    		'http://www.SitePoint.com/graphics/nigel.jpg' , 
    		'http://www.SitePoint.com/graphics/author_ivan.jpg' ,
    		'http://www.SitePoint.com/graphics/mike.jpg' , 
    		'http://www.SitePoint.com/graphics/1kev.jpg' , 
    		'http://www.SitePoint.com/graphics/author_josh.jpg' ,
    		'http://www.SitePoint.com/graphics/1danielk.jpg' , 
    		'http://www.SitePoint.com/graphics/patrick.jpg' ,
    		'http://www.sitepoint.com/graphics/author_dennispallett.jpg'
               ];
    
    onload = function()
    {
    	var pic, i = 0;
    	while (pic = allpix.item(i++))
    		if (pic.className == 'random' && pix.length > 0)
    			pic.src = pix.splice(Math.floor(Math.random() * pix.length), 1);
    }
    
    </script>
    </head>
    <body>
    <table onclick="self.location.reload()">
      <tr> 
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
      </tr><tr>
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
        <td width="56" height="67"><img class="random" src="http://www.grsites.com/textures/misc/misc092.jpg" width="56" height="67" /></td>
      </tr>
    </table>
    <div style="text-align:center;font:600 12px monospace;">click it</div>
    </body>
    </html>
    
    ::: certified wild guess :::


Bookmarks

Posting Permissions

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