How to SetTimeout to go back to the first div? [closed]

I have three divs on one page, the first div is an html5 video, the second div contains buttons, and third is a thank you page and it goes back to the beginning, so it goes like a photo-slide. Here is my code and function – http://jsfiddle.net/EXfnN/14/

I set 3 seconds on the second div, so if the buttons/a tag is not clicked in 3 secs, it goes to the third div automatically.

I’ve got three questions on this function:

1. how can I set the second div to go back to the beginning/first div instead of third div when no button is clicked?
2. Everytime when you click on a button on the second div/page, an email is sent to the appropriate email address. My problem is that when no button is clicked for three secs and the auto slide function is taken place, the email is still getting sent. How can I stop the email is getting sent when no button is clicked and the auto slide is happening? (Please note I would prefer to keep the li and a tag structure in html, cos the button active effect)
3. for the third div-the thank you page, can I change the a tag for to a div, so people can’t click on it? If so how can I target it?

Any code/suggestion is appreciated.

Answer

To fix #1 you are going to need to change the setTimeout function when you are on item2. See http://jsfiddle.net/EXfnN/15/

For #2, I tried getting the email functions to trigger on timeout, but couldn’t see it working. If you still see the problem, try moving away from the onClick attributes and trigger those from javascript as well. ie:

$('#abc').click(function(){abcSubmit();});

This should make them only trigger when they are actually clicked and therefore get around your issue.

If I understand your #3 question correctly, you can just do this:

Change:

<div id="item3" class="item">
      <div class="content">
           <a href="#item1" class="panel"><img src="images/thankyou.jpg" alt="Thank you" /></a>
      </div>
</div>

To:

<div id="item3" class="item">
     <img src="images/thankyou.jpg" alt="Thank you" />
</div>

And then just trigger the click action in your script with:

$('#item3').click(function(){//your action here});

The only downside is that without javascript, your users won’t be able to do anything. They also won’t get past the first slide though so that’s kind of irrelevant!