How to set setTimeout/delay on a div (slideshow) and Kiosk data questions

Question

I'm trying to create a html5 and javascript based welcome display/kiosk for a building entrance. The project would include:

1. A movie play constantly on the digital display until some visitors touch the screen (html5)

2. A couple of buttons with department names show up for visitors to choose who they are here to see

3. After one button is touched, an email is sent to the department

4. Thank you page shows up for a short period, and the site will go back to the number 1) automatically

My questions are: (Any part of the questions answered is appreciated.)

Javascript/Jquery question:

1. I thought to make this whole process on one page using jquery slider and put each step above in a div. Something like the horizontal one in http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery How can I make the last div to show 5 secs and then automatically go back to the first div? Any code or tutorial on this would be great help.

Data questions:

1. The kiosk machine's data space is limited, is there any way to make the same movie not load again but just play after the thank you page? So it doesn't use up all the space?

2. If I use a Jquery slider to make the whole process to be only one page, so the movie will be hidden but still playing while other part/div of the page is showing. Would this save the data issue above?

Any code/direction is appreciated. Thanks very much for your time.

Sam:)

Answer 1

You seem to be on the right track with algorithm. Check out this fiddle for a working demo of what you might try.

As for your data questions, you've answered question 1 with question 2. Having everything on one page will keep the movie in memory. As long as you just hide the player and don't destroy it, you won't have to reload the movie.

Let me know if this helps you!