SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: SetTimeOut()

Hybrid View

  1. #1
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    960
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Talking SetTimeOut()

    Hai all,

    i am not a JS programmer. i have never type JS on to website. but i know without JS not web.

    i have come a cross a situation where i have been force to usu JS.
    SO I Need your support.

    I need a simple slide show.

    i have a table with a cell. i have put a picture in it. i want to chage this picture every 3 secods with another picture.

    i came to know JS SetTimeOut(3) function can do this.
    so please in the below code where do i insert the JS SetTimeOut(3)

    Code:
    <table width="400" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="nature1.gif" width="256" height="256" /></td>
      </tr>
    </table>

  2. #2
    doRighteousDeeds++
    Join Date
    Aug 2006
    Location
    تركيا Turkey Türkiye
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    
    var arr = [ 
    '<img src="http://www.sitepoint.com/forums/image.php?u=169805&dateline=1174416181" width="256" height="256" />', 
    '<img src="http://www.sitepoint.com/forums/image.php?u=63920&dateline=1119178080" width="256" height="256" />', 
    '<img src="http://www.sitepoint.com/forums/image.php?u=36046&dateline=1092937354" width="256" height="256" />',
    '<img src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256" />'
    ]
    function afridy () {
    
    var el = document.getElementById('tdid');
    el.innerHTML = arr[Math.floor(Math.random()*arr.length)];
    setTimeout("afridy ()",3000);
    }
    // window.onload = afridy;
    </script>
    
    
    <table width="400" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td id="tdid" ><img src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256"  onclick="afridy ()" /></td>
      </tr>
    </table>
    Code:
      
    <script type="text/javascript">
    
    var arr = [ 
    '<img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=169805&dateline=1174416181" width="256" height="256" />', 
    '<img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=63920&dateline=1119178080" width="256" height="256" />', 
    '<img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=36046&dateline=1092937354" width="256" height="256" />',
    '<img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256" />'
    ]
    var i = 0;
    function afridy () {
    
    var el = document.getElementById('imgid');
    
    el.parentNode.innerHTML =  arr[i++] ;
    if(i == arr.length ) { i = 0; }
    
    setTimeout("afridy ()",3000);
    
    }
    // window.onload = afridy;
    </script>
    
    
    <table width="400" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256"    onclick="afridy ()"  /></td>
      </tr>
    </table>
    As Raffles said:
    Code:
      
    <script type="text/javascript">
    
    var arr = [ 
    'http://www.sitepoint.com/forums/image.php?u=169805&dateline=1174416181', 
    'http://www.sitepoint.com/forums/image.php?u=63920&dateline=1119178080', 
    'http://www.sitepoint.com/forums/image.php?u=36046&dateline=1092937354',
    'http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180'
    ]
    var i = 0;
    function afridy () {
    
    var el = document.getElementById('imgid');
    
    el.setAttribute('src', arr[i++]);
    
    if(i == arr.length ) { i = 0; }
    
    setTimeout("afridy ()",3000);
    
    }
    // window.onload = afridy;
    </script>
    
    
    <table width="400" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256"    onclick="afridy ()"  /></td>
      </tr>
    </table>
    Last edited by muazzez; Apr 9, 2007 at 21:03.

  3. #3
    SitePoint Guru afridy's Avatar
    Join Date
    Mar 2007
    Posts
    960
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Muaz.. Thanks. i ll check this.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Instead of using innerHTML you can just have the image URLs in the array (without the HTML) and then just set el.setAttribute('src', arr[i++]);

    Also, setInterval() seems better suited to this case.


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
  •