jQuery toggleClass example

Toggle class name on click in jQuery

by hmdadou

HTML

<div class="timer-container">
<div class="timer">

</div>
</div>

CSS

/***********   timerS    **********/
.timer-container {
	position:absolute;
	width:105px;
	top:-175px;
	height:135px;
	z-index:4;
	background-color:transparent !important;
}

.timer {
	position:absolute;
	top:6px;
	left:1px;
	z-index:10;
	background-color:transparent !important;	
}

div.hightimer-back {
	position:absolute;
	top:19px;
	width:105px;
	height:85px;
	background: transparent url(/images/stopwatch-atlas.png) 0 -200px no-repeat;
    zoom: 1;	
	z-index:5;		
}



.hightimer-frame {
	position:absolute;
	width:105px;
	height:115px;
	left:0;
	top:0;
	background: url(/images/stopwatch-atlas.png) 0 0 no-repeat;
	background-color:transparent !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;	
	z-index:15;		
	pointer-events:none;
}

div.hightimer-title {
	position:absolute;
	width:100%;
	padding-left:5px;
	left:0;
	top:110px;
	z-index:100;
	text-align:center;
	zoom:1;
}

JavaScript

Skip to content
Search or jump to…
Pull requests
Issues
Codespaces
Marketplace
Explore
 
@hmdadou 
slross16
/
jquery.hightimer
Public
Fork your own copy of slross16/jquery.hightimer
Code
Issues
Pull requests
Actions
Projects
Wiki
Security
Insights
jquery.hightimer/hightimer.js /
@slross16
slross16 init with previous work
Latest commit 889d951 on May 20, 2013
 History
 1 contributor
273 lines (243 sloc)  7.85 KB

// Hard dependancy on Highcharts.js
(function($) {
	$.fn.hightimer = function( options ) {
		var defaults = {
			title: 'hightimer',		// timer title
			prefix: 'hightimer', 	// DOM prefix
			totalTime: 60*60, 		// seconds
			initTime: 0,			// date TODO: seconds
			tickInterval: 15,
			maxTick: 60,
			dynamicBack: false,
			labelFormatter: function() { return this.value },
			enabled: true,
			hidden: true,
			hideTime: 4.5*60*60
		}

		var settings = $.extend({}, defaults, options);

		// public
		this.updateTime = function(deltaSeconds) {
			settings.initTime = new Date(settings.initTime.getTime() + (deltaSeconds*1000));
		}

		this.setInitTime = function(time) {
			settings.initTime = time;
		}

		this.hideTimer = function() {
				this.delay(1000).animate({'top': "-175px"}, 400, "easeOutCubic", function(){}); 
				settings.hidden = true;
			}

		this.showTimer = function() {
				this.delay(1000).animate({'top': "-15px"}, 400, "easeOutCubic", function(){});
				settings.hidden = false;
			}

		return this.each( function() {

			// private 
			var $this = $(this),
				now = getNow(),
				data = {};

			$this.html("<div class='hightimer-back'></div><div id='" + settings.prefix + "-timer' class='hightimer'></div><div class='hightimer-frame'></div><div class='hightimer-title'>"+settings.title+"</div>");
		
			// Set the chart's data object which will show initial time
			if (settings.totalTime > 3600) {
				data = { id: 'hour', y: now.hours };
				if (now.hours > settings.totalTime/3600) {
					data.y = settings.totalTime/3600;
				}
			} else {
				data =...