26 Random Images ( setting unique left and right co-ordinates)

[RSith]

1) Script Title: Random Content ORder

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ntentorder.htm


Hi...

The above script is similiar to something I would like to be able to do... which I'll describe:

a) I have 26 unique pieces of content. These could be either images, or text.
b) I would like to display each one randomly within a certain area of the screen. Imagine a scattering of 26 Scrabble tiles (ie http://www.skybluepink.com/images/tiles.jpg )
c) The 26 items need to be linkable. Each item will have a unique link.
d) They can not be hidden completely behind each other. They can overlap.
e) A nice-have, but not required feature would be to allow the items to be dragable.

I've modified it a bit to include some Javascript to generate the 26 unique pieces of content. However, I'm running into some difficulties ensuring the Top and Left are not completely overlapping. Sometimes it works ok, sometimes I get a IE message saying the script is running too slow. Can anyone suggest a better implementation ?

Thanks,

My modified code is below...

<style type="text/css">
.group1{
visibility: hidden;
position: absolute;
}
</style>

<script type="text/javascript">

/***********************************************
* Random Content Order script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var letters = new Array ;


function randomizeContent(classname)
{
var contents=randomizeContent.collectElementbyClass(classname)
var left;
var top;

for ( var i =0 ; i<26; i++ )
{

letters[ i ] = new Array ( ) ;

letters[i][0] = 0; /* left */
letters[i][1] = 0; /* top */
}

contents.text.sort(function() {return 0.5 - Math.random();})

for (var i=0; i<contents.ref.length; i++)
{
var uniquetest = 1;
while ( uniquetest )
{
left = Math.floor(Math.random()*300)
top = Math.floor(Math.random()*300)
uniquetest = check_letters ( left, top )
}
letters[i][0] = left
letters[i][1] = top
contents.ref[i].innerHTML="<img src='' height=50 width=50 alt='"+i+"'>" /*contents.text[i] */
contents.ref[i].style.visibility="visible"
contents.ref[i].style.left=left
contents.ref[i].style.top=top
}
}

function check_letters ( tleft, ttop )
{

for (var i=0; i<25; i++)
{

if ( ( letters[i][0] >= tleft & letters[i][0] <= tleft + 25 ) | ( letters[i][1] >= ttop & letters[i][1] <= ttop + 35 ))
{
return 1;
}
}
return 0
}

randomizeContent.collectElementbyClass=function(classname){ //return two arrays containing elements with specified classname, plus their innerHTML content
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
var contentobj=new Object()
contentobj.ref=new Array() //array containing references to the participating contents
contentobj.text=new Array() //array containing participating contents' contents (innerHTML property)
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1){
contentobj.ref[contentobj.ref.length]=alltags[i]
contentobj.text[contentobj.text.length]=alltags[i].innerHTML
}
}
return contentobj
}

</script>


<div class="group1">1</div>
<div class="group1">2</div>
<div class="group1">3</div>
<div class="group1">4</div>
<div class="group1">5</div>
<div class="group1">6</div>
<div class="group1">7</div>
<div class="group1">8</div>
<div class="group1">9</div>
<div class="group1">10</div>
<div class="group1">12</div>
<div class="group1">13</div>
<div class="group1">14</div>
<div class="group1">15</div>
<div class="group1">16</div>
<div class="group1">17</div>
<div class="group1">18</div>
<div class="group1">19</div>
<div class="group1">20</div>
<div class="group1">21</div>
<div class="group1">22</div>
<div class="group1">23</div>
<div class="group1">24</div>
<div class="group1">25</div>
<div class="group1">26</div>

<script type="text/javascript">

randomizeContent("group1")

</script>

[Twey]

I haven't time to write this for you at the moment, but you may find my Oblong object helpful, especially its .collides() method.