responsive
1.2.6

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 events 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 themes 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

  • HTML
  • JS
  • CSS
<div class="accordion noJS">
	<div class="preloader">Loading content...</div>
	<div class="jAccordion-slidesWrapper">
		<div class="jAccordion-slide"><img src="images/banner1.png" width="910" height="380" alt="slide1" /></div>
		<div class="jAccordion-slide"><img src="images/banner2.png" width="910" height="380" alt="slide2" /></div>
		<div class="jAccordion-slide"><img src="images/banner5.png" width="910" height="380" alt="slide3" /></div>
		<div class="jAccordion-slide"><img src="images/banner3.png" width="910" height="380" alt="slide4" /></div>
		<div class="jAccordion-slide"><img src="images/banner4.png" width="910" height="380" alt="slide5" /></div>
	</div>
</div>

jQuery(document).ready(function( $ ) {
	$('.accordion').jAccordion({
		autoplay : true,
		autoplayInterval : 5000,
		onReady : 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' which is set a few lines above.
			 */
			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 event onResume
			 * is triggered 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');
			}
		}
	});
});

.accordion .timer {
	background: #000;
	bottom: 0;
	height: 3px;
	left: 0;
	position: absolute;
	width: 0;
	z-index: 9999;
}

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

Line timer with text based % indicator

  • HTML
  • JS
  • CSS
<div class="accordion noJS">
	<div class="preloader">Loading content...</div>
	<div class="jAccordion-slidesWrapper">
		<div class="jAccordion-slide"><img src="images/banner1.png" width="910" height="380" alt="slide1" /></div>
		<div class="jAccordion-slide"><img src="images/banner2.png" width="910" height="380" alt="slide2" /></div>
		<div class="jAccordion-slide"><img src="images/banner5.png" width="910" height="380" alt="slide3" /></div>
		<div class="jAccordion-slide"><img src="images/banner3.png" width="910" height="380" alt="slide4" /></div>
		<div class="jAccordion-slide"><img src="images/banner4.png" width="910" height="380" alt="slide5" /></div>
	</div>
</div>

jQuery(document).ready(function( $ ) {
	$('.accordion').jAccordion({
		autoplay : true,
		autoplayInterval : 5000,
		onReady : 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 event onResume
			 * is triggered 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>');
					}
				});
			}
		}
	});
});

.accordion .timer {
	bottom: 0;
	color: #000;
	font: normal 12px Arial, Helvetica, sans-serif;
	left: 0;
	position: absolute;
	text-align: right;
	width: 0;
	z-index: 9999;
}

.accordion .timer .innerLine {
	background-color: #000;
	height: 3px;
	width: 100%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";	/* IE 8 */
	filter: alpha(opacity=50);	/* IE 5-7 */
	-moz-opacity: 0.5;			/* FF3.5+ */
	-khtml-opacity: 0.5;		/* Safari 1.x */
	opacity: 0.5;				/* Chrome 4+, Firefox 2+, Safari 3.1+, Opera 9+, IE9+, iOS 3.2+, Android 2.1+ */
}

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

Line timer inside control panel

  • HTML
  • JS
  • CSS
<div class="accordion noJS">
	<div class="preloader">Loading content...</div>
	<div class="jAccordion-slidesWrapper">
		<div class="controlPanel">
			<div class="prevBtn"></div>
			<div class="timer"></div>
			<div class="nextBtn"></div>
		</div>
		<div class="jAccordion-slide"><img src="images/banner1.png" width="910" height="380" alt="slide1" /></div>
		<div class="jAccordion-slide"><img src="images/banner2.png" width="910" height="380" alt="slide2" /></div>
		<div class="jAccordion-slide"><img src="images/banner5.png" width="910" height="380" alt="slide3" /></div>
		<div class="jAccordion-slide"><img src="images/banner3.png" width="910" height="380" alt="slide4" /></div>
		<div class="jAccordion-slide"><img src="images/banner4.png" width="910" height="380" alt="slide5" /></div>
	</div>
</div>

jQuery(document).ready(function( $ ) {
	$('.accordion').jAccordion({
		nextBtn : $('.nextBtn'),
		prevBtn : $('.prevBtn'),
		autoplay : true,
		autoplayInterval : 5000,
		onReady : 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 and 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 event onResume
			 * is triggered 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');
			}
		}
	});
});

.accordion#demo3 .controlPanel {
	background: url(../images/controlPanel_background.png) no-repeat left top;
	height: 45px;
	left: 38%;
	position: absolute;
	top: -45px;
	width: 214px;
	z-index: 9999;
}

.accordion#demo3 .controlPanel .prevBtn {
	background: url(../images/prevBtn_background.png) no-repeat 29px 10px;
	float: left;
	height: 35px;
	width: 46px;
}

.accordion#demo3 .controlPanel .prevBtn:hover { background: url(../images/prevBtn_hover_background.png) no-repeat left top }

.accordion#demo3 .controlPanel .nextBtn {
	background: url(../images/nextBtn_background.png) no-repeat 9px 10px;
	float: right;
	height: 35px;
	width: 46px;
}

.accordion#demo3 .controlPanel .nextBtn:hover { background: url(../images/nextBtn_hover_background.png) no-repeat left top }

.accordion#demo3 .timer {
	background: url(../images/timer.png) repeat-x top left;
	float: left;
	height: 3px;
	margin: 13px 0 0 11px;
	width: 0;
}

Demonstration of timer displayed inside control panel of jAccordion.

Loading content...
slide1
slide2
slide3
slide4
slide5

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 recommend 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