├── screenshot.png ├── images ├── clock.psd ├── favicon.png ├── screenshot.png ├── jcgmt-1-clock_face.png ├── jcgmt-1-clock_hour.png ├── jcgmt-1-clock_min.png ├── jcgmt-1-clock_sec.png ├── jcgmt-2-clock_face.png ├── jcgmt-2-clock_hour.png ├── jcgmt-2-clock_min.png ├── jcgmt-2-clock_sec.png ├── jcgmt-3-clock_face.png ├── jcgmt-3-clock_hour.png ├── jcgmt-3-clock_min.png ├── jcgmt-3-clock_sec.png ├── jcgmt-4-clock_face.png ├── jcgmt-4-clock_hour.png ├── jcgmt-4-clock_min.png ├── jcgmt-4-clock_sec.png ├── jcgmt-5-clock_face.png ├── jcgmt-5-clock_hour.png ├── jcgmt-5-clock_min.png ├── jcgmt-5-clock_sec.png └── jcgmt-clock_label.png ├── screenshot-2.png ├── screenshot-2-lg.png ├── .gitattributes ├── css └── jClocksGMT.css ├── index.html ├── .gitignore ├── README.md └── js ├── jquery.rotate.js └── jClocksGMT.js /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/screenshot.png -------------------------------------------------------------------------------- /images/clock.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/clock.psd -------------------------------------------------------------------------------- /screenshot-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/screenshot-2.png -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/favicon.png -------------------------------------------------------------------------------- /screenshot-2-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/screenshot-2-lg.png -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/screenshot.png -------------------------------------------------------------------------------- /images/jcgmt-1-clock_face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-1-clock_face.png -------------------------------------------------------------------------------- /images/jcgmt-1-clock_hour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-1-clock_hour.png -------------------------------------------------------------------------------- /images/jcgmt-1-clock_min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-1-clock_min.png -------------------------------------------------------------------------------- /images/jcgmt-1-clock_sec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-1-clock_sec.png -------------------------------------------------------------------------------- /images/jcgmt-2-clock_face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-2-clock_face.png -------------------------------------------------------------------------------- /images/jcgmt-2-clock_hour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-2-clock_hour.png -------------------------------------------------------------------------------- /images/jcgmt-2-clock_min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-2-clock_min.png -------------------------------------------------------------------------------- /images/jcgmt-2-clock_sec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-2-clock_sec.png -------------------------------------------------------------------------------- /images/jcgmt-3-clock_face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-3-clock_face.png -------------------------------------------------------------------------------- /images/jcgmt-3-clock_hour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-3-clock_hour.png -------------------------------------------------------------------------------- /images/jcgmt-3-clock_min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-3-clock_min.png -------------------------------------------------------------------------------- /images/jcgmt-3-clock_sec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-3-clock_sec.png -------------------------------------------------------------------------------- /images/jcgmt-4-clock_face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-4-clock_face.png -------------------------------------------------------------------------------- /images/jcgmt-4-clock_hour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-4-clock_hour.png -------------------------------------------------------------------------------- /images/jcgmt-4-clock_min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-4-clock_min.png -------------------------------------------------------------------------------- /images/jcgmt-4-clock_sec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-4-clock_sec.png -------------------------------------------------------------------------------- /images/jcgmt-5-clock_face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-5-clock_face.png -------------------------------------------------------------------------------- /images/jcgmt-5-clock_hour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-5-clock_hour.png -------------------------------------------------------------------------------- /images/jcgmt-5-clock_min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-5-clock_min.png -------------------------------------------------------------------------------- /images/jcgmt-5-clock_sec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-5-clock_sec.png -------------------------------------------------------------------------------- /images/jcgmt-clock_label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mcmastermind/jClocksGMT/HEAD/images/jcgmt-clock_label.png -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /css/jClocksGMT.css: -------------------------------------------------------------------------------- 1 | .jcgmt-container { 2 | float:left; 3 | padding: 3px; 4 | } 5 | .jcgmt-container .jcgmt-lbl { 6 | font-size:10px; 7 | color: #333333; 8 | line-height: 22px; 9 | background: url(../images/jcgmt-clock_label.png) no-repeat; 10 | text-align: center; 11 | padding-bottom: 5px; 12 | width: 108px; 13 | margin: 0 auto; 14 | } 15 | .jcgmt-clockHolder { 16 | width:100px; 17 | margin:0 auto; 18 | position:relative; 19 | overflow: hidden; 20 | } 21 | .jcgmt-sec, 22 | .jcgmt-min, 23 | .jcgmt-hour { 24 | display:block; 25 | position:absolute; 26 | } 27 | 28 | .jcgmt-rotatingWrapper { 29 | position:absolute; 30 | width:100px; 31 | height:100px; 32 | } 33 | .jcgmt-digital, 34 | .jcgmt-date { 35 | font-weight:bold; 36 | font-size: 12px; 37 | color: #444444; 38 | text-align:center; 39 | margin-left:8px; 40 | } 41 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jClocksGMT v. 2.0 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .metadata 8 | bin/ 9 | tmp/ 10 | *.tmp 11 | *.bak 12 | *.swp 13 | *~.nib 14 | local.properties 15 | .classpath 16 | .settings/ 17 | .loadpath 18 | 19 | # External tool builders 20 | .externalToolBuilders/ 21 | 22 | # Locally stored "Eclipse launch configurations" 23 | *.launch 24 | 25 | # CDT-specific 26 | .cproject 27 | 28 | # PDT-specific 29 | .buildpath 30 | 31 | 32 | ################# 33 | ## Visual Studio 34 | ################# 35 | 36 | ## Ignore Visual Studio temporary files, build results, and 37 | ## files generated by popular Visual Studio add-ons. 38 | 39 | # User-specific files 40 | *.suo 41 | *.user 42 | *.sln.docstates 43 | 44 | # Build results 45 | [Dd]ebug/ 46 | [Rr]elease/ 47 | *_i.c 48 | *_p.c 49 | *.ilk 50 | *.meta 51 | *.obj 52 | *.pch 53 | *.pdb 54 | *.pgc 55 | *.pgd 56 | *.rsp 57 | *.sbr 58 | *.tlb 59 | *.tli 60 | *.tlh 61 | *.tmp 62 | *.vspscc 63 | .builds 64 | *.dotCover 65 | 66 | ## TODO: If you have NuGet Package Restore enabled, uncomment this 67 | #packages/ 68 | 69 | # Visual C++ cache files 70 | ipch/ 71 | *.aps 72 | *.ncb 73 | *.opensdf 74 | *.sdf 75 | 76 | # Visual Studio profiler 77 | *.psess 78 | *.vsp 79 | 80 | # ReSharper is a .NET coding add-in 81 | _ReSharper* 82 | 83 | # Installshield output folder 84 | [Ee]xpress 85 | 86 | # DocProject is a documentation generator add-in 87 | DocProject/buildhelp/ 88 | DocProject/Help/*.HxT 89 | DocProject/Help/*.HxC 90 | DocProject/Help/*.hhc 91 | DocProject/Help/*.hhk 92 | DocProject/Help/*.hhp 93 | DocProject/Help/Html2 94 | DocProject/Help/html 95 | 96 | # Click-Once directory 97 | publish 98 | 99 | # Others 100 | [Bb]in 101 | [Oo]bj 102 | sql 103 | TestResults 104 | *.Cache 105 | ClientBin 106 | stylecop.* 107 | ~$* 108 | *.dbmdl 109 | Generated_Code #added for RIA/Silverlight projects 110 | 111 | # Backup & report files from converting an old project file to a newer 112 | # Visual Studio version. Backup files are not needed, because we have git ;-) 113 | _UpgradeReport_Files/ 114 | Backup*/ 115 | UpgradeLog*.XML 116 | 117 | 118 | 119 | ############ 120 | ## Windows 121 | ############ 122 | 123 | # Windows image file caches 124 | Thumbs.db 125 | 126 | # Folder config file 127 | Desktop.ini 128 | 129 | 130 | ############# 131 | ## Python 132 | ############# 133 | 134 | *.py[co] 135 | 136 | # Packages 137 | *.egg 138 | *.egg-info 139 | dist 140 | build 141 | eggs 142 | parts 143 | bin 144 | var 145 | sdist 146 | develop-eggs 147 | .installed.cfg 148 | 149 | # Installer logs 150 | pip-log.txt 151 | 152 | # Unit test / coverage reports 153 | .coverage 154 | .tox 155 | 156 | #Translations 157 | *.mo 158 | 159 | #Mr Developer 160 | .mr.developer.cfg 161 | 162 | # Mac crap 163 | .DS_Store 164 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jClocksGMT 2.0 2 | ================================ 3 | 4 | jQuery based analog and digital clock(s). 5 | 6 | ##What is jClocksGMT? 7 | 8 | jClocksGMT is a jQuery analog and digital clock(s) plugin based on GMT offsets. Now supporting automatic daylight saving time conversions for affected timezones. Requires jQuery Rotate plugin. 9 | 10 | ##Features 11 | 12 | - Analog Clock 13 | - Digital Clock 14 | - Date Display 15 | - 5 Clock Skins 16 | - jQuery Rotate 17 | - Custom time formats 18 | - Custom date formats 19 | - GMT Timezone Offsets 20 | - Automatic Daylight Saving Time conversion on affected timezones 21 | - Easy CSS customization 22 | - Easy image customization 23 | 24 | ###Compatibility 25 | 26 | Chrome, Safari, Firefox, Opera, IE7+, IOS4+, Android, windows phone. 27 | 28 | ##Usage 29 | 30 | ####Javascript 31 | 32 | Include jquery and the jClocksGMT script in your head tags or right before your body closing tag. 33 | 34 | ```html 35 | 36 | 37 | 38 | ``` 39 | 40 | ####CSS 41 | 42 | Include the jClocksGMT CSS style in your head tags. 43 | 44 | ```html 45 | 46 | ``` 47 | 48 | ####HTML 49 | 50 | Use the following markup for your clock. 51 | 52 | ```html 53 |
54 | ``` 55 | 56 | ####Fire the plugin 57 | 58 | Bind the jClocksGMT behaviour on every link with any id or class. 59 | 60 | ```js 61 | $('#clock_hou').jClocksGMT({ title: 'Houston, TX, USA', offset: '-6', skin: 2 }); 62 | ``` 63 | 64 | ###Documentation 65 | 66 | ####Default options: 67 | ```js 68 | title: 'Greenwich, England', // String: Title of location (defaults to Greenwich, England) 69 | offset: '0', // String: Set Standard GMT offset (+5.5, -4, 0, etc) (do not consider daylight savings time) 70 | dst: true, // Boolean: Does the location observe daylight savings time (set FALSE if location does not need to observe dst) 71 | digital: true, // Boolean: Display digital clock 72 | analog: true, // Boolean: Display analog clock 73 | timeformat: 'hh:mm A', // String: Time format (see below for formatting options) 74 | date: false, // Boolean: Display date 75 | dateformat: 'MM/DD/YYYY', // String: Date format (see below for formatting options) 76 | angleSec: 0, // Integer: Starting angle of second hand 77 | angleMin: 0, // Integer: Starting angle of minute hand 78 | angleHour: 0, // Integer: Starting angle of hour hand 79 | skin: 1 // Integer: Set 1 of 5 included skins for the analog clock 80 | ``` 81 | 82 | ####Common offsets by time zone: 83 | (only use the number after GMT: GMT-2 = offset: '-2' Daylight Saving Time converted automatically) 84 | 85 | 86 | | OFFEST | LOCATION | 87 | |:---------|:------------| 88 | | `GMT-12` | Eniwetok | 89 | | `GMT-11` | Samoa| 90 | | `GMT-10` | Hawaii| 91 | | `GMT-9` | Alaska| 92 | | `GMT-8` | PST, Pacific US | 93 | | `GMT-7` | MST, Mountain US| 94 | | `GMT-6` | CST, Central US| 95 | | `GMT-5` | EST, Eastern US| 96 | | `GMT-4` | Atlantic, Canada| 97 | | `GMT-3` | Brazilia, Buenos Aries| 98 | | `GMT-2` | Mid-Atlantic| 99 | | `GMT-1` | Cape Verdes| 100 | | `GMT 0` | Greenwich Mean Time| 101 | | `GMT+1` | Berlin, Rome| 102 | | `GMT+2` | Israel, Cairo| 103 | | `GMT+3` | Moscow, Kuwait| 104 | | `GMT+7` | Abu Dhabi, Muscat| 105 | | `GMT+5` | Islamabad, Karachi| 106 | | `GMT+6` | Almaty, Dhaka| 107 | | `GMT+7` | Bangkok, Jakarta| 108 | | `GMT+8` | Hong Kong, Beijing| 109 | | `GMT+9` | Tokyo, Osaka| 110 | | `GMT+10` | Sydney, Melbourne, Guam| 111 | | `GMT+11` | Magadan, Soloman Is.| 112 | | `GMT+12` | Fiji, Wellington, Auckland| 113 | 114 | To find specific GMT offsets, 115 | 116 | goto: http://www.timeanddate.com/time/zone/ 117 | 118 | search: location 119 | 120 | use: Current Offset 121 | 122 | if location is currently observing DST, add 1 to offset 123 | 124 | ####Time Formatting: 125 | 126 | | FORMAT | OUTPUT | MEANING | 127 | |----------|:-------------:|:------| 128 | | `HH` | `19` | 24-hour format of hour with leading zero (two digits long). | 129 | | `hh` | `07` | 12-hour format of hour with leading zero (two digits long). | 130 | | `H` | `19` | 24-hour format of hour without leading zeros. | 131 | | `h` | `7` | 12-hour format of hour without leading zeros. | 132 | | `mm` | `01` | Minutes with the leading zero (two digits long). | 133 | | `m` | `1` | Minutes without the leading zero. | 134 | | `ss` | `08` | Seconds with the leading zero (two digits long). | 135 | | `s` | `8` | Seconds without the leading zero. | 136 | | `a` | `pm` | Lowercase am or pm. | 137 | | `A` | `PM` | Uppercase am or pm. | 138 | | `SSS` | `095` | Milliseconds with leading zeros (three digits long). | 139 | | `S` | `95` | Milliseconds without leading zeros. | 140 | 141 | ####Date Formatting: 142 | 143 | | FORMAT | OUTPUT | MEANING | 144 | |----------|:-------------:|:------| 145 | | `YYYY` | `2016` | Four-digit representation of the year. | 146 | | `YY` | `16` | Two-digit representation of the year. | 147 | | `MMMM` | `April` | Full textual representation of the month. | 148 | | `MMM` | `Apr` | Three letter representation of the month. | 149 | | `MM` | `04` | Month with the leading zero (two digits long). | 150 | | `M` | `4` | Month without the leading zero. | 151 | | `DDDD` | `Friday` | Full textual representation of the day of the week. | 152 | | `DDD` | `Fri` | Three letter representation of the day of the week. | 153 | | `DD` | `01` | Day of the month with leading zero (two digits long). | 154 | | `D` | `1` | Day of the month without leading zero. | 155 | 156 | ## Creator 157 | 158 | **Richard McMaster** 159 | 160 | + [http://kingkode.com](http://kingkode.com) 161 | + [http://twitter.com/_kingkode](http://twitter.com/_kingkode) 162 | 163 | ## License 164 | 165 | jClocksGMT is available under the MIT license. 166 | 167 | -------------------------------------------------------------------------------- /js/jquery.rotate.js: -------------------------------------------------------------------------------- 1 | // VERSION: 2.3 LAST UPDATE: 11.07.2013 2 | /* 3 | * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php 4 | * 5 | * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009 6 | * Website: http://jqueryrotate.com 7 | */ 8 | 9 | (function($) { 10 | var supportedCSS,supportedCSSOrigin, styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); 11 | for (var a = 0; a < toCheck.length; a++) if (styles[toCheck[a]] !== undefined) { supportedCSS = toCheck[a]; } 12 | if (supportedCSS) { 13 | supportedCSSOrigin = supportedCSS.replace(/[tT]ransform/,"TransformOrigin"); 14 | if (supportedCSSOrigin[0] == "T") supportedCSSOrigin[0] = "t"; 15 | } 16 | 17 | // Bad eval to preven google closure to remove it from code o_O 18 | eval('IE = "v"=="\v"'); 19 | 20 | jQuery.fn.extend({ 21 | rotate:function(parameters) 22 | { 23 | if (this.length===0||typeof parameters=="undefined") return; 24 | if (typeof parameters=="number") parameters={angle:parameters}; 25 | var returned=[]; 26 | for (var i=0,i0=this.length;i this._parameters.duration; 251 | 252 | // TODO: Bug for animatedGif for static rotation ? (to test) 253 | if (checkEnd && !this._parameters.animatedGif) 254 | { 255 | clearTimeout(this._timer); 256 | } 257 | else 258 | { 259 | if (this._canvas||this._vimage||this._img) { 260 | var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); 261 | this._rotate((~~(angle*10))/10); 262 | } 263 | if (this._parameters.step) { 264 | this._parameters.step(this._angle); 265 | } 266 | var self = this; 267 | this._timer = setTimeout(function() 268 | { 269 | self._animate.call(self); 270 | }, 10); 271 | } 272 | 273 | // To fix Bug that prevents using recursive function in callback I moved this function to back 274 | if (this._parameters.callback && checkEnd){ 275 | this._angle = this._parameters.animateTo; 276 | this._rotate(this._angle); 277 | this._parameters.callback.call(this._rootObj); 278 | } 279 | }, 280 | 281 | _rotate : (function() 282 | { 283 | var rad = Math.PI/180; 284 | if (IE) 285 | return function(angle) 286 | { 287 | this._angle = angle; 288 | this._container.style.rotation=(angle%360)+"deg"; 289 | this._vimage.style.top = -(this._rotationCenterY - this._imgHeight/2) + "px"; 290 | this._vimage.style.left = -(this._rotationCenterX - this._imgWidth/2) + "px"; 291 | this._container.style.top = this._rotationCenterY - this._imgHeight/2 + "px"; 292 | this._container.style.left = this._rotationCenterX - this._imgWidth/2 + "px"; 293 | 294 | } 295 | else if (supportedCSS) 296 | return function(angle){ 297 | this._angle = angle; 298 | this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)"; 299 | this._img.style[supportedCSSOrigin]=this._parameters.center.join(" "); 300 | } 301 | else 302 | return function(angle) 303 | { 304 | this._angle = angle; 305 | angle=(angle%360)* rad; 306 | // clear canvas 307 | this._canvas.width = this._width;//+this._widthAdd; 308 | this._canvas.height = this._height;//+this._heightAdd; 309 | 310 | // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate.. 311 | this._cnv.translate(this._imgWidth*this._aspectW,this._imgHeight*this._aspectH); // at least center image on screen 312 | this._cnv.translate(this._rotationCenterX,this._rotationCenterY); // we move image back to its orginal 313 | this._cnv.rotate(angle); // rotate image 314 | this._cnv.translate(-this._rotationCenterX,-this._rotationCenterY); // move image to its center, so we can rotate around its center 315 | this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;) 316 | this._cnv.drawImage(this._img, 0, 0); // First - we draw image 317 | } 318 | 319 | })() 320 | } 321 | 322 | if (IE) 323 | { 324 | Wilq32.PhotoEffect.prototype.createVMLNode=(function(){ 325 | document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); 326 | try { 327 | !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); 328 | return function (tagName) { 329 | return document.createElement(''); 330 | }; 331 | } catch (e) { 332 | return function (tagName) { 333 | return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); 334 | }; 335 | } 336 | })(); 337 | } 338 | 339 | })(jQuery); -------------------------------------------------------------------------------- /js/jClocksGMT.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************************************************************************************************** 2 | * _ ________ __ ________ _________ 3 | * (_) ____/ /___ _____/ /_______/ ____/ |/ /_ __/ 4 | * / / / / / __ \/ ___/ //_/ ___/ / __/ /|_/ / / / 5 | * / / /___/ / /_/ / /__/ ,< (__ ) /_/ / / / / / / 6 | * __/ /\____/_/\____/\___/_/|_/____/\____/_/ /_/ /_/ 7 | * /___/ 8 | * 9 | * NAME: jClocksGMT.js 10 | * VERSION: 2.0.2 11 | * LAST UPDATE: 2016.04.26 12 | * 13 | * Author Information: 14 | * Name: Richard McMaster 15 | * Email: r@kingkode.com 16 | * Location: Houston, Texas, United States 17 | * Website: http://kingkode.com/jclocksgmt-js/ 18 | * __ _ __ __ 19 | * / /__(_)___ ____ _/ /______ ____/ /__ 20 | * / //_/ / __ \/ __ `/ //_/ __ \/ __ / _ \ 21 | * / ,< / / / / / /_/ / ,< / /_/ / /_/ / __/ 22 | * /_/|_/_/_/ /_/\__, /_/|_|\____/\__,_/\___/ 23 | * /____/ 24 | * 25 | * Plugin Website: http://www.github.com/mcmastermind/jClocksGMT 26 | * 27 | * Change Log: 28 | * 2.0.2: Fixed digital only display 29 | * 2.0.1: Added image path parameter for images not in plugin directory 30 | * 2.0: Complete overhaul of code for increased accuracy and stability 31 | * - NEW! 5 clock skins to choose from 32 | * - NEW! Timestamp formatting options 33 | * - NEW! Date display with formatting options 34 | * - NEW! DST parameter for those locations that do not observe DST 35 | * - Addressed international DST issues 36 | * - Minimized initial markup 37 | * - Unique class names to avoid common class declarations 38 | * 1.2: Fixed severely flawed Daylight Saving Time calculation 39 | * 1.1: Added automatic Daylight Saving Time calculation 40 | * 41 | * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php 42 | * 43 | * Description: 44 | * jQuery based analog and digital clock(s) using GMT offsets. Requires jQuery Rotate plugin. 45 | * 46 | * Documentation: 47 | * Default options: 48 | * title: 'Greenwich, England', String: Title of location (defaults to Greenwich, England) 49 | * offset: '0', String: Set Standard GMT offset (+5.5, -4, 0, etc) (do not consider daylight savings time) 50 | * dst: true, Boolean: Does the location observe daylight savings time (set FALSE if location does not need to observe dst ) 51 | * digital: true, Boolean: Display digital clock 52 | * analog: true, Boolean: Display analog clock 53 | * timeformat: 'hh:mm A', String: Time format (see below for formatting options) 54 | * date: false, Boolean: Display date 55 | * dateformat: 'MM/DD/YYYY', String: Date format (see below for formatting options) 56 | * angleSec: 0, Integer: Starting angle of second hand 57 | * angleMin: 0, Integer: Starting angle of minute hand 58 | * angleHour: 0, Integer: Starting angle of hour hand 59 | * skin: 1, Integer: Set 1 of 5 included skins for the analog clock 60 | * imgpath: '' String: Set path of images 61 | * 62 | * Common offsets by time zone: (only use the number after GMT: GMT-2 = offset: '-2' 63 | * Daylight Saving Time converted automatically) 64 | * GMT-12 Eniwetok 65 | * GMT-11 Samoa 66 | * GMT-10 Hawaii 67 | * GMT-9 Alaska 68 | * GMT-8 PST, Pacific US 69 | * GMT-7 MST, Mountain US 70 | * GMT-6 CST, Central US 71 | * GMT-5 EST, Eastern US 72 | * GMT-4 Atlantic, Canada 73 | * GMT-3 Brazilia, Buenos Aries 74 | * GMT-2 Mid-Atlantic 75 | * GMT-1 Cape Verdes 76 | * GMT 0 Greenwich Mean Time 77 | * GMT+1 Berlin, Rome 78 | * GMT+2 Israel, Cairo 79 | * GMT+3 Moscow, Kuwait 80 | * GMT+4 Abu Dhabi, Muscat 81 | * GMT+5 Islamabad, Karachi 82 | * GMT+6 Almaty, Dhaka 83 | * GMT+7 Bangkok, Jakarta 84 | * GMT+8 Hong Kong, Beijing 85 | * GMT+9 Tokyo, Osaka 86 | * GMT+10 Sydney, Melbourne, Guam 87 | * GMT+11 Magadan, Soloman Is. 88 | * GMT+12 Fiji, Wellington, Auckland 89 | * 90 | * To find specific GMT offsets, 91 | * goto: http://www.timeanddate.com/time/zone/ 92 | * search: location 93 | * use: Current Offset 94 | * if location is currently observing DST, add 1 to offset 95 | * 96 | * Time Formatting: 97 | * HH 19 24-hour format of hour with leading zero (two digits long). 98 | * hh 07 12-hour format of hour with leading zero (two digits long). 99 | * H 19 24-hour format of hour without leading zeros. 100 | * h 7 12-hour format of hour without leading zeros. 101 | * mm 01 Minutes with the leading zero (two digits long). 102 | * m 1 Minutes without the leading zero. 103 | * ss 08 Seconds with the leading zero (two digits long). 104 | * s 8 Seconds without the leading zero. 105 | * a pm Lowercase am or pm. 106 | * A PM Uppercase AM or PM. 107 | * SSS 095 Milliseconds with leading zeros (three digits long). 108 | * S 95 Milliseconds without leading zeros. 109 | * 110 | * Date Formatting: 111 | * YYYY 2016 Four-digit representation of the year. 112 | * YY 16 Two-digit representation of the year. 113 | * MMMM April Full textual representation of the month. 114 | * MMM Apr Three letter representation of the month. 115 | * MM 04 Month with the leading zero (two digits long). 116 | * M 4 Month without the leading zero. 117 | * DDDD Friday Full textual representation of the day of the week. 118 | * DDD Fri Three letter representation of the day of the week. 119 | * DD 01 Day of the month with leading zero (two digits long). 120 | * D 1 Day of the month without leading zeros. 121 | * 122 | * Initialization: 123 | * Javascript: 124 | * $('#clock_hou').jClocksGMT({ title: 'Houston, TX, USA', offset: '-6', skin: 2 }); 125 | * Markup: 126 | *
127 | * 128 | **************************************************************************************************************************************************************/ 129 | 130 | (function($) { 131 | 132 | $.fn.extend({ 133 | 134 | jClocksGMT: function( options ) 135 | { 136 | // plugin default options 137 | var defaults = 138 | { 139 | title: 'Greenwich, England', 140 | offset: '0', 141 | dst: true, 142 | digital: true, 143 | analog: true, 144 | timeformat: 'hh:mm A', 145 | date: false, 146 | dateformat: 'MM/DD/YYYY', 147 | angleSec: 0, 148 | angleMin: 0, 149 | angleHour: 0, 150 | skin: 1, 151 | imgpath: '' 152 | } 153 | 154 | // merge user options with defaults 155 | var options = $.extend(defaults, options); 156 | 157 | return this.each(function() 158 | { 159 | // set offset variable per instance 160 | var offset = parseFloat(options.offset); 161 | // get id of element 162 | var id = $(this).attr('id'); 163 | 164 | // add class to main element 165 | $(this).addClass('jcgmt-container'); 166 | 167 | // create label 168 | $("
", { text: options.title, class: "jcgmt-lbl" }).appendTo("#" + id); 169 | 170 | if( options.analog ) 171 | { 172 | // create clock container 173 | $("
", { class: "jcgmt-clockHolder" }).appendTo("#" + id); 174 | // create hour hand 175 | $("
", { class: "jcgmt-rotatingWrapper" }).append($("", { class: "jcgmt-hour", src: options.imgpath + "images/jcgmt-" + options.skin + "-clock_hour.png" })).appendTo("#" + id + ' .jcgmt-clockHolder'); 176 | // create min hand 177 | $("
", { class: "jcgmt-rotatingWrapper" }).append($("", { class: "jcgmt-min", src: options.imgpath + "images/jcgmt-" + options.skin + "-clock_min.png" })).appendTo("#" + id + ' .jcgmt-clockHolder'); 178 | // create sec hand 179 | $("
", { class: "jcgmt-rotatingWrapper" }).append($("", { class: "jcgmt-sec", src: options.imgpath + "images/jcgmt-" + options.skin + "-clock_sec.png" })).appendTo("#" + id + ' .jcgmt-clockHolder'); 180 | // create clock face 181 | $("", { class: "jcgmt-clock", src: options.imgpath + 'images/jcgmt-' + options.skin + '-clock_face.png' }).appendTo("#" + id + ' .jcgmt-clockHolder'); 182 | } 183 | 184 | // create digital clock container 185 | $("
", { class: "jcgmt-digital" }).appendTo("#" + id); 186 | 187 | //create date container 188 | $("
", { class: "jcgmt-date" }).appendTo("#" + id); 189 | 190 | // initial hand rotation 191 | $('#' + id + ' .jcgmt-sec').rotate( options.angleSec ); 192 | $('#' + id + ' .jcgmt-min').rotate( options.angleMin ); 193 | $('#' + id + ' .jcgmt-hour').rotate( options.angleHour ); 194 | 195 | // get timezone by gmt offset 196 | Date.prototype.getTimezoneByOffset = function( offset, y, m, d ) 197 | { 198 | var date = new Date; // get date 199 | 200 | if( y ) // if has date params 201 | { 202 | date = new Date( y, m, d ); // get date with params 203 | } 204 | 205 | var utc = date.getTime() + ( date.getTimezoneOffset() * 60000 ); // get local offset 206 | 207 | var dateGMT = new Date( utc + ( 3600000 * offset ) ); // get requested offset based on local 208 | 209 | return dateGMT; 210 | } 211 | 212 | // check if daylight saving time is in effect 213 | Date.prototype.stdTimezoneOffset = function() 214 | { 215 | var jan = this.getTimezoneByOffset( offset, this.getFullYear(), 0, 1 ); 216 | 217 | var jul = this.getTimezoneByOffset( offset, this.getFullYear(), 6, 1 ); 218 | 219 | return Math.max( jan.getTimezoneOffset(), jul.getTimezoneOffset() ); 220 | } 221 | 222 | // checkes if DST is in effect 223 | Date.prototype.isDST = function() 224 | { 225 | var date = this.getTimezoneByOffset(offset); 226 | 227 | return date.getTimezoneOffset() < this.stdTimezoneOffset(); 228 | } 229 | 230 | // date formatter 231 | Date.prototype.format = function( format ) 232 | { 233 | var D = "Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday".split(","), 234 | M = "January,February,March,April,May,June,July,August,September,October,November,December".split(","); 235 | 236 | var self = this; 237 | return format.replace(/a|A|Z|S(SS)?|ss?|mm?|HH?|hh?|D{1,4}|M{1,4}|YY(YY)?|'([^']|'')*'/g, function(str) { 238 | var c1 = str.charAt(0), 239 | ret = str.charAt(0) == "'" 240 | ? (c1=0) || str.slice(1, -1).replace(/''/g, "'") 241 | : str == "a" 242 | ? (self.getHours() < 12 ? "am" : "pm") 243 | : str == "A" 244 | ? (self.getHours() < 12 ? "AM" : "PM") 245 | : str == "Z" 246 | ? (("+" + -self.getTimezoneOffset() / 60).replace(/^\D?(\D)/, "$1").replace(/^(.)(.)$/, "$10$2") + "00") 247 | : c1 == "S" 248 | ? self.getMilliseconds() 249 | : c1 == "s" 250 | ? self.getSeconds() 251 | : c1 == "H" 252 | ? self.getHours() 253 | : c1 == "h" 254 | ? (self.getHours() % 12) || 12 255 | : (c1 == "D" && str.length > 2) 256 | ? D[self.getDay()].slice(0, str.length > 3 ? 9 : 3) 257 | : c1 == "D" 258 | ? self.getDate() 259 | : (c1 == "M" && str.length > 2) 260 | ? M[self.getMonth()].slice(0, str.length > 3 ? 9 : 3) 261 | : c1 == "m" 262 | ? self.getMinutes() 263 | : c1 == "M" 264 | ? self.getMonth() + 1 265 | : ("" + self.getFullYear()).slice(-str.length); 266 | return c1 && str.length < 4 && ("" + ret).length < str.length 267 | ? ("00" + ret).slice(-str.length) 268 | : ret; 269 | }); 270 | } 271 | 272 | // create new date object 273 | var dateCheck = new Date().getTimezoneByOffset( offset ); 274 | 275 | // check for DST 276 | if( options.dst && dateCheck.isDST() ) 277 | { 278 | offset = offset + 1; 279 | } 280 | 281 | // clock interval 282 | setInterval(function () 283 | { 284 | // create new date object 285 | var nd = new Date().getTimezoneByOffset( offset ); 286 | 287 | // time string variable 288 | var timeStr = nd.format( options.timeformat ); 289 | 290 | // update analog clock if enabled 291 | if( options.analog ) 292 | { 293 | // rotate second hand 294 | $('#' + id + ' .jcgmt-sec').rotate( nd.getSeconds() * 6 ); 295 | // rotate minute hand 296 | $('#' + id + ' .jcgmt-min').rotate( nd.getMinutes() * 6 ) ; 297 | // rotate hour hand 298 | $('#' + id + ' .jcgmt-hour').rotate( ( nd.getHours() * 5 + nd.getMinutes() / 12 ) * 6 ); 299 | 300 | // update title for tooltip 301 | $('#' + id + ' .jcgmt-clockHolder').attr( 'title', timeStr ); 302 | } 303 | 304 | // update digital clock if enabled 305 | if( options.digital ) 306 | { 307 | $('#' + id + ' .jcgmt-digital').html( timeStr ); 308 | $('#' + id + ' .jcgmt-digital').attr( 'title', timeStr ); 309 | } 310 | 311 | // update date if enabled 312 | if( options.date ) 313 | { 314 | var dateStamp = nd.format( options.dateformat ); 315 | $('#' + id + ' .jcgmt-date').html( dateStamp ); 316 | $('#' + id + ' .jcgmt-date').attr( 'title', dateStamp ); 317 | } 318 | 319 | }, 1000); 320 | 321 | }); 322 | 323 | } 324 | 325 | }); 326 | 327 | })(jQuery); 328 | --------------------------------------------------------------------------------