The setTimeout() method
The use of the setTimeout and clearTimeout methods are key to the operation of my slideshow.
The order in which methods are called are also critical for the slideshow to work as it should. A case in point is my plusSlides() method which controls the "stepping" through slides in a slideshow. This and the Pause control use the stop() method and the pause button on the overlay menu has its text updated by the method.
In hindsight I don't see why the Previous control does not work but I have been in a few circles with this one and I was not aware that the order mattered as much.
The carousel() function needs to be called before the stop() method and THEN the text on the button is updated.
The code is very easily broken and the template was not updated in step with the most recent church page.
The pause button, the stop() method, uses the clearTimeout() method to reset the setTimeout() that was assigned when the page is loaded.
The Script for stop():
<script>
//var myTimeout=setTimeout(carousel, y); - This variable is added to the main loop
function stop(){
clearTimeout(myTimeout);
output.innerHTML = "Paused";
}
The W3C explaination of the variable myTimeout is "the id returned by the setTimeout() method". It is not known what data type it is.
Possible enhancements
Using the methods developed for the slideshow I can enhance the control bar:
Looking in the W3 reference I see that there is also a W3-slideshow() method. I will have to check this out.
The goal here is to hide and display controls depending on what state the slideshow it in.
I have seemed to fix the coding of the Previous button by moving it to the plusSlides() method function. I will have to add this to the template when I get the hide/display working properly.
The logic:
- The "Next" and "Previous" should be initially hidden and display when the slideshow is paused
- The "Pause" button should be hidden when the slideshow is paused.
- The "Resume" button should be hidden if the slideshow is running automatically.
- The "Faster" and "Slower" buttons can be hidden when the slideshow is paused.
Timed Alert
The setTimeout() method should be able to be used in a timed alert(). I wanted to do this but only found a Bootstrap solution. This was okay but appeared to intrduce a lot of overhead.
This is an Alert
I should be able to close this programmatically
Not working at the moment
The code from the W3C site works when added to the onclick() event:
onclick="this.parentElement.style.display='none'"
Perhaps this is because it is a W3.css button class?
The develoment of this continues on my Parish Council server. The work on a timed alert has been added to the experimental page.