7 Replies - 737 Views - Last Post: 30 July 2014 - 06:05 PM

#1 Quang Pham  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 74
  • Joined: 18-November 12

jQuery plugin World Timeclocks

Posted 25 July 2014 - 11:45 PM

Dear Fellow Programmers:
I'm trying to install a jQuery plugin World Timeclocks. I got it from a website: http://www.google.co...ajIICORLFglYgHw . I tried to add the .js lines and .css lines, but was unable to get the timeclocks. This is the code:
<!DOCTYPE html>

<html>

<head>

    <title>jClocksGMT</title>
    <meta charset-"UTF-8">
    
    <h1> World Timeclocks </h1>
    
    <link rel="stylesheet" href="css/jClocksGMT.css">

    
</head>

<script>
    
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jClocksGMT.js"></script>

$("#clock_dc").jClocksGMT({offset: '-6', analog: true, digital: true, hour24: false});


.clock_container {
    float:left;
    margin-right:2px;
    width:110px;
    position: relative;
}
.clock_container .lbl {
    font-size:10px;
    color: #333333;
    line-height: 22px;
    background: url(../images/clock_label.png);
    text-align: center;
    height: 27px;
    width: 108px;
    margin: 0 auto;
}
.clockHolder {
    width:100px; 
    margin:0 auto;
    position:relative;
}
.clock {
    margin-left:5px;
}

.sec {
    display:block;
    position:absolute;
}
.min {
    display:block;
    position:absolute;
}
.hour {
    display:block;
    position:absolute;
}

.rotatingWrapper {
    position:absolute;
    width:100px;
    height:100px;
    left: 5px;

}
.digital {
    font-weight:bold;
    font-size: 14px;
    color: #444444;
    text-align:center;
}

/********************************************************************************************************
 *
 * NAME: jClocksGMT
 * VERSION: 1.2
 * LAST UPDATE: 2014.03.12
 *
 * Change Log:
 *      1.2: Fixed severely flawed Daylight Saving Time calculation
 *      1.1: Added automatic Daylight Saving Time calculation
 *
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 * 
 * Author Information:
 *      Name: Richard McMaster
 *      Email: richard.mcmaster@live.com
 *      Location: Houston, Texas, United States
 *      Website: http://www.mcmastermind.com
 *
 * Plugin Website: http://www.github.com/mcmastermind/jClocksGMT
 *
 * Description:
 *      jQuery based analog and digital clock(s) using GMT offsets. Requires jQuery Rotate plugin.
 *
 * Credit Resources: 
 *      Article: "Convert the local time to another time zone with this Javascript"
 *      URL: http://www.techrepublic.com/article/convert-the-local-time-to-another-time-zone-with-this-javascript/6016329
 *      Author: Melonfire
 *      Date: 2006.03.01
 *
 *      Article: "Analog JQuery clock"
 *      URL: http://d-zig.com/Desc.aspx?item=74
 *      Author: Jim Rasmussen
 *      Date: circa 2011
 *
 *      Article: "Daylight Saving Time - Adding Methods to the Date Object"
 *      URL: http://javascript.about.com/library/bldst.htm
 *      Author: N/A
 *      Date: N/A
 *
 * Documentation:
 *      Default options:
 *          offset: '0',    // String: Set GMT offset (+5.5, -4, 0, etc)
 *          angleSec: 0,    // Integer: Starting angle of second hand
 *          angleMin: 0,    // Integer: Starting angle of minute hand
 *          angleHour: 0,   // Integer: Starting angle of hour hand
 *          hour24: false,  // Boolean: 24 hour clock or 12 hour clock
 *          digital: true,  // Boolean: Display digital clock
 *          analog: true    // Boolean: Display analog clock
 *
 *      Common offsets by time zone: (only use the number after GMT: GMT-2 = offset: '-2'
 *                                    Daylight Saving Time converted automatically)
 *          GMT-12	 Eniwetok
 *          GMT-11	 Samoa
 *          GMT-10	 Hawaii
 *          GMT-9	 Alaska
 *          GMT-8	 PST, Pacific US
 *          GMT-7	 MST, Mountain US
 *          GMT-6	 CST, Central US
 *          GMT-5	 EST, Eastern US
 *          GMT-4	 Atlantic, Canada
 *          GMT-3	 Brazilia, Buenos Aries
 *          GMT-2	 Mid-Atlantic
 *          GMT-1	 Cape Verdes
 *          GMT	0    Greenwich Mean Time, Dublin
 *          GMT+1	 Berlin, Rome
 *          GMT+2	 Israel, Cairo
 *          GMT+3	 Moscow, Kuwait
 *          GMT+4	 Abu Dhabi, Muscat
 *          GMT+5	 Islamabad, Karachi
 *          GMT+6	 Almaty, Dhaka
 *          GMT+7	 Bangkok, Jakarta
 *          GMT+8	 Hong Kong, Beijing
 *          GMT+9	 Tokyo, Osaka
 *          GMT+10	 Sydney, Melbourne, Guam
 *          GMT+11	 Magadan, Soloman Is.
 *          GMT+12	 Fiji, Wellington, Auckland
 *
 ********************************************************************************************************/

 (function($) {

    $.fn.extend({
        
        jClocksGMT: function(options) {
            
            var defaults = {
                offset: '0', // default gmt offset
                angleSec: 0,
                angleMin: 0,
                angleHour: 0,
                hour24: false,
                digital: true,
                analog: true
            }
            
            var options = $.extend(defaults, options);
            
            return this.each(function(){
                var offset = options.offset;
                var id = $(this).attr('id');
                
                // initial hand rotation
                $('#' + id + ' .sec').rotate(options.angleSec);
                $('#' + id + ' .min').rotate(options.angleMin);
                $('#' + id + ' .hour').rotate(options.angleHour);

                // check if daylight saving time is in effect
                Date.prototype.stdTimezoneOffset = function() {
                    var jan = new Date(this.getFullYear(), 0, 1);
                    var janUTC = jan.getTime() + (jan.getTimezoneOffset() * 60000);
                    var janOffset = new Date(janUTC + (3600000 * options.offset));
                    var jul = new Date(this.getFullYear(), 6, 1);
                    var julUTC = jul.getTime() + (jul.getTimezoneOffset() * 60000);
                    var julOffset = new Date(julUTC + (3600000 * options.offset));
                    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
                    //return Math.max(janOffset, julOffset);
                }
                Date.prototype.dst = function() {
                    if( parseFloat(options.offset) <= -4 && parseFloat(options.offset) >= -10 ) {
                        var dCheck = new Date;
                        var utcCheck = dCheck.getTime() + (dCheck.getTimezoneOffset() * 60000);
                        var newCheck = new Date(utcCheck + (3600000 * options.offset));
                        return this.getTimezoneOffset() < this.stdTimezoneOffset();
                        //return newCheck.getTimezoneOffset() < this.stdTimezoneOffset();
                    }
                }
                // create new date object
                var dateCheck = new Date;

                if( dateCheck.dst() ) {
                   offset = parseFloat(offset) + 1;
                };
                
                setInterval(function () {
                    // create new date object
                    var d = new Date;
                    // convert to msec
                    // add local time offset
                    // get UTC time in msec
                    var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
                    
                    /*if( d.dst() ) {
                        offset = offset + 1;
                    };*/
                    
                    // create new Date object for different city
                    // using supplied offset
                    var nd = new Date(utc + (3600000 * offset));
                    
                    // format numbers
                    var s = nd.getSeconds();
                    var m = nd.getMinutes();
                    var hh = nd.getHours();
                    var h = hh;
                    
                    // format for 12 hour
                    if(!options.hour24) {
                        var dd = "AM";
                        if( h >= 12) {
                            h = hh-12;
                            dd = "PM";
                        }
                        if( h == 0 ) {
                            h = 12;
                        }
                    }
                    
                    if(options.analog) {
                        // rotate second hand
                        options.angleSec = (nd.getSeconds() * 6);
                        $('#' + id + ' .sec').rotate(options.angleSec);
                        // rotate minute hand
                        options.angleMin = (nd.getMinutes() * 6);
                        $('#' + id + ' .min').rotate(options.angleMin);
                        // rotate hour hand
                        options.angleHour = ((nd.getHours() * 5 + nd.getMinutes() / 12) * 6);
                        $('#' + id + ' .hour').rotate(options.angleHour);
                    }
                    
                    // display digital clock if enabled
                    if(options.digital) {
                        $('#' + id + ' .digital .hr').html(h + ':');
                        $('#' + id + ' .digital .minute').html(m < 10 ? "0" + m : m);
                        if(!options.hour24) {
                            $('#' + id + ' .digital .period').html(dd);
                        }
                    }
                }, 1000);
            });
        }
    });
})(jQuery);


// VERSION: 2.2 LAST UPDATE: 13.03.2012
/* 
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 * 
 * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
 * Website: http://code.google.com/p/jqueryrotate/ 
 */

// Documentation removed from script file (was kinda useless and outdated)

(function($) {
var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
// Bad eval to preven google closure to remove it from code o_O
// After compresion replace it back to var IE = 'v' == '\v'
var IE = eval('"v"=="\v"');

jQuery.fn.extend({
    rotate:function(parameters)
    {
        if (this.length===0||typeof parameters=="undefined") return;
            if (typeof parameters=="number") parameters={angle:parameters};
        var returned=[];
        for (var i=0,i0=this.length;i<i0;i++)
            {
                var element=this.get(i);	
                if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {

                    var paramClone = $.extend(true, {}, parameters); 
                    var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;

                    returned.push($(newRotObject));
                }
                else {
                    element.Wilq32.PhotoEffect._handleRotation(parameters);
                }
            }
            return returned;
    },
    getRotateAngle: function(){
        var ret = [];
        for (var i=0,i0=this.length;i<i0;i++)
            {
                var element=this.get(i);	
                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
                    ret[i] = element.Wilq32.PhotoEffect._angle;
                }
            }
            return ret;
    },
    stopRotate: function(){
        for (var i=0,i0=this.length;i<i0;i++)
            {
                var element=this.get(i);	
                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
                    clearTimeout(element.Wilq32.PhotoEffect._timer);
                }
            }
    }
});

// Library agnostic interface

Wilq32=window.Wilq32||{};
Wilq32.PhotoEffect=(function(){

	if (supportedCSS) {
		return function(img,parameters){
			img.Wilq32 = {
				PhotoEffect: this
			};
            
            this._img = this._rootObj = this._eventObj = img;
            this._handleRotation(parameters);
		}
	} else {
		return function(img,parameters) {
			// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
            this._img = img;

			this._rootObj=document.createElement('span');
			this._rootObj.style.display="inline-block";
			this._rootObj.Wilq32 = 
				{
					PhotoEffect: this
				};
			img.parentNode.insertBefore(this._rootObj,img);
			
			if (img.complete) {
				this._Loader(parameters);
			} else {
				var self=this;
				// TODO: Remove jQuery dependency
				jQuery(this._img).bind("load", function()
				{
					self._Loader(parameters);
				});
			}
		}
	}
})();

Wilq32.PhotoEffect.prototype={
    _setupParameters : function (parameters){
		this._parameters = this._parameters || {};
        if (typeof this._angle !== "number") this._angle = 0 ;
        if (typeof parameters.angle==="number") this._angle = parameters.angle;
        this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle); 

        this._parameters.step = parameters.step || this._parameters.step || null;
		this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
		this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
        this._parameters.callback = parameters.callback || this._parameters.callback || function(){};
        if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind); 
	},
	_handleRotation : function(parameters){
          this._setupParameters(parameters);
          if (this._angle==this._parameters.animateTo) {
              this._rotate(this._angle);
          }
          else { 
              this._animateStart();          
          }
	},

	_BindEvents:function(events){
		if (events && this._eventObj) 
		{
            // Unbinding previous Events
            if (this._parameters.bind){
                var oldEvents = this._parameters.bind;
                for (var a in oldEvents) if (oldEvents.hasOwnProperty(a)) 
                        // TODO: Remove jQuery dependency
                        jQuery(this._eventObj).unbind(a,oldEvents[a]);
            }

            this._parameters.bind = events;
			for (var a in events) if (events.hasOwnProperty(a)) 
				// TODO: Remove jQuery dependency
					jQuery(this._eventObj).bind(a,events[a]);
		}
	},

	_Loader:(function()
	{
		if (IE)
		return function(parameters)
		{
			var width=this._img.width;
			var height=this._img.height;
			this._img.parentNode.removeChild(this._img);
							
			this._vimage = this.createVMLNode('image');
			this._vimage.src=this._img.src;
			this._vimage.style.height=height+"px";
			this._vimage.style.width=width+"px";
			this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
			this._vimage.style.top = "0px";
			this._vimage.style.left = "0px";

			/* Group minifying a small 1px precision problem when rotating object */
			this._container =  this.createVMLNode('group');
			this._container.style.width=width;
			this._container.style.height=height;
			this._container.style.position="absolute";
			this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
			this._container.appendChild(this._vimage);
			
			this._rootObj.appendChild(this._container);
			this._rootObj.style.position="relative"; // FIXES IE PROBLEM
			this._rootObj.style.width=width+"px";
			this._rootObj.style.height=height+"px";
			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
			this._rootObj.className=this._img.className;			
		    this._eventObj = this._rootObj;	
		    this._handleRotation(parameters);	
		}
		else
		return function (parameters)
		{
			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
			this._rootObj.className=this._img.className;
			
			this._width=this._img.width;
			this._height=this._img.height;
			this._widthHalf=this._width/2; // used for optimisation
			this._heightHalf=this._height/2;// used for optimisation
			
			var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width));

			this._widthAdd = _widthMax - this._width;
			this._heightAdd = _widthMax - this._height;	// widthMax because maxWidth=maxHeight
			this._widthAddHalf=this._widthAdd/2; // used for optimisation
			this._heightAddHalf=this._heightAdd/2;// used for optimisation
			
			this._img.parentNode.removeChild(this._img);	
			
			this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width;
			this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height;
			
			this._canvas=document.createElement('canvas');
			this._canvas.setAttribute('width',this._width);
			this._canvas.style.position="relative";
			this._canvas.style.left = -this._widthAddHalf + "px";
			this._canvas.style.top = -this._heightAddHalf + "px";
			this._canvas.Wilq32 = this._rootObj.Wilq32;
			
			this._rootObj.appendChild(this._canvas);
			this._rootObj.style.width=this._width+"px";
			this._rootObj.style.height=this._height+"px";
            this._eventObj = this._canvas;
			
			this._cnv=this._canvas.getContext('2d');
            this._handleRotation(parameters);
		}
	})(),

	_animateStart:function()
	{	
		if (this._timer) {
			clearTimeout(this._timer);
		}
		this._animateStartTime = +new Date;
		this._animateStartAngle = this._angle;
		this._animate();
	},
    _animate:function()
    {
         var actualTime = +new Date;
         var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;

         // TODO: Bug for animatedGif for static rotation ? (to test)
         if (checkEnd && !this._parameters.animatedGif) 
         {
             clearTimeout(this._timer);
         }
         else 
         {
             if (this._canvas||this._vimage||this._img) {
                 var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
                 this._rotate((~~(angle*10))/10);
             }
             if (this._parameters.step) {
                this._parameters.step(this._angle);
             }
             var self = this;
             this._timer = setTimeout(function()
                     {
                     self._animate.call(self);
                     }, 10);
         }

         // To fix Bug that prevents using recursive function in callback I moved this function to back
         if (this._parameters.callback && checkEnd){
             this._angle = this._parameters.animateTo;
             this._rotate(this._angle);
             this._parameters.callback.call(this._rootObj);
         }
     },

	_rotate : (function()
	{
		var rad = Math.PI/180;
		if (IE)
		return function(angle)
		{
            this._angle = angle;
			this._container.style.rotation=(angle%360)+"deg";
		}
		else if (supportedCSS)
		return function(angle){
            this._angle = angle;
			this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
		}
		else 
		return function(angle)
		{
            this._angle = angle;
			angle=(angle%360)* rad;
			// clear canvas	
			this._canvas.width = this._width+this._widthAdd;
			this._canvas.height = this._height+this._heightAdd;
						
			// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
			this._cnv.translate(this._widthAddHalf,this._heightAddHalf);	// at least center image on screen
			this._cnv.translate(this._widthHalf,this._heightHalf);			// we move image back to its orginal 
			this._cnv.rotate(angle);										// rotate image
			this._cnv.translate(-this._widthHalf,-this._heightHalf);		// move image to its center, so we can rotate around its center
			this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)/>
			this._cnv.drawImage(this._img, 0, 0);							// First - we draw image
		}

	})()
}

if (IE)
{
Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
		try {
			!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
			return function (tagName) {
				return document.createElement('<rvml:' + tagName + ' class="rvml">');
			};
		} catch (e) {
			return function (tagName) {
				return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
			};
		}		
})();
}

})(jQuery);




</script>

<body>
    
<br> </br>

<div id="clock_dc" class="clock_container">
    <div class="lbl">Washington, DC</div>
    <div class="clockHolder">
        <div class="rotatingWrapper"><img class="hour" src="images/clock_hour.png" /></div>
        <div class="rotatingWrapper"><img class="min" src="images/clock_min.png" /></div>
        <div class="rotatingWrapper"><img class="sec" src="images/clock_sec.png" /></div>
        <img class="clock" src="images/clock_face.png" />
    </div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span> <span class="period"></span>
    </div>
</div>




</body>

</html>


Could someone give me a clue as to how I can get the World Timeclocks to show up? Attached is the downloaded folder. Thank you for any help.
Yours truly,
Quang Pham

Is This A Good Question/Topic? 0
  • +

Replies To: jQuery plugin World Timeclocks

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,870
  • Joined: 12-December 12

Re: jQuery plugin World Timeclocks

Posted 26 July 2014 - 02:25 AM

No files are attached, but are you attempting to link the script using this:
<script src="js/jClocksGMT.js"></script>

or are you copying the entire script into your current page?

In either case, your code doesn't give a clear picture - you have just copied the css and Javascript and pasted it here. For example, there is a redundant script-tag on line 17 and the css is not in style-tags. And clock_dc isn't available at the time your script runs.

You need to give a clearer picture of what you have attempted, so that someone could advise you what you are doing wrong. Also check your browser's console for any errors.
Was This Post Helpful? 0
  • +
  • -

#3 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 125
  • View blog
  • Posts: 539
  • Joined: 15-March 14

Re: jQuery plugin World Timeclocks

Posted 26 July 2014 - 03:43 AM

You need the jQuery rotate plugin. See line 98
Was This Post Helpful? 1
  • +
  • -

#4 Quang Pham  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 74
  • Joined: 18-November 12

Re: jQuery plugin World Timeclocks

Posted 26 July 2014 - 03:34 PM

Dear Fellow Programmers,
I tried to rework the jQuery plugin but could only come up with this. Do you have further suggestions? (How to get the clock hands to be on the clock face and how to make them move?
Yours truly,
Quang Pham

<!DOCTYPE html>

<html>

<head>

    <title>jClocksGMT</title>
    <meta charset-"UTF-8">
    
    <style type="text/css">
<!--
.style1 {
	font-size: xx-large;
	color: #0000FF;
	font-weight: bold;
}
-->
    </style>
<!--<h1> World Timeclocks </h1>-->
    
<link rel="stylesheet" href="css/jClocksGMT.css">
        
        <!--jClocksGMT script-->

<script src="js/jquery-1.9.0.js"></script>
<script src="js/jClocksGMT.js"></script>



<!--fire the plugin--> <script>$("#clock_dc").jClocksGMT({offset: '-6', analog: true, digital: true, hour24: false});</script>
    
        <!--end jClocksGMT script-->
        
        
</head>

<script>
    
     //jClocksGMT.css

.clock_container {
    float:left;
    margin-right:2px;
    width:110px;
    position: relative;
}
.clock_container .lbl {
    font-size:10px;
    color: #333333;
    line-height: 22px;
    background: url(../images/clock_label.png);
    text-align: center;
    height: 27px;
    width: 108px;
    margin: 0 auto;
}
.clockHolder {
    width:100px; 
    margin:0 auto;
    position:relative;
}
.clock {
    margin-left:5px;
}

.sec {
    display:block;
    position:absolute;
}
.min {
    display:block;
    position:absolute;
}
.hour {
    display:block;
    position:absolute;
}

.rotatingWrapper {
    position:absolute;
    width:100px;
    height:100px;
    left: 5px;

}
.digital {
    font-weight:bold;
    font-size: 14px;
    color: #444444;
    text-align:center;
}


     //end jClocksGMT.css
     
     //jClocksGMT.js

   /********************************************************************************************************
 *
 * NAME: jClocksGMT
 * VERSION: 1.2
 * LAST UPDATE: 2014.03.12
 *
 * Change Log:
 *      1.2: Fixed severely flawed Daylight Saving Time calculation
 *      1.1: Added automatic Daylight Saving Time calculation
 *
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 * 
 * Author Information:
 *      Name: Richard McMaster
 *      Email: richard.mcmaster@live.com
 *      Location: Houston, Texas, United States
 *      Website: http://www.mcmastermind.com
 *
 * Plugin Website: http://www.github.com/mcmastermind/jClocksGMT
 *
 * Description:
 *      jQuery based analog and digital clock(s) using GMT offsets. Requires jQuery Rotate plugin.
 *
 * Credit Resources: 
 *      Article: "Convert the local time to another time zone with this Javascript"
 *      URL: http://www.techrepublic.com/article/convert-the-local-time-to-another-time-zone-with-this-javascript/6016329
 *      Author: Melonfire
 *      Date: 2006.03.01
 *
 *      Article: "Analog JQuery clock"
 *      URL: http://d-zig.com/Desc.aspx?item=74
 *      Author: Jim Rasmussen
 *      Date: circa 2011
 *
 *      Article: "Daylight Saving Time - Adding Methods to the Date Object"
 *      URL: http://javascript.about.com/library/bldst.htm
 *      Author: N/A
 *      Date: N/A
 *
 * Documentation:
 *      Default options:
 *          offset: '0',    // String: Set GMT offset (+5.5, -4, 0, etc)
 *          angleSec: 0,    // Integer: Starting angle of second hand
 *          angleMin: 0,    // Integer: Starting angle of minute hand
 *          angleHour: 0,   // Integer: Starting angle of hour hand
 *          hour24: false,  // Boolean: 24 hour clock or 12 hour clock
 *          digital: true,  // Boolean: Display digital clock
 *          analog: true    // Boolean: Display analog clock
 *
 *      Common offsets by time zone: (only use the number after GMT: GMT-2 = offset: '-2'
 *                                    Daylight Saving Time converted automatically)
 *          GMT-12	 Eniwetok
 *          GMT-11	 Samoa
 *          GMT-10	 Hawaii
 *          GMT-9	 Alaska
 *          GMT-8	 PST, Pacific US
 *          GMT-7	 MST, Mountain US
 *          GMT-6	 CST, Central US
 *          GMT-5	 EST, Eastern US
 *          GMT-4	 Atlantic, Canada
 *          GMT-3	 Brazilia, Buenos Aries
 *          GMT-2	 Mid-Atlantic
 *          GMT-1	 Cape Verdes
 *          GMT	0    Greenwich Mean Time, Dublin
 *          GMT+1	 Berlin, Rome
 *          GMT+2	 Israel, Cairo
 *          GMT+3	 Moscow, Kuwait
 *          GMT+4	 Abu Dhabi, Muscat
 *          GMT+5	 Islamabad, Karachi
 *          GMT+6	 Almaty, Dhaka
 *          GMT+7	 Bangkok, Jakarta
 *          GMT+8	 Hong Kong, Beijing
 *          GMT+9	 Tokyo, Osaka
 *          GMT+10	 Sydney, Melbourne, Guam
 *          GMT+11	 Magadan, Soloman Is.
 *          GMT+12	 Fiji, Wellington, Auckland
 *
 ********************************************************************************************************/

 (function($) {

    $.fn.extend({
        
        jClocksGMT: function(options) {
            
            var defaults = {
                offset: '0', // default gmt offset
                angleSec: 0,
                angleMin: 0,
                angleHour: 0,
                hour24: false,
                digital: true,
                analog: true
            }
            
            var options = $.extend(defaults, options);
            
            return this.each(function(){
                var offset = options.offset;
                var id = $(this).attr('id');
                
                // initial hand rotation
                $('#' + id + ' .sec').rotate(options.angleSec);
                $('#' + id + ' .min').rotate(options.angleMin);
                $('#' + id + ' .hour').rotate(options.angleHour);

                // check if daylight saving time is in effect
                Date.prototype.stdTimezoneOffset = function() {
                    var jan = new Date(this.getFullYear(), 0, 1);
                    var janUTC = jan.getTime() + (jan.getTimezoneOffset() * 60000);
                    var janOffset = new Date(janUTC + (3600000 * options.offset));
                    var jul = new Date(this.getFullYear(), 6, 1);
                    var julUTC = jul.getTime() + (jul.getTimezoneOffset() * 60000);
                    var julOffset = new Date(julUTC + (3600000 * options.offset));
                    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
                    //return Math.max(janOffset, julOffset);
                }
                Date.prototype.dst = function() {
                    if( parseFloat(options.offset) <= -4 && parseFloat(options.offset) >= -10 ) {
                        var dCheck = new Date;
                        var utcCheck = dCheck.getTime() + (dCheck.getTimezoneOffset() * 60000);
                        var newCheck = new Date(utcCheck + (3600000 * options.offset));
                        return this.getTimezoneOffset() < this.stdTimezoneOffset();
                        //return newCheck.getTimezoneOffset() < this.stdTimezoneOffset();
                    }
                }
                // create new date object
                var dateCheck = new Date;

                if( dateCheck.dst() ) {
                   offset = parseFloat(offset) + 1;
                };
                
                setInterval(function () {
                    // create new date object
                    var d = new Date;
                    // convert to msec
                    // add local time offset
                    // get UTC time in msec
                    var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
                    
                    /*if( d.dst() ) {
                        offset = offset + 1;
                    };*/
                    
                    // create new Date object for different city
                    // using supplied offset
                    var nd = new Date(utc + (3600000 * offset));
                    
                    // format numbers
                    var s = nd.getSeconds();
                    var m = nd.getMinutes();
                    var hh = nd.getHours();
                    var h = hh;
                    
                    // format for 12 hour
                    if(!options.hour24) {
                        var dd = "AM";
                        if( h >= 12) {
                            h = hh-12;
                            dd = "PM";
                        }
                        if( h == 0 ) {
                            h = 12;
                        }
                    }
                    
                    if(options.analog) {
                        // rotate second hand
                        options.angleSec = (nd.getSeconds() * 6);
                        $('#' + id + ' .sec').rotate(options.angleSec);
                        // rotate minute hand
                        options.angleMin = (nd.getMinutes() * 6);
                        $('#' + id + ' .min').rotate(options.angleMin);
                        // rotate hour hand
                        options.angleHour = ((nd.getHours() * 5 + nd.getMinutes() / 12) * 6);
                        $('#' + id + ' .hour').rotate(options.angleHour);
                    }
                    
                    // display digital clock if enabled
                    if(options.digital) {
                        $('#' + id + ' .digital .hr').html(h + ':');
                        $('#' + id + ' .digital .minute').html(m < 10 ? "0" + m : m);
                        if(!options.hour24) {
                            $('#' + id + ' .digital .period').html(dd);
                        }
                    }
                }, 1000);
            });
        }
    });
})(jQuery);  
     
    //end jClocksGMT.js 

<!--jquery.rotate.js-->


// VERSION: 2.2 LAST UPDATE: 13.03.2012
/* 
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 * 
 * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
 * Website: http://code.google.com/p/jqueryrotate/ 
 */

// Documentation removed from script file (was kinda useless and outdated)

(function($) {
var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
// Bad eval to preven google closure to remove it from code o_O
// After compresion replace it back to var IE = 'v' == '\v'
var IE = eval('"v"=="\v"');

jQuery.fn.extend({
    rotate:function(parameters)
    {
        if (this.length===0||typeof parameters=="undefined") return;
            if (typeof parameters=="number") parameters={angle:parameters};
        var returned=[];
        for (var i=0,i0=this.length;i<i0;i++)
            {
                var element=this.get(i);	
                if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {

                    var paramClone = $.extend(true, {}, parameters); 
                    var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;

                    returned.push($(newRotObject));
                }
                else {
                    element.Wilq32.PhotoEffect._handleRotation(parameters);
                }
            }
            return returned;
    },
    getRotateAngle: function(){
        var ret = [];
        for (var i=0,i0=this.length;i<i0;i++)
            {
                var element=this.get(i);	
                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
                    ret[i] = element.Wilq32.PhotoEffect._angle;
                }
            }
            return ret;
    },
    stopRotate: function(){
        for (var i=0,i0=this.length;i<i0;i++)
            {
                var element=this.get(i);	
                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
                    clearTimeout(element.Wilq32.PhotoEffect._timer);
                }
            }
    }
});

// Library agnostic interface

Wilq32=window.Wilq32||{};
Wilq32.PhotoEffect=(function(){

	if (supportedCSS) {
		return function(img,parameters){
			img.Wilq32 = {
				PhotoEffect: this
			};
            
            this._img = this._rootObj = this._eventObj = img;
            this._handleRotation(parameters);
		}
	} else {
		return function(img,parameters) {
			// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
            this._img = img;

			this._rootObj=document.createElement('span');
			this._rootObj.style.display="inline-block";
			this._rootObj.Wilq32 = 
				{
					PhotoEffect: this
				};
			img.parentNode.insertBefore(this._rootObj,img);
			
			if (img.complete) {
				this._Loader(parameters);
			} else {
				var self=this;
				// TODO: Remove jQuery dependency
				jQuery(this._img).bind("load", function()
				{
					self._Loader(parameters);
				});
			}
		}
	}
})();

Wilq32.PhotoEffect.prototype={
    _setupParameters : function (parameters){
		this._parameters = this._parameters || {};
        if (typeof this._angle !== "number") this._angle = 0 ;
        if (typeof parameters.angle==="number") this._angle = parameters.angle;
        this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle); 

        this._parameters.step = parameters.step || this._parameters.step || null;
		this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
		this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
        this._parameters.callback = parameters.callback || this._parameters.callback || function(){};
        if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind); 
	},
	_handleRotation : function(parameters){
          this._setupParameters(parameters);
          if (this._angle==this._parameters.animateTo) {
              this._rotate(this._angle);
          }
          else { 
              this._animateStart();          
          }
	},

	_BindEvents:function(events){
		if (events && this._eventObj) 
		{
            // Unbinding previous Events
            if (this._parameters.bind){
                var oldEvents = this._parameters.bind;
                for (var a in oldEvents) if (oldEvents.hasOwnProperty(a)) 
                        // TODO: Remove jQuery dependency
                        jQuery(this._eventObj).unbind(a,oldEvents[a]);
            }

            this._parameters.bind = events;
			for (var a in events) if (events.hasOwnProperty(a)) 
				// TODO: Remove jQuery dependency
					jQuery(this._eventObj).bind(a,events[a]);
		}
	},

	_Loader:(function()
	{
		if (IE)
		return function(parameters)
		{
			var width=this._img.width;
			var height=this._img.height;
			this._img.parentNode.removeChild(this._img);
							
			this._vimage = this.createVMLNode('image');
			this._vimage.src=this._img.src;
			this._vimage.style.height=height+"px";
			this._vimage.style.width=width+"px";
			this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
			this._vimage.style.top = "0px";
			this._vimage.style.left = "0px";

			/* Group minifying a small 1px precision problem when rotating object */
			this._container =  this.createVMLNode('group');
			this._container.style.width=width;
			this._container.style.height=height;
			this._container.style.position="absolute";
			this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
			this._container.appendChild(this._vimage);
			
			this._rootObj.appendChild(this._container);
			this._rootObj.style.position="relative"; // FIXES IE PROBLEM
			this._rootObj.style.width=width+"px";
			this._rootObj.style.height=height+"px";
			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
			this._rootObj.className=this._img.className;			
		    this._eventObj = this._rootObj;	
		    this._handleRotation(parameters);	
		}
		else
		return function (parameters)
		{
			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
			this._rootObj.className=this._img.className;
			
			this._width=this._img.width;
			this._height=this._img.height;
			this._widthHalf=this._width/2; // used for optimisation
			this._heightHalf=this._height/2;// used for optimisation
			
			var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width));

			this._widthAdd = _widthMax - this._width;
			this._heightAdd = _widthMax - this._height;	// widthMax because maxWidth=maxHeight
			this._widthAddHalf=this._widthAdd/2; // used for optimisation
			this._heightAddHalf=this._heightAdd/2;// used for optimisation
			
			this._img.parentNode.removeChild(this._img);	
			
			this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width;
			this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height;
			
			this._canvas=document.createElement('canvas');
			this._canvas.setAttribute('width',this._width);
			this._canvas.style.position="relative";
			this._canvas.style.left = -this._widthAddHalf + "px";
			this._canvas.style.top = -this._heightAddHalf + "px";
			this._canvas.Wilq32 = this._rootObj.Wilq32;
			
			this._rootObj.appendChild(this._canvas);
			this._rootObj.style.width=this._width+"px";
			this._rootObj.style.height=this._height+"px";
            this._eventObj = this._canvas;
			
			this._cnv=this._canvas.getContext('2d');
            this._handleRotation(parameters);
		}
	})(),

	_animateStart:function()
	{	
		if (this._timer) {
			clearTimeout(this._timer);
		}
		this._animateStartTime = +new Date;
		this._animateStartAngle = this._angle;
		this._animate();
	},
    _animate:function()
    {
         var actualTime = +new Date;
         var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;

         // TODO: Bug for animatedGif for static rotation ? (to test)
         if (checkEnd && !this._parameters.animatedGif) 
         {
             clearTimeout(this._timer);
         }
         else 
         {
             if (this._canvas||this._vimage||this._img) {
                 var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
                 this._rotate((~~(angle*10))/10);
             }
             if (this._parameters.step) {
                this._parameters.step(this._angle);
             }
             var self = this;
             this._timer = setTimeout(function()
                     {
                     self._animate.call(self);
                     }, 10);
         }

         // To fix Bug that prevents using recursive function in callback I moved this function to back
         if (this._parameters.callback && checkEnd){
             this._angle = this._parameters.animateTo;
             this._rotate(this._angle);
             this._parameters.callback.call(this._rootObj);
         }
     },

	_rotate : (function()
	{
		var rad = Math.PI/180;
		if (IE)
		return function(angle)
		{
            this._angle = angle;
			this._container.style.rotation=(angle%360)+"deg";
		}
		else if (supportedCSS)
		return function(angle){
            this._angle = angle;
			this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
		}
		else 
		return function(angle)
		{
            this._angle = angle;
			angle=(angle%360)* rad;
			// clear canvas	
			this._canvas.width = this._width+this._widthAdd;
			this._canvas.height = this._height+this._heightAdd;
						
			// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
			this._cnv.translate(this._widthAddHalf,this._heightAddHalf);	// at least center image on screen
			this._cnv.translate(this._widthHalf,this._heightHalf);			// we move image back to its orginal 
			this._cnv.rotate(angle);										// rotate image
			this._cnv.translate(-this._widthHalf,-this._heightHalf);		// move image to its center, so we can rotate around its center
			this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)/>
			this._cnv.drawImage(this._img, 0, 0);							// First - we draw image
		}

	})()
}

if (IE)
{
Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
		try {
			!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
			return function (tagName) {
				return document.createElement('<rvml:' + tagName + ' class="rvml">');
			};
		} catch (e) {
			return function (tagName) {
				return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
			};
		}		
})();
}

})(jQuery);


<!--end jquery.rotate.js-->

<!--images-->



<!--end images-->

//HTML for clock

<div id="clock_dc" class="clock_container">
    <div class="lbl">Washington, DC</div>
    <div class="clockHolder">
        <div class="rotatingWrapper"><img class="hour" src="images/clock_hour.png" /></div>
        <div class="rotatingWrapper"><img class="min" src="images/clock_min.png" /></div>
        <div class="rotatingWrapper"><img class="sec" src="images/clock_sec.png" /></div>
        <img class="clock" src="images/clock_face.png" />
    </div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span> <span class="period"></span>
    </div>
</div>

//end HTML for clock

</script>

<body>
    
<div align="center"><span class="style1">World Time Clocks</span><br> 
   </br>
</div>
<div id="clock_dc" class="clock_container">
    <div class="lbl">Ho Chi Minh City, VietNam</div>
  <div class="clockHolder">
        <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
        <a href="jClocksGMT-master/images/clock_face.png"><span class="rotatingWrapper"><img src="jClocksGMT-master/images/clock_hour.png" width="100" height="100" class="hour" /><img src="jClocksGMT-master/images/clock_min.png" width="100" height="100" class="min" /><img src="jClocksGMT-master/images/clock_sec.png" width="100" height="100" class="sec" /></span><img src="jClocksGMT-master/images/clock_face.png" width="100" height="100" class="clock" /></a></div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span> <span class="period"></span>
    </div>
</div>
</div>
<div id="clock_dc" class="clock_container">
    <div class="lbl">Washington, DC</div>
  <div class="clockHolder">
        <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
        <a href="jClocksGMT-master/images/clock_face.png"><span class="rotatingWrapper"><img src="jClocksGMT-master/images/clock_hour.png" width="100" height="100" class="hour" /><img src="jClocksGMT-master/images/clock_min.png" width="100" height="100" class="min" /><img src="jClocksGMT-master/images/clock_sec.png" width="100" height="100" class="sec" /></span><img src="jClocksGMT-master/images/clock_face.png" width="100" height="100" class="clock" /></a></div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span> <span class="period"></span>
    </div>
</div>
</div>
<div id="clock_dc" class="clock_container">
    <div class="lbl">San Diego, California</div>
  <div class="clockHolder">
        <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
        <a href="jClocksGMT-master/images/clock_face.png"><span class="rotatingWrapper"><img src="jClocksGMT-master/images/clock_hour.png" width="100" height="100" class="hour" /><img src="jClocksGMT-master/images/clock_min.png" width="100" height="100" class="min" /></span><a href="jClocksGMT-master/images/clock_face.png"><span class="rotatingWrapper"><img src="jClocksGMT-master/images/clock_sec.png" width="100" height="100" class="sec" /></span></a><img src="jClocksGMT-master/images/clock_face.png" width="100" height="100" class="clock" /></a></div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span> <span class="period"></span>
    </div>
</div>



</body>

</html>



Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 387
  • Posts: 1,409
  • Joined: 15-January 14

Re: jQuery plugin World Timeclocks

Posted 28 July 2014 - 09:14 AM

You still have a bunch of CSS rules inside a script tag. CSS rules go in style tags, not script tags. And, like was said before, you should either include the Javascript code with a script tag that links to an external file, or copy and paste the Javascript code into a script block in the page. Do not do both. You did both.
Was This Post Helpful? 0
  • +
  • -

#6 Quang Pham  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 74
  • Joined: 18-November 12

Re: jQuery plugin World Timeclocks

Posted 30 July 2014 - 01:06 AM

Dear Fellow Programmers,
I tried again to post the World Time Clocks, pasting the CSS inside the <style> tags and JS inside the <script> tags. The clocks looked much better, but I couldn't get the hands to rotate and the times to be adjusted versus GMT. Do you have suggestions on how I can do this? Thanks for the help with the code.
Yours truly,
Quang Pham
<!DOCTYPE html>

<html>

<head>

    <title>jClocksGMT</title>
    <meta charset-"UTF-8">
    
    <style type="text/css">

.style1 {
	font-size: xx-large;
	color: #0000FF;
	font-weight: bold;
}

    </style>
<!--<h1> World Time Clocks </h1>-->
    
<link rel="stylesheet" href="css/jClocksGMT.css">
        
<!--jClocksGMT script-->

<script src="js/jquery-1.9.0.js"></script>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="js/jquery.rotate.js"></script>

<script src="js/jClocksGMT.js"></script>

<!--fire the plugin--> <script>$("#clock_dc").jClocksGMT({offset: '-6', analog: true, digital: true, hour24: false});

                               $("#clock_hcmc").jClocksGMT({offset: '+7', analog: true, digital: true, hour24: false});
		       
		               $("#clock_sd").jClocksGMT({offset: '-8', analog: true, digital: true, hour24: false});</script>
    
<!--end jClocksGMT script-->
        
     
<style type="text/css">

.style2 {color: #0000FF}


/*jClocksGMT.css*/

.clock_container {
    float:left;
    margin-right:2px;
    width:110px;
    position: relative;
}
.clock_container .lbl {
    font-size:10px;
    color: #333333;
    line-height: 22px;
    background: url(../images/clock_label.png);
    text-align: center;
    height: 27px;
    width: 108px;
    margin: 0 auto;
}
.clockHolder {
    width:100px; 
    margin:0 auto;
    position:relative;
}
.clock {
    margin-left:5px;
}

.sec {
    display:block;
    position:absolute;
}
.min {
    display:block;
    position:absolute;
}
.hour {
    display:block;
    position:absolute;
}

.rotatingWrapper {
    position:absolute;
    width:100px;
    height:100px;
    left: 5px;

}
.digital {
    font-weight:bold;
    font-size: 14px;
    color: #444444;
    text-align:center;
}


/*end jClocksGMT.css*/

</style>
	   
       
       
</head>

<script>
    
/*jClocksGMT.js*/

/********************************************************************************************************
 *
 * NAME: jClocksGMT
 * VERSION: 1.2
 * LAST UPDATE: 2014.03.12
 *
 * Change Log:
 *      1.2: Fixed severely flawed Daylight Saving Time calculation
 *      1.1: Added automatic Daylight Saving Time calculation
 *
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 * 
 * Author Information:
 *      Name: Richard McMaster
 *      Email: richard.mcmaster@live.com
 *      Location: Houston, Texas, United States
 *      Website: http://www.mcmastermind.com
 *      Developer:  Quang Pham, quangnvpham2000@yahoo.com, Escondido, CA, http://captaincleanlaundry.com
 *
 * Plugin Website: http://www.github.com/mcmastermind/jClocksGMT
 *
 * Description:
 *      jQuery based analog and digital clock(s) using GMT offsets. Requires jQuery Rotate plugin.
 *
 * Credit Resources: 
 *      Article: "Convert the local time to another time zone with this Javascript"
 *      URL: http://www.techrepublic.com/article/convert-the-local-time-to-another-time-zone-with-this-javascript/6016329
 *      Author: Melonfire
 *      Date: 2006.03.01
 *
 *      Article: "Analog JQuery clock"
 *      URL: http://d-zig.com/Desc.aspx?item=74
 *      Author: Jim Rasmussen
 *      Date: circa 2011
 *
 *      Article: "Daylight Saving Time - Adding Methods to the Date Object"
 *      URL: http://javascript.about.com/library/bldst.htm
 *      Author: N/A
 *      Date: N/A
 *
 * Documentation:
 *      Default options:
 *          offset: '0',    // String: Set GMT offset (+5.5, -4, 0, etc)
 *          angleSec: 0,    // Integer: Starting angle of second hand
 *          angleMin: 0,    // Integer: Starting angle of minute hand
 *          angleHour: 0,   // Integer: Starting angle of hour hand
 *          hour24: false,  // Boolean: 24 hour clock or 12 hour clock
 *          digital: true,  // Boolean: Display digital clock
 *          analog: true    // Boolean: Display analog clock
 *
 *      Common offsets by time zone: (only use the number after GMT: GMT-2 = offset: '-2'
 *                                    Daylight Saving Time converted automatically)
 *          GMT-12	 Eniwetok
 *          GMT-11	 Samoa
 *          GMT-10	 Hawaii
 *          GMT-9	 Alaska
 *          GMT-8	 PST, Pacific US, San Diego, CA
 *          GMT-7	 MST, Mountain US
 *          GMT-6	 CST, Central US, Houston, TX
 *          GMT-5	 EST, Eastern US, Washington, D.C.
 *          GMT-4	 Atlantic, Canada
 *          GMT-3	 Brazilia, Buenos Aries
 *          GMT-2	 Mid-Atlantic
 *          GMT-1	 Cape Verdes
 *          GMT	0    Greenwich Mean Time, Dublin
 *          GMT+1	 Berlin, Rome
 *          GMT+2	 Israel, Cairo
 *          GMT+3	 Moscow, Kuwait
 *          GMT+4	 Abu Dhabi, Muscat
 *          GMT+5	 Islamabad, Karachi
 *          GMT+6	 Almaty, Dhaka
 *          GMT+7	 Bangkok, Jakarta, Ho Chi Minh City
 *          GMT+8	 Hong Kong, Beijing
 *          GMT+9	 Tokyo, Osaka
 *          GMT+10	 Sydney, Melbourne, Guam
 *          GMT+11	 Magadan, Soloman Is.
 *          GMT+12	 Fiji, Wellington, Auckland
 *
 ********************************************************************************************************/

 (function($) {

    $.fn.extend({
        
        jClocksGMT: function(options) {
            
            var defaults = {
                offset: '0', // default gmt offset
                angleSec: 0,
                angleMin: 0,
                angleHour: 0,
                hour24: false,
                digital: true,
                analog: true
            }
            
            var options = $.extend(defaults, options);
            
            return this.each(function(){
                var offset = options.offset;
                var id = $(this).attr('id');
                
                // initial hand rotation
                $('#' + id + ' .sec').rotate(options.angleSec);
                $('#' + id + ' .min').rotate(options.angleMin);
                $('#' + id + ' .hour').rotate(options.angleHour);

                // check if daylight saving time is in effect
                Date.prototype.stdTimezoneOffset = function() {
                    var jan = new Date(this.getFullYear(), 0, 1);
                    var janUTC = jan.getTime() + (jan.getTimezoneOffset() * 60000);
                    var janOffset = new Date(janUTC + (3600000 * options.offset));
                    var jul = new Date(this.getFullYear(), 6, 1);
                    var julUTC = jul.getTime() + (jul.getTimezoneOffset() * 60000);
                    var julOffset = new Date(julUTC + (3600000 * options.offset));
                    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
                    //return Math.max(janOffset, julOffset);
                }
                Date.prototype.dst = function() {
                    if( parseFloat(options.offset) <= -4 && parseFloat(options.offset) >= -10 ) {
                        var dCheck = new Date;
                        var utcCheck = dCheck.getTime() + (dCheck.getTimezoneOffset() * 60000);
                        var newCheck = new Date(utcCheck + (3600000 * options.offset));
                        return this.getTimezoneOffset() < this.stdTimezoneOffset();
                        //return newCheck.getTimezoneOffset() < this.stdTimezoneOffset();
                    }
                }
                // create new date object
                var dateCheck = new Date;

                if( dateCheck.dst() ) {
                   offset = parseFloat(offset) + 1;
                };
                
                setInterval(function () {
                    // create new date object
                    var d = new Date;
                    // convert to msec
                    // add local time offset
                    // get UTC time in msec
                    var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
                    
                    /*if( d.dst() ) {
                        offset = offset + 1;
                    };*/
                    
                    // create new Date object for different city
                    // using supplied offset
                    var nd = new Date(utc + (3600000 * offset));
                    
                    // format numbers
                    var s = nd.getSeconds();
                    var m = nd.getMinutes();
                    var hh = nd.getHours();
                    var h = hh;
                    
                    // format for 12 hour
                    if(!options.hour24) {
                        var dd = "AM";
                        if( h >= 12) {
                            h = hh-12;
                            dd = "PM";
                        }
                        if( h == 0 ) {
                            h = 12;
                        }
                    }
                    
                    if(options.analog) {
                        // rotate second hand
                        options.angleSec = (nd.getSeconds() * 6);
                        $('#' + id + ' .sec').rotate(options.angleSec);
                        // rotate minute hand
                        options.angleMin = (nd.getMinutes() * 6);
                        $('#' + id + ' .min').rotate(options.angleMin);
                        // rotate hour hand
                        options.angleHour = ((nd.getHours() * 5 + nd.getMinutes() / 12) * 6);
                        $('#' + id + ' .hour').rotate(options.angleHour);
                    }
                    
                    // display digital clock if enabled
                    if(options.digital) {
                        $('#' + id + ' .digital .hr').html(h + ':');
                        $('#' + id + ' .digital .minute').html(m < 10 ? "0" + m : m);
                        if(!options.hour24) {
                            $('#' + id + ' .digital .period').html(dd);
                        }
                    }
                }, 1000);
            });
        }
    });
})(jQuery);  
     
/*end jClocksGMT.js*/ 

<!--jquery.rotate.js-->


/*VERSION: 2.2 LAST UPDATE: 13.03.2012*/
/* 
 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
 * 
 * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
 * Website: http://code.google.com/p/jqueryrotate/ 
 */
/*Documentation removed from script file (was kinda useless and outdated)*/

(function($) {
var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
 /*Bad eval to prevent google closure to remove it from code o_O*/
 /*After compresion replace it back to var IE = 'v' == '\v'*/
var IE = eval('"v"=="\v"');

jQuery.fn.extend({
    rotate:function(parameters)
    {
        if (this.length===0||typeof parameters=="undefined") return;
            if (typeof parameters=="number") parameters={angle:parameters};
        var returned=[];
        for (var i=0,i0=this.length;i<i0;i++)
            {
                var element=this.get(i);	
                if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {

                    var paramClone = $.extend(true, {}, parameters); 
                    var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;

                    returned.push($(newRotObject));
                }
                else {
                    element.Wilq32.PhotoEffect._handleRotation(parameters);
                }
            }
            return returned;
    },
    getRotateAngle: function(){
        var ret = [];
        for (var i=0,i0=this.length;i<i0;i++)
            {
                var element=this.get(i);	
                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
                    ret[i] = element.Wilq32.PhotoEffect._angle;
                }
            }
            return ret;
    },
    stopRotate: function(){
        for (var i=0,i0=this.length;i<i0;i++)
            {
                var element=this.get(i);	
                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
                    clearTimeout(element.Wilq32.PhotoEffect._timer);
                }
            }
    }
});

 /*Library agnostic interface*/

Wilq32=window.Wilq32||{};
Wilq32.PhotoEffect=(function(){

	if (supportedCSS) {
		return function(img,parameters){
			img.Wilq32 = {
				PhotoEffect: this
			};
            
            this._img = this._rootObj = this._eventObj = img;
            this._handleRotation(parameters);
		}
	} else {
		return function(img,parameters) {
			// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
            this._img = img;

			this._rootObj=document.createElement('span');
			this._rootObj.style.display="inline-block";
			this._rootObj.Wilq32 = 
				{
					PhotoEffect: this
				};
			img.parentNode.insertBefore(this._rootObj,img);
			
			if (img.complete) {
				this._Loader(parameters);
			} else {
				var self=this;
				// TODO: Remove jQuery dependency
				jQuery(this._img).bind("load", function()
				{
					self._Loader(parameters);
				});
			}
		}
	}
})();

Wilq32.PhotoEffect.prototype={
    _setupParameters : function (parameters){
		this._parameters = this._parameters || {};
        if (typeof this._angle !== "number") this._angle = 0 ;
        if (typeof parameters.angle==="number") this._angle = parameters.angle;
        this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle); 

        this._parameters.step = parameters.step || this._parameters.step || null;
		this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
		this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
        this._parameters.callback = parameters.callback || this._parameters.callback || function(){};
        if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind); 
	},
	_handleRotation : function(parameters){
          this._setupParameters(parameters);
          if (this._angle==this._parameters.animateTo) {
              this._rotate(this._angle);
          }
          else { 
              this._animateStart();          
          }
	},

	_BindEvents:function(events){
		if (events && this._eventObj) 
		{
            // Unbinding previous Events
            if (this._parameters.bind){
                var oldEvents = this._parameters.bind;
                for (var a in oldEvents) if (oldEvents.hasOwnProperty(a)) 
                        // TODO: Remove jQuery dependency
                        jQuery(this._eventObj).unbind(a,oldEvents[a]);
            }

            this._parameters.bind = events;
			for (var a in events) if (events.hasOwnProperty(a)) 
				// TODO: Remove jQuery dependency
					jQuery(this._eventObj).bind(a,events[a]);
		}
	},

	_Loader:(function()
	{
		if (IE)
		return function(parameters)
		{
			var width=this._img.width;
			var height=this._img.height;
			this._img.parentNode.removeChild(this._img);
							
			this._vimage = this.createVMLNode('image');
			this._vimage.src=this._img.src;
			this._vimage.style.height=height+"px";
			this._vimage.style.width=width+"px";
			this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
			this._vimage.style.top = "0px";
			this._vimage.style.left = "0px";

			/* Group minifying a small 1px precision problem when rotating object */
			this._container =  this.createVMLNode('group');
			this._container.style.width=width;
			this._container.style.height=height;
			this._container.style.position="absolute";
			this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
			this._container.appendChild(this._vimage);
			
			this._rootObj.appendChild(this._container);
			this._rootObj.style.position="relative"; // FIXES IE PROBLEM
			this._rootObj.style.width=width+"px";
			this._rootObj.style.height=height+"px";
			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
			this._rootObj.className=this._img.className;			
		    this._eventObj = this._rootObj;	
		    this._handleRotation(parameters);	
		}
		else
		return function (parameters)
		{
			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
			this._rootObj.className=this._img.className;
			
			this._width=this._img.width;
			this._height=this._img.height;
			this._widthHalf=this._width/2; // used for optimisation
			this._heightHalf=this._height/2;// used for optimisation
			
			var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width));

			this._widthAdd = _widthMax - this._width;
			this._heightAdd = _widthMax - this._height;	// widthMax because maxWidth=maxHeight
			this._widthAddHalf=this._widthAdd/2; // used for optimisation
			this._heightAddHalf=this._heightAdd/2;// used for optimisation
			
			this._img.parentNode.removeChild(this._img);	
			
			this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width;
			this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height;
			
			this._canvas=document.createElement('canvas');
			this._canvas.setAttribute('width',this._width);
			this._canvas.style.position="relative";
			this._canvas.style.left = -this._widthAddHalf + "px";
			this._canvas.style.top = -this._heightAddHalf + "px";
			this._canvas.Wilq32 = this._rootObj.Wilq32;
			
			this._rootObj.appendChild(this._canvas);
			this._rootObj.style.width=this._width+"px";
			this._rootObj.style.height=this._height+"px";
            this._eventObj = this._canvas;
			
			this._cnv=this._canvas.getContext('2d');
            this._handleRotation(parameters);
		}
	})(),

	_animateStart:function()
	{	
		if (this._timer) {
			clearTimeout(this._timer);
		}
		this._animateStartTime = +new Date;
		this._animateStartAngle = this._angle;
		this._animate();
	},
    _animate:function()
    {
         var actualTime = +new Date;
         var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;

         // TODO: Bug for animatedGif for static rotation ? (to test)
         if (checkEnd && !this._parameters.animatedGif) 
         {
             clearTimeout(this._timer);
         }
         else 
         {
             if (this._canvas||this._vimage||this._img) {
                 var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
                 this._rotate((~~(angle*10))/10);
             }
             if (this._parameters.step) {
                this._parameters.step(this._angle);
             }
             var self = this;
             this._timer = setTimeout(function()
                     {
                     self._animate.call(self);
                     }, 10);
         }

         // To fix Bug that prevents using recursive function in callback I moved this function to back
         if (this._parameters.callback && checkEnd){
             this._angle = this._parameters.animateTo;
             this._rotate(this._angle);
             this._parameters.callback.call(this._rootObj);
         }
     },

	_rotate : (function()
	{
		var rad = Math.PI/180;
		if (IE)
		return function(angle)
		{
            this._angle = angle;
			this._container.style.rotation=(angle%360)+"deg";
		}
		else if (supportedCSS)
		return function(angle){
            this._angle = angle;
			this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
		}
		else 
		return function(angle)
		{
            this._angle = angle;
			angle=(angle%360)* rad;
			// clear canvas	
			this._canvas.width = this._width+this._widthAdd;
			this._canvas.height = this._height+this._heightAdd;
						
			// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
			this._cnv.translate(this._widthAddHalf,this._heightAddHalf);	// at least center image on screen
			this._cnv.translate(this._widthHalf,this._heightHalf);			// we move image back to its orginal 
			this._cnv.rotate(angle);										// rotate image
			this._cnv.translate(-this._widthHalf,-this._heightHalf);		// move image to its center, so we can rotate around its center
			this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)/>
			this._cnv.drawImage(this._img, 0, 0);							// First - we draw image
		}

	})()
}

if (IE)
{
Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
		try {
			!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
			return function (tagName) {
				return document.createElement('<rvml:' + tagName + ' class="rvml">');
			};
		} catch (e) {
			return function (tagName) {
				return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
			};
		}		
})();
}

})(jQuery);

</script>

<!--/*end jquery.rotate.js*/-->

<!--images-->



<!--end images-->

<body>

<!--HTML for clock-->

<div id="clock_dc" class="clock_container">
    <div class="lbl"><!--Washington, DC--></div>
    <div class="clockHolder">
        <div class="rotatingWrapper"><img class="hour" src="images/clock_hour.png" /></div>
        <div class="rotatingWrapper"><img class="min" src="images/clock_min.png" /></div>
        <div class="rotatingWrapper"><img class="sec" src="images/clock_sec.png" /></div>
        <img class="clock" src="images/clock_face.png" />
    </div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span> <span class="period"></span>
    </div>
</div>

<!--end HTML for  Washington, D.C. clock-->



    
<div align="center"><span class="style1">World Time Clocks</span><br> 
   <span class="style2"></br>
   </span></div>
<div id="clock_hcmc" class="clock_container">
    <div class="lbl style2">Ho Chi Minh City, VietNam</div>
  <br></br>
  <div class="clockHolder">
        <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
        <a href="jClocksGMT-master/images/clock_face.png"><span class="rotatingWrapper"><img src="jClocksGMT-master/images/clock_hour.png" width="100" height="100" class="hour" /><img src="jClocksGMT-master/images/clock_min.png" width="100" height="100" class="min" /><img src="jClocksGMT-master/images/clock_sec.png" width="100" height="100" class="sec" /></span><img src="jClocksGMT-master/images/clock_face.png" width="100" height="100" class="clock" /></a></div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span> <span class="period"></span>    </div>
</div>
</div>
<div id="clock_dc" class="clock_container">
    <div class="lbl style2">Washington, DC, USA</div>
  <br></br>
  <div class="clockHolder">
        <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
        <a href="jClocksGMT-master/images/clock_face.png"><span class="rotatingWrapper"><img src="jClocksGMT-master/images/clock_hour.png" width="100" height="100" class="hour" /><img src="jClocksGMT-master/images/clock_min.png" width="100" height="100" class="min" /><img src="jClocksGMT-master/images/clock_sec.png" width="100" height="100" class="sec" /></span><img src="jClocksGMT-master/images/clock_face.png" width="100" height="100" class="clock" /></a></div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span> <span class="period"></span>    </div>
</div>
</div>
<div id="clock_sd" class="clock_container">
    <div class="lbl style2">San Diego, California, USA</div>
  <br></br> 
  <div class="clockHolder">
        <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
      <div class="rotatingWrapper"></div>
        <a href="jClocksGMT-master/images/clock_face.png"><span class="rotatingWrapper"><img src="jClocksGMT-master/images/clock_hour.png" width="100" height="100" class="hour" /><img src="jClocksGMT-master/images/clock_min.png" width="100" height="100" class="min" /></span><a href="jClocksGMT-master/images/clock_face.png"><span class="rotatingWrapper"><img src="jClocksGMT-master/images/clock_sec.png" width="100" height="100" class="sec" /></span></a><img src="jClocksGMT-master/images/clock_face.png" width="100" height="100" class="clock" /></div> 
    <div class="digital">
        <span class="hr"></span><span class="minute"></span> <span class="period"></span>    </div>
</div>

<!--end HTML for clocks-->



</body>
</html>



Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,870
  • Joined: 12-December 12

Re: jQuery plugin World Timeclocks

Posted 30 July 2014 - 02:51 AM

You are still linking to the (attached) scripts as well as including the entire scripts within the page. You need to do one or the other.

But this code:
$("#clock_dc").jClocksGMT(...

is running before this element is available (has been loaded) on the page - there will be errors in your browser's console. Move this script to the end of the page, before the closing body-tag.
Was This Post Helpful? 0
  • +
  • -

#8 Quang Pham  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 74
  • Joined: 18-November 12

Re: jQuery plugin World Timeclocks

Posted 30 July 2014 - 06:05 PM

Dear fellow programmers,

thank you for your replies. i finally got the worlD time clocks to work and posted at my webpage www. captaincleanlaundry.com . however i still have an HTMl question. How do I center the clocks and get them within the border? thanks for any help.
yours turly,

quang pham

This post has been edited by andrewsw: 31 July 2014 - 03:16 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1