Display random list items from another page - Page 2

Old Pedant · 01-30-2013, 11:22 PM

Oh, DOH. I should have read more carefully!

AndrewGSW · 01-30-2013, 11:49 PM

@rnd me

Quote:

when you append an element to the fragment, it disappears from the nodeList...

Isn't this only true if you actually append the fragment? I suppose I could build a test page

But, of course, there is not much point in building a fragment if we are not going to append it. Well, I suppose, there may be circumstances where we need to abandon the fragment.

Old Pedant · 01-30-2013, 11:52 PM

Here. Tested in Chome on http://localhost with cross browser scripting allowed. It works.

Code:

<!DOCTYPE html>
<Html>
<body>
<iframe id="fromHere" src="http://www.hse.gov.uk/horizons/sfreports.htm" 
 style="width: 100%; height: 200px; display: none;" onload="copyLIs(this)"></iframe>

<ul id="putItHere"></ul>

<script type="text/javascript">
function copyLIs(iframe)
{
      var items = ( iframe.contentWindow || iframe.contentDocument );
      if ( items.document ) items = items.document;
      items = items.getElementsByClassName("itemThumbBook")[0].getElementsByTagName("li");
      var newul = document.getElementById("putItHere");
      for ( var i = 0; i < 3; ++i )
      {
          newul.appendChild(items[Math.floor(Math.random() * items.length)]);
      }
}
</script>
</body>
</html>

Old Pedant · 01-30-2013, 11:57 PM

(I kept banging my head against the wall wondering why it didn't work until I removed the display: none from the <iframe> and realize that the iframe contents hadn't loaded yet! DOH!)

And while it won't work as coded in older MSIE, because they don't support getElementsByClassName, just add an id to the <ul> in the "sfreports.htm" page and use getElementById() and all is well.

That is, change

Code:

<ul class="itemThumbBook">

to (say)

Code:

<ul class="itemThumbBook" id="itemThumbBook">

and then change the line

Code:

      items = items.getElementsByClassName("itemThumbBook")[0].getElementsByTagName("li");

to

Code:

      items = items.getElemenById("itemThumbBook").getElementsByTagName("li");

snarf1974 · 02-05-2013, 03:06 PM

@Old Pedant, @sunfighter, @rnd me, @AndrewGSW - apologies for the late reply, I've been away on holiday in not so sunny (very snowy) Edinburgh!

@rnd me - Your Cross-origin resource sharing (CORS) solution was exactly what I was looking for, however, I have discovered that JAWS only reads the javascript generated list items, and not all list items on the page, so no need to dynamically pull in the 25 reports from another page. Many thanks for your suggestion again.

The following code is working pretty well, but occasionally it only displays 2 list items; it should display 3. I'm not sure, but maybe using a while loop until the number of ID randoms set to show is 3 might work... any ideas???

Code:

<script type="text/javascript">
this.randomtip = function(){
var length = $("#random li").length;
for($i = 0; $i < 3; $i++)
{
	var ran = Math.floor(Math.random()*length) + 1;
	$("#random li:nth-child(" + ran + ")").show();
}
};
$(document).ready(function(){
	randomtip();
});
</script>

The CSS:

Code:

#random li{
	display:none;
	}

If I can get this to work properly, we'd like to use it in our framework; the bonus would be if developers could choose the number of <li> so this can be used on various projects in the future.

As always, I am very grateful for any suggestions, and continue to be amazed by the generosity of everyone on this forum.

Many Thanks

snarf1974

Old Pedant · 02-05-2013, 08:15 PM

Well, I warned about only getting 2 different values (and it's even possible to get only 1).

There is nothing in that code that prevents the random number picker from picking the same number twice (or three times).

So maybe this:

Code:

<script type="text/javascript">
this.randomtip = function()
{
    var length = $("#random li").length;
    // create an array of numbers corresponding to the <li> elements (1 thru n)
    var i, picks = [];
    for ( i = 1; i <= length; ++i )
    {
        picks[i] = i;
    }
        
    for( i = 0; i < 3; ++i ) // 3 can instead be any number up to 25
    {
        // pick a number from the 1-25 array of numbers
	var pick = picks [ Math.floor(Math.random()*picks.length) ];
        // show that one
	$("#random li:nth-child(" + pick + ")").show();
        // remove that number from the list of numbers, so it can't be picked again!
        picks.splice( pick, 1 ); 
    }
};
$(document).ready(function(){
	randomtip();
});
</script>

snarf1974 · 02-06-2013, 11:26 AM

Thanks @Old Pedant, I'm still getting the odd time when 2 list items, and even just 1 list item are being displayed?!!?? :-/

Old Pedant · 02-06-2013, 11:54 PM

Whoops!

I forgot the picks[3] == 4, and so on!

Need to modify that!

Code:

    for ( i = 0; i < 25; ++i )
    {
        picks[i] = i+1;
    }
    for( i = 0; i < 3; ++i ) // 3 can instead be any number up to 25
    {
        // pick a number from the 1-25 array of numbers
	var pick = Math.floor(Math.random()*picks.length);
        // show that one
	$("#random li:nth-child(" + picks[pick] + ")").show();
        // remove that number from the list of numbers, so it can't be picked again!
        picks.splice( pick, 1 ); 
    }

Here's a simple test script that shows that the concept works:

Code:

<script type="text/javascript">
var i, picks = [ ];
for ( i = 0; i < 25; ++i )
{
    picks[i] = i+1;
}
for ( i = 0; i < 25; ++i )
{
    pick = Math.floor(Math.random()*picks.length);
    var pnum = picks[pick];
    picks.splice( pick, 1 );
    document.write( "element " + pick + " picked, has value " + pnum + " :: remaining: "  + picks + "<br/>");
}
    
</script>

Run that several times in succession. You will see that the *value* picked never repeats during a run, even when we pick all the available numbers.