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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Random Image shuffle works perfectly, but.....

    I tested the script and it's perfect, only thing is I need the random images to load within a set table/cell. The " onload="ShufImages();" function needs to be confined within a set table/cell.

    I've tried placing the function in the header but it errors.

    Any help would be greatly appreciated.

    Thanks in advanced.

    Script in question:

    ----------------START

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    <head>
    <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--

    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=new Array('One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
    var RandomNu;
    var ImgCnt=1;

    function ShufImages(){
    RandomNu=Math.floor(Math.random()*(ImgAry.length-1));
    if (ImgAry[RandomNu]!='X'){
    document.getElementById('I'+ImgCnt).src=ImgPath+ImgAry[RandomNu];
    ImgAry[RandomNu]='X';
    ImgCnt++;
    }
    if (ImgCnt<ImgAry.length){ setTimeout('ShufImages()',10); }
    }

    //-->
    </script>

    </head>

    <body onload="ShufImages();" >
    <img id="I1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    <img id="I2" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    <img id="I3" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    <img id="I4" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    </body>

    </html>


    --------------------------END

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    This seems to work so I dont understand you problem

    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"


    <
    html

    <
    head
    <
    title></title
    <
    script language="JavaScript" type="text/javascript"
    <!-- 

    var 
    ImgPath='http://www.vicsjavascripts.org.uk/StdImages/'
    var 
    ImgAry=new Array('One.gif','Two.gif','Three.gif','Four.gif','Five.gif'); 
    var 
    RandomNu
    var 
    ImgCnt=1

    function 
    ShufImages(){ 
     while (
    ImgCnt<ImgAry.length){
      
    RandomNu=Math.floor(Math.random()*(ImgAry.length-1)); 
      if (
    ImgAry[RandomNu]!='X'){ 
       
    document.getElementById('I'+ImgCnt).src=ImgPath+ImgAry[RandomNu]; 
       
    ImgAry[RandomNu]='X'
       
    ImgCnt++; 
      } 
     }


    //--> 
    </script> 

    </head> 

    <body onload="ShufImages();" > 

    <table width="400" border="1" >
    <tr>
    <td>
    <img id="I1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100"> 
    </td>
    <td>
    <img id="I2" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100"> 
    </td>
    <td>
    <img id="I3" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100"> 
    </td>
    <td>
    <img id="I4" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100"> 
    </td>

    </body> 

    </html> 

  • #3
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Error: 'document.getElemenetById(...)' is null or not an object

    It works fine in a new document without any page elements, but when I add it to my existing page it gives an error:

    'document.getElemenetById(...)' is null or not an object

    Here's what I've modified/added to your original code:

    -----------------START------------------

    <script language="JavaScript" type="text/javascript">

    <!--
    onload="ShufImages();"
    var ImgPath='../../images/100x133/';
    var ImgAry=new Array('5001.jpg','5500_A.jpg','9404_A.jpg','20153.jpg','29001_B.jpg','29001_C.jpg');
    var RandomNu;
    var ImgCnt=1;

    function ShufImages(){
    RandomNu=Math.floor(Math.random()*(ImgAry.length-1));
    if (ImgAry[RandomNu]!='X'){
    document.getElementById('I'+ImgCnt).src=ImgPath+ImgAry[RandomNu];
    ImgAry[RandomNu]='X';
    ImgCnt++;
    }
    if (ImgCnt<ImgAry.length){ setTimeout('ShufImages()',10); }

    }

    //-->
    </script>


    ******onload function in body*******

    <body onload="ShufImages();" topmargin="0" leftmargin="20" link="#000000" vlink="#000000" alink="#000000" background="../../images/common/bkg_tile_3.gif">

    ******remaining script below********

    <td height="133">
    <img id="I1" src="../../images/100x133/" width="100" height="133"></td>

    <td height="133">
    <img id="I2" src="../../images/100x133/" width="100" height="133"></td>

    <td height="133">
    <img id="I3" src="../../images/100x133/" width="100" height="133"></td

    ----------------END------------------------

    I want to be able to shuffle 6+ images.

    Thanks!

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Ive done this with other elements on the page

    seems to work fine

    PHP Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
    <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    var 
    ShufImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var 
    ShufImgAry=new Array('One.gif','Two.gif','Three.gif','Tick1.gif','Four.gif','Five.gif');
    var 
    ShufRandomNu;
    var 
    ShufImgCnt=1;

    function 
    ShufImages(){
     while (
    ShufImgCnt<=ShufImgAry.length){
      
    ShufRandomNu=Math.floor(Math.random()*(ShufImgAry.length));
      if (
    ShufImgAry[ShufRandomNu]!='X'){
       
    document.getElementById('ShufI'+ShufImgCnt).src=ShufImgPath+ShufImgAry[ShufRandomNu];
       
    ShufImgAry[ShufRandomNu]='X';
       
    ShufImgCnt++;
      }
     }
    }

    //-->
    </script>

    </head>

    <body onload="ShufImages();" >

    <center>
    <table width="400" border="1" >
    <tr>
    <td>
    <img id="ShufI1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    </td>
    <td>
    <img id="ShufI2" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    </td>
    <td>
    <img id="ShufI3" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    </td>
    <td>
    <img id="ShufI4" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    </td>
    <td>
    <img id="ShufI5" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    </td>
    <td>
    <img id="ShufI6" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
    </td>
    </tr>
    </table>
    </center>

    <img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">
    <br>
    <table width="200" height="200" border="1">
      <tr>
        <td>.</td>
        <td>.</td>
      </tr>
      <tr>
        <td>.</td>
        <td>.</td>
      </tr>
    </table>
    </body>

    </html> 
    you will need to give me your full code if you still have problems


  •  

    Posting Permissions

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