widget structure improvised…
This commit is contained in:
Harry Bomrah committed
1 parent
fcc875bb5d
commit
2083e0bf4f
46 files changed
+54
-338
No files matched your search
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
+6
-6
@@ -51,16 +51,16 @@
|
||||
.clock .bg.left{ left:0px; }
|
||||
|
||||
/* Individual styles for each color: */
|
||||
.orange .bg.left{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat left top; }
|
||||
.green .bg.left{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat left top; }
|
||||
.blue .bg.left{ background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat left top; }
|
||||
.orange .bg.left{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_orange.png) no-repeat left top; }
|
||||
.green .bg.left{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_green.png) no-repeat left top; }
|
||||
.blue .bg.left{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_blue.png) no-repeat left top; }
|
||||
|
||||
/* The right part of the background: */
|
||||
.clock .bg.right{ left:37.5px; }
|
||||
|
||||
.orange .bg.right{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat right top; }
|
||||
.green .bg.right{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat right top; }
|
||||
.blue .bg.right{ background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat right top; }
|
||||
.orange .bg.right{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_orange.png) no-repeat right top; }
|
||||
.green .bg.right{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_green.png) no-repeat right top; }
|
||||
.blue .bg.right{ background:url(desktop_widgets/4fa7810ac88514014d7c59bc/img/bg_blue.png) no-repeat right top; }
|
||||
|
||||
|
||||
.clock .front.left{
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
+1
-1
@@ -22,7 +22,7 @@ input {
|
||||
</style>
|
||||
<center>
|
||||
<form id="search">
|
||||
<img src="desktop_widgets/googlesearch/img/google_64.png" style='margin-right:10px;'><br />
|
||||
<img src="desktop_widgets/4fa78140c88514014d7c59be/img/google_64.png" style='margin-right:10px;'><br />
|
||||
<input id="googlesearch">
|
||||
<input type="submit" style="display:none;">
|
||||
<br>
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
var eventsjson = new Array;
|
||||
var loadEvents = function(){
|
||||
$.getJSON(o.widgetfolder+"/school_events/events.json",function(events){
|
||||
$.getJSON(o.widgetfolder+"/4fa78153c88514014d7c59bf/events.json",function(events){
|
||||
$.each(events,function(i,event){
|
||||
eventsjson.push(event);
|
||||
})
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
+1
-1
@@ -28,7 +28,7 @@
|
||||
</style>
|
||||
<div class="g_weather">
|
||||
<div class="gw_recent">
|
||||
<img src="desktop_widgets/weather/img/sunny.png" alt="sunny" class="gw_condition">
|
||||
<img src="desktop_widgets/4fa7817cc88514014d7c59c2/img/sunny.png" alt="sunny" class="gw_condition">
|
||||
<div class="gw_temp">
|
||||
<span class="gw_temp_num thmtxt">29</span><span class="gw_temp_unit thmtxt">°C</span>
|
||||
</div>
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -1,171 +0,0 @@
|
||||
/*!
|
||||
* jquery.tzineClock.js - Tutorialzine Colorful Clock Plugin
|
||||
*
|
||||
* Copyright (c) 2009 Martin Angelov
|
||||
* http://tutorialzine.com/
|
||||
*
|
||||
* Licensed under MIT
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Launch : December 2009
|
||||
* Version : 1.0
|
||||
* Released: Monday 28th December, 2009 - 00:00
|
||||
*/
|
||||
|
||||
(function($){
|
||||
|
||||
// A global array used by the functions of the plug-in:
|
||||
var gVars = {};
|
||||
|
||||
// Extending the jQuery core:
|
||||
$.fn.tzineClock = function(opts){
|
||||
|
||||
// "this" contains the elements that were selected when calling the plugin: $('elements').tzineClock();
|
||||
// If the selector returned more than one element, use the first one:
|
||||
|
||||
var container = this.eq(0);
|
||||
|
||||
if(!container)
|
||||
{
|
||||
try{
|
||||
console.log("Invalid selector!");
|
||||
} catch(e){}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if(!opts) opts = {};
|
||||
|
||||
var defaults = {
|
||||
/* Additional options will be added in future versions of the plugin. */
|
||||
};
|
||||
|
||||
/* Merging the provided options with the default ones (will be used in future versions of the plugin): */
|
||||
$.each(defaults,function(k,v){
|
||||
opts[k] = opts[k] || defaults[k];
|
||||
})
|
||||
|
||||
// Calling the setUp function and passing the container,
|
||||
// will be available to the setUp function as "this":
|
||||
setUp.call(container);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
function setUp()
|
||||
{
|
||||
// The colors of the dials:
|
||||
var colors = ['orange','blue','green'];
|
||||
|
||||
var tmp;
|
||||
|
||||
for(var i=0;i<3;i++)
|
||||
{
|
||||
// Creating a new element and setting the color as a class name:
|
||||
|
||||
tmp = $('<div>').attr('class',colors[i]+' clock').html(
|
||||
'<div class="display"></div>'+
|
||||
|
||||
'<div class="front left"></div>'+
|
||||
|
||||
'<div class="rotate left">'+
|
||||
'<div class="bg left"></div>'+
|
||||
'</div>'+
|
||||
|
||||
'<div class="rotate right">'+
|
||||
'<div class="bg right"></div>'+
|
||||
'</div>'
|
||||
);
|
||||
|
||||
// Appending to the container:
|
||||
$(this).append(tmp);
|
||||
|
||||
// Assigning some of the elements as variables for speed:
|
||||
tmp.rotateLeft = tmp.find('.rotate.left');
|
||||
tmp.rotateRight = tmp.find('.rotate.right');
|
||||
tmp.display = tmp.find('.display');
|
||||
|
||||
// Adding the dial as a global variable. Will be available as gVars.colorName
|
||||
gVars[colors[i]] = tmp;
|
||||
}
|
||||
|
||||
// Setting up a interval, executed every 1000 milliseconds:
|
||||
setInterval(function(){
|
||||
|
||||
var currentTime = new Date();
|
||||
var h = currentTime.getHours();
|
||||
var m = currentTime.getMinutes();
|
||||
var s = currentTime.getSeconds();
|
||||
|
||||
animation(gVars.green, s, 60);
|
||||
animation(gVars.blue, m, 60);
|
||||
animation(gVars.orange, h, 24);
|
||||
|
||||
},1000);
|
||||
}
|
||||
|
||||
function animation(clock, current, total)
|
||||
{
|
||||
// Calculating the current angle:
|
||||
var angle = (360/total)*(current+1);
|
||||
|
||||
var element;
|
||||
|
||||
if(current==0)
|
||||
{
|
||||
// Hiding the right half of the background:
|
||||
clock.rotateRight.hide();
|
||||
|
||||
// Resetting the rotation of the left part:
|
||||
rotateElement(clock.rotateLeft,0);
|
||||
}
|
||||
|
||||
if(angle<=180)
|
||||
{
|
||||
// The left part is rotated, and the right is currently hidden:
|
||||
element = clock.rotateLeft;
|
||||
}
|
||||
else
|
||||
{
|
||||
// The first part of the rotation has completed, so we start rotating the right part:
|
||||
clock.rotateRight.show();
|
||||
clock.rotateLeft.show();
|
||||
|
||||
rotateElement(clock.rotateLeft,180);
|
||||
|
||||
element = clock.rotateRight;
|
||||
angle = angle-180;
|
||||
}
|
||||
|
||||
rotateElement(element,angle);
|
||||
|
||||
// Setting the text inside of the display element, inserting a leading zero if needed:
|
||||
clock.display.html(current<10?'0'+current:current);
|
||||
}
|
||||
|
||||
function rotateElement(element,angle)
|
||||
{
|
||||
// Rotating the element, depending on the browser:
|
||||
var rotate = 'rotate('+angle+'deg)';
|
||||
|
||||
if(element.css('MozTransform')!=undefined)
|
||||
element.css('MozTransform',rotate);
|
||||
|
||||
else if(element.css('WebkitTransform')!=undefined)
|
||||
element.css('WebkitTransform',rotate);
|
||||
|
||||
// A version for internet explorer using filters, works but is a bit buggy (no surprise here):
|
||||
else if(element.css("filter")!=undefined)
|
||||
{
|
||||
var cos = Math.cos(Math.PI * 2 / 360 * angle);
|
||||
var sin = Math.sin(Math.PI * 2 / 360 * angle);
|
||||
|
||||
element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
|
||||
|
||||
element.css("left",-Math.floor((element.width()-200)/2));
|
||||
element.css("top",-Math.floor((element.height()-200)/2));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})(jQuery)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
@@ -1,76 +0,0 @@
|
||||
<style>
|
||||
.clock{
|
||||
/* The .clock div. Created dynamically by jQuery */
|
||||
background-color:#252525;
|
||||
height:75px;
|
||||
width:75px;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.clock .rotate{
|
||||
/* There are two .rotate divs - one for each half of the background */
|
||||
position:absolute;
|
||||
width:75px;
|
||||
height:75px;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
.rotate.right{
|
||||
display:none;
|
||||
z-index:11;
|
||||
}
|
||||
|
||||
.clock .bg, .clock .front{
|
||||
width:37.5px;
|
||||
height:75px;
|
||||
background-color:#252525;
|
||||
position:absolute;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.clock .display{
|
||||
/* Holds the number of seconds, minutes or hours respectfully */
|
||||
position:absolute;
|
||||
width:75px;
|
||||
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
z-index:20;
|
||||
color:#F5F5F5;
|
||||
font-size:22.5px;
|
||||
text-align:center;
|
||||
top:27.5px;
|
||||
left:0;
|
||||
|
||||
/* CSS3 text shadow: */
|
||||
text-shadow:4px 4px 5px #333333;
|
||||
}
|
||||
|
||||
/* The left part of the background: */
|
||||
|
||||
.clock .bg.left{ left:0; }
|
||||
|
||||
/* Individual styles for each color: */
|
||||
.orange .bg.left{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat left top; }
|
||||
.green .bg.left{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat left top; }
|
||||
.blue .bg.left{ background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat left top; }
|
||||
|
||||
/* The right part of the background: */
|
||||
.clock .bg.right{ left:37.5px; }
|
||||
|
||||
.orange .bg.right{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat right top; }
|
||||
.green .bg.right{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat right top; }
|
||||
.blue .bg.right{ background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat right top; }
|
||||
|
||||
|
||||
.clock .front.left{
|
||||
left:0;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="fancyClock1"></div>
|
||||
<script>
|
||||
$('#fancyClock1').tzineClock();
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@@ -1,69 +0,0 @@
|
||||
.clock{
|
||||
/* The .clock div. Created dynamically by jQuery */
|
||||
background-color:#252525;
|
||||
height:200px;
|
||||
width:200px;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.clock .rotate{
|
||||
/* There are two .rotate divs - one for each half of the background */
|
||||
position:absolute;
|
||||
width:200px;
|
||||
height:200px;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
.rotate.right{
|
||||
display:none;
|
||||
z-index:11;
|
||||
}
|
||||
|
||||
.clock .bg, .clock .front{
|
||||
width:100px;
|
||||
height:200px;
|
||||
background-color:#252525;
|
||||
position:absolute;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.clock .display{
|
||||
/* Holds the number of seconds, minutes or hours respectfully */
|
||||
position:absolute;
|
||||
width:200px;
|
||||
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
z-index:20;
|
||||
color:#F5F5F5;
|
||||
font-size:60px;
|
||||
text-align:center;
|
||||
top:65px;
|
||||
left:0;
|
||||
|
||||
/* CSS3 text shadow: */
|
||||
text-shadow:4px 4px 5px #333333;
|
||||
}
|
||||
|
||||
/* The left part of the background: */
|
||||
|
||||
.clock .bg.left{ left:0; }
|
||||
|
||||
/* Individual styles for each color: */
|
||||
.orange .bg.left{ background:url(bg_orange.png) no-repeat left top; }
|
||||
.green .bg.left{ background:url(bg_green.png) no-repeat left top; }
|
||||
.blue .bg.left{ background:url(bg_blue.png) no-repeat left top; }
|
||||
|
||||
/* The right part of the background: */
|
||||
.clock .bg.right{ left:100px; }
|
||||
|
||||
.orange .bg.right{ background:url(bg_orange.png) no-repeat right top; }
|
||||
.green .bg.right{ background:url(bg_green.png) no-repeat right top; }
|
||||
.blue .bg.right{ background:url(bg_blue.png) no-repeat right top; }
|
||||
|
||||
|
||||
.clock .front.left{
|
||||
left:0;
|
||||
z-index:10;
|
||||
}
|
||||
Reference in new issue
Block a user