responsive
1.2.5

Timer

Table of contents:

A few words about timer

jAccordion offers auto rotation of slides using options autoplay and autoplayInterval so it's only logical there is a way to visualize progress of this functionality. jAccordion offers set of callbacks which let you control behaviour of any type of timer you can imagine, classic line timers, text timers, circular timer or combination of these.

Note: .css files of most demos don't contain rule for timer so you need to copy/paste it to your .css file from source files of one of demos below.

Note #2: CSS rule .timer {} is placed in section Custom elements in CSS file.

Classic full width line timer

  • Source files of this demo are located in: Examples\TimerDemo1

Demonstration of timer displayed in the bottom of active slide. Width of timer grows until it has the same width as active slide.

Note: You can easily change position of timer via .css. You can also change direction of timer (i.e. from right to left) via .css. You can tweak code below to create vertical timer.

Loading content...
slide1
slide2
slide3
slide4
slide5

Code below is a configuration section of jAccordion and is placed between tags <head></head> as mentioned in jAccordion activation. Even though it may seem a bit complicated there is really no need to be confused, let me explain it in a few steps:

  • Line 7: Timer is placed into every slide as soon as preloading process is finished.
  • Line 10: When slide is about to close animation of timer stops and timer fades out in 200ms.
  • Line 13: When slide is completely open it's necessary to set timer to starting state, i.e. set width to 0 and opacity to 0.5.
  • Lines 17 - 19: When slide is completely open and autoplay is not paused (option pauseOnHover is enabled but cursor is not over jAccordion or option pauseOnHover is disabled), animation of timer starts. You can see there is a value 5000, which is duration of animation of timer. This value has to be equal to option autoplayInterval (line 4).
  • Line 23: Animation of timer is stopped when cursor enters jAccordion (option pauseOnHover has to be enabled otherwise callback function onPause() is not executed).
  • Lines 32 - 34: Animation of timer is resumed when cursor leaves jAccordion and no slide is animated. Remaining time of animation is gained from attribute remainingTime, you can read more about it in documentation page of callback function onResume().

Configuration section of the demo above:

<script type="text/javascript">
	$('.accordion').jAccordion({
		autoplay : true,
		autoplayInterval : 5000,
		ready : function() {
			$('.preloader', this.$accordion).remove();		//Comment this line to see the preloader if testing locally.
			$('.jAccordion-slideWrapper', this.$accordion).append('<div class="timer"></div>');	//Include timer inside every slide
		},
		onSlideStartClosing: function(e) {
			$('.timer', e.$slide).stop(true).fadeTo(200, 0);	//Fade out timer of closing slide
		},
		onSlideOpened: function(e) {
			$('.timer', e.$slide).css({width : 0, 'opacity' : 0.5}).stop(true);		//Set timer to starting state
			/* If option 'pauseOnHover' is enabled and cursor is not over accordion start timer of active slide
			 * or option 'pauseOnHover' is disabled.
			 * Note: Value 5000 has to be same as value of option 'autoplayInterval' (line 4)
			 */
			if (!this.isPaused()) {
				$('.timer', e.$slide).animate({width : '100%'}, 5000, 'linear');
			}
		},
		onPause : function() {
			$('.timer', this.getActiveSlide()).stop(true);	//Pause animation of timer
		},
		onResume : function(e) {
			/* Resume animation of timer.
			 * Note: It's necessary to resume the animation only if no slide is animated, imagine this situation:
			 * User moves his cursor over non-open slide - cursor is over accordion so autoplay pauses and then user
			 * moves his cursor off accordion before the opening slide is fully open so autoplay starts and onResume()
			 * callback is executed and animation of timer starts, which is too early because opening slide is not fully open.
			 */
			if (!this.isAnimated()) {
				$('.timer', this.getActiveSlide()).stop(true).animate({'width' : '100%'}, e.remainingTime, 'linear');
			}
		}
	});
</script>

Line timer with text based % indicator

  • Source files of this demo are located in: Examples\TimerDemo2

Demonstration of timer displayed inside active slide. Width of timer grows until it has the same width as active slide. Caption indicating percents of passed time moves along the line.

Note: You can easily change position of timer via .css. You can also change direction of timer (i.e. from right to left) via .css. You can tweak code below to achieve vertical timer.

Loading content...
slide1
slide2
slide3
slide4
slide5

Code below is a configuration section of jAccordion and is placed between tags <head></head> as mentioned in jAccordion activation. Configuration of this type of timer is basically same as the previous one:

  • Line 7: Timer is placed into every slide as soon as preloading process is finished.
  • Line 10: When slide is about to close animation of timer stops and timer fades out in 200ms.
  • Line 13: When slide is completely open it's necessary to set timer to starting state, i.e. set width to 0 and opacity to 0.5.
  • Lines 20 - 28: When slide is completely open and autoplay is not paused (option pauseOnHover is enabled but cursor is not over jAccordion or option pauseOnHover is disabled), animation of timer starts. You can see there is a value 5000, which is duration of animation of timer. This value has to be equal to option autoplayInterval (line 4). Callback function step is also used to update text based % indicator. Object fx and its attribute pos are used to gain amount of passed time in percents.
  • Line 31: Animation of timer is stopped when cursor enters jAccordion (option pauseOnHover has to be enabled otherwise callback function onPause() is not executed).
  • Lines 43- 51: Animation of timer is resumed when cursor leaves jAccordion and no slide is animated. Remaining time of animation is gained from attribute remainingTime, you can read more about it in documentation page of callback function onResume(). Callback function step is also used to update text based % indicator. Object fx and its attributes now and end are used to gain amount of passed time in percents.

Configuration section of the demo above:

<script type="text/javascript">
	$('.accordion').jAccordion({
		autoplay : true,
		autoplayInterval : 5000,
		ready : function() {
			$('.preloader', this.$accordion).remove();		//Comment this line to see the preloader if testing locally.
			$('.jAccordion-slideWrapper', this.$accordion).append('<div class="timer"></div>');	//Include timer inside every slide
		},
		onSlideStartClosing: function(e) {
			$('.timer', e.$slide).stop(true).fadeTo(200, 0);	//Fade out timer of closing slide
		},
		onSlideOpened: function(e) {
			$('.timer', e.$slide).css({width : 0, 'opacity' : 1}).stop(true);		//Set timer to starting state
			/* If option 'pauseOnHover' is enabled and cursor is not over accordion start timer of active slide
			 * or option 'pauseOnHover' is disabled.
			 * We can use object fx of function step() which provides lots of useful attributes. Attribute pos
			 * stores completness of animation (it's actually number in interval (0, 1).
			 * Note: Value of attribute duration has to be same as value of option 'autoplayInterval' which is set a few lines above.
			 */
			if (!this.isPaused()) {
				$('.timer', e.$slide).animate({width : '100%'}, {
					duration: 5000, 
					easing: 'linear',
					step: function(now, fx) {
						$(this).html(Math.floor(fx.pos * 100) + '%<div class="innerLine"></div>');
					}
				});
			}
		},
		onPause : function() {
			$('.timer', this.getActiveSlide()).stop(true);	//Pause animation of timer
		},
		onResume : function(e) {
			/* Resume animation of timer.
			 * We cannot use fx.pos in this case because timer doesn't start from 0.
			 * Nevertheless we can use fx.now - current value of animated property and fx.end - final value
			 * of animated property.
			 * Note: It's necessary to resume the animation only if no slide is animated, imagine this situation:
			 * User moves his cursor over non-open slide - cursor is over accordion so autoplay pauses and then user
			 * moves his cursor off accordion before the opening slide is fully open so autoplay starts and onResume()
			 * callback is executed and animation of timer starts, which is too early because opening slide is not fully open.
			 */
			if (!this.isAnimated()) {
				$('.timer', this.getActiveSlide()).stop(true).animate({'width' : '100%'}, {
					duration: e.remainingTime,
					easing: 'linear',
					step : function(now, fx) {
						$(this).html(Math.floor(fx.now / fx.end * 100) + '%<div class="innerLine"></div>');
					}
				});
			}
		}
	});
</script>

Line timer inside control panel

  • Source files of this demo are located in: Examples\TimerDemo3

Demonstration of timer displayed inside control panel of jAccordion.

Loading content...
slide1
slide2
slide3
slide4
slide5

Code below is a configuration section of jAccordion and is placed between tags <head></head> as mentioned in jAccordion activation. Configuration of this type of timer is probably easiest:

  • Line 9: Control panel fades in after preloading process is finished.
  • Line 10: When slide is about to close animation of timer stops and timer is set to starting state, i.e. width is set to 0.
  • Lines 19 - 21: When slide is completely open and autoplay is not paused (option pauseOnHover is enabled but cursor is not over jAccordion or option pauseOnHover is disabled), animation of timer starts. You can see there is a value 5000, which is duration of animation of timer. This value has to be equal to option autoplayInterval (line 6).
  • Line 24: Animation of timer is stopped when cursor enters jAccordion (option pauseOnHover has to be enabled otherwise callback function onPause() is not executed). Timer alse fades out a bit to indicate that it's paused.
  • Lines 33 - 35: Animation of timer is resumed when cursor leaves jAccordion and no slide is animated. Remaining time of animation is gained from attribute remainingTime, you can read more about it in documentation page of callback function onResume().

Configuration section of the demo above:

<script type="text/javascript">
	$('.accordion').jAccordion({
		nextBtn : $('.nextBtn'),
		prevBtn : $('.prevBtn'),
		autoplay : true,
		autoplayInterval : 5000,
		ready : function() {
			$('.preloader', this.$accordion).remove();		//Comment this line to see the preloader if testing locally.
			$('.controlPanel', this.$accordion).animate({top : 0}, 500);
		},
		onSlideStartClosing: function(e) {
			$('.timer', this.$accordion).css('width', 0).stop(true);	//Set timer to starting state
		},
		onSlideOpened: function(e) {
			/* If option 'pauseOnHover' is enabled and cursor is not over accordion start timer of active slide
			 * or option 'pauseOnHover' is disabled.
			 * Note: Value 5000 has to be same as value of option 'autoplayInterval' which is set a few lines above.
			 */
			if (!this.isPaused()) {
				$('.timer', this.$accordion).css('opacity', '').animate({width : 100}, 5000, 'linear');
			}
		},
		onPause : function() {
			$('.timer', this.$accordion).stop(true).fadeTo(200, 0.5);	//Pause animation of timer and fade out a bit
		},
		onResume : function(e) {
			/* Resume animation of timer an remove opacity.
			 * Note: It's necessary to resume the animation only if no slide is animated, imagine this situation:
			 * User moves his cursor over non-open slide - cursor is over accordion so autoplay pauses and then user
			 * moves his cursor off accordion before the opening slide is fully open so autoplay starts and onResume()
			 * callback is executed and animation of timer starts, which is too early because opening slide is not fully open.
			 */
			if (!this.isAnimated()) {
				$('.timer', this.$accordion).stop(true).css('opacity', '').animate({width : 100}, e.remainingTime, 'linear');
			}
		}
	});
</script>

Circular timer

You can find a few jQuery circular timers with great API on the web. Integration of these is almost the same as shown in previous demos. I recomend timers created by blakek.us and oneorangesoftware.com. I'm not sure about their licences that's why there is no demo.

jAccordion by maniacpc, exclusively for CodeCanyon