Javascript timer

Question

I have a set of objects and each those object keep track of some strings. Those objects are created at page load and stored in an object array. I have four user controls in ascx file that displays those strings of a particular object at a time.

And also I have a play button in the same ascx file which is default set to play. When I load the ascx it displays the first set of strings in a particular object. And after 5 second time interval iy should display the second set of strings in the next object. When the play button pushed, it should move into pause state also.

Can anybody give me a start to achieve this requirement. my code behind file is C#

Answer 1

Just realised you might want to achieve this via front-end JavaScript as per your question title? In which case, you will need the setInterval function, and your array of data available in the DOM.

Suppose your button is

<asp:ImageButton src="source.jpg" class="btnPlay" alt="Play" />

Your JavaScript (using jQuery) could be along the lines of:

$(function() {
    $('.btnPlay').click(function() {
         $(this).toggleClass('btnPause');
         if($(this).hasClass('btnPause') {
               yourHandlerID = setInterval ("yourHandler()", 5000 );
         } else {
                clearInterval (yourHandlerID);
         }
    });
}); 

You can also do this via C# code behind using the timer class, example like: http://www.csharphelp.com/2006/02/c-timer-demo/

And everytime the timer triggers the event handler you define, you can reiterate through your array, display what you want.

The toggle pause button would be just stopping the timer.

Microsoft reference: http://msdn.microsoft.com/en-us/library/system.timers.timer(VS.71).aspx

Answer 2

Fundamentally, you want a 'Slideshow' of your ASCX controls. A common way to do this is by having all your ASCX's visible and then use Javascript and CSS to make one visible at a time.

Google for 'html css javascript slideshow'.

http://www.catswhocode.com/blog/top-10-javascript-slideshows-carousels-and-sliders