Fetching desktop from db
This commit is contained in:
Harry Bomrah
parent
eb219c14b7
commit
4875b339f8
|
|
@ -82,34 +82,27 @@ var orbitDesktop = function(dom){
|
|||
var ww = $(window).width();
|
||||
$("img#thmbackground").attr({"width":ww});
|
||||
});
|
||||
$(o.contentHolder).mousemove(function(event){
|
||||
/*if(($(window).width()-50)<=event.pageX){
|
||||
$("#holder").animate({scrollLeft:$("#holder").scrollLeft()+500},1000);
|
||||
}
|
||||
if(event.pageX<300){
|
||||
$("#holder").animate({scrollLeft:0},1000);
|
||||
}*/
|
||||
var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des');
|
||||
$widget_fn.hover(function(){
|
||||
var fn_name = $(this).find('img').attr('alt'),nth = $(this).parents('.d_cate').index(),des_left = $('.dock_child').eq(nth).width();
|
||||
$(this).addClass('thmc1');
|
||||
$fn_des.text(fn_name).css({'top':nth * 60,'left': des_left + 60}).stop(true, true).fadeIn();
|
||||
},function(){
|
||||
$(this).removeClass('thmc1');
|
||||
$fn_des.stop(true, true).fadeOut();
|
||||
});
|
||||
var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des');
|
||||
$widget_fn.hover(function(){
|
||||
var fn_name = $(this).find('img').attr('alt'),nth = $(this).parents('.d_cate').index(),des_left = $('.dock_child').eq(nth).width();
|
||||
$(this).addClass('thmc1');
|
||||
$fn_des.text(fn_name).css({'top':nth * 60,'left': des_left + 60}).stop(true, true).fadeIn();
|
||||
},function(){
|
||||
$(this).removeClass('thmc1');
|
||||
$fn_des.stop(true, true).fadeOut();
|
||||
});
|
||||
};
|
||||
this.initializeDesktop = function(target){
|
||||
if(!target)target = "desktop";
|
||||
o.currenthtml = target;
|
||||
o.currentface = "home";
|
||||
var groupWrapperWidth = 0;
|
||||
var groupWrapperHeight = 0;
|
||||
|
||||
var extraspace = 300;
|
||||
var currentElement, elementParent, targetParent, tempElement, widthcheck;
|
||||
widthcheck = false;
|
||||
var bindHandlers = function(){
|
||||
var groupWrapperWidth = 0;
|
||||
var groupWrapperHeight = 0;
|
||||
$(".element").mousedown(function(){
|
||||
currentElement = $(this);
|
||||
elementParent = $(this).parent();
|
||||
|
|
@ -163,16 +156,65 @@ var orbitDesktop = function(dom){
|
|||
$(this).removeClass('thmc2');
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var loadTiles = function(id){
|
||||
$("div#group_wrapper").empty();
|
||||
$.getJSON("/desktop/getgroups",{sectionid:id},function(groups){
|
||||
var tilecolors = o.themesettings.tilecolor;
|
||||
var opacity = ["op05","op06","op07","op08"];
|
||||
$.each(groups,function(i,group){
|
||||
group.sort(o.sortJSON("position",true,parseInt));
|
||||
var $group = $('<div class="group"><ul class="grp ui-sortable"></ul></div>');
|
||||
$.each(group,function(j,tile){
|
||||
var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)];
|
||||
var op = opacity[Math.floor(Math.random()*opacity.length)];
|
||||
if(tile.data_category == "app")
|
||||
$li = $('<li class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="" class="appicon"><img src="" alt=""></a><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
|
||||
else
|
||||
$li = $('<li class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><h1 class="appname thmtxt">'+tile.title+'</h1><div class="appholder holder_f">test content</div></li>');
|
||||
$group.find("ul").append($li);
|
||||
})
|
||||
$("div#group_wrapper").append($group);
|
||||
})
|
||||
bindHandlers();
|
||||
o.initializeWidgets();
|
||||
})
|
||||
}
|
||||
var loadSectionList = function(){
|
||||
$.getJSON("/desktop/getsectionlist",{desktopid:o.desktopId},function(sectionlist){
|
||||
$.each(sectionlist,function(i,section){
|
||||
var tempstyle="";
|
||||
if(i==0){
|
||||
tempstyle = "style='display:none;'";
|
||||
$("span#section_heading").text(section.name);
|
||||
}
|
||||
$("ul#section_list").append($('<li class="section_name" '+tempstyle+'><a class="admtxt hp w2 hh2" onclick="return false;" href="'+section._id+'" >'+section.name+'</a></li>'));
|
||||
})
|
||||
bindSecondaryHandlers();
|
||||
})
|
||||
}
|
||||
|
||||
var bindSecondaryHandlers = function(){
|
||||
$("ul#section_list li.section_name").click(function(){
|
||||
$("li.section_name").show();
|
||||
$(this).hide();
|
||||
$("span#section_heading").text($(this).text());
|
||||
loadTiles($(this).find("a").attr("href"));
|
||||
})
|
||||
}
|
||||
|
||||
if(!o.desktopData[o.currentface]){
|
||||
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
||||
bindHandlers();
|
||||
o.initializeWidgets();
|
||||
loadTiles(o.sectionId);
|
||||
loadSectionList();
|
||||
});
|
||||
}else{
|
||||
$(o.contentHolder).html(o.desktopData[o.currentface]);
|
||||
bindHandlers();
|
||||
o.initializeWidgets();
|
||||
bindHandlers();
|
||||
o.initializeWidgets();
|
||||
bindSecondaryHandlers();
|
||||
}
|
||||
};
|
||||
this.tempFunc = function(){
|
||||
|
|
@ -206,7 +248,7 @@ var orbitDesktop = function(dom){
|
|||
|
||||
//for Alphabet sorting
|
||||
$("a#alphabet_sort_btn").click(function(){
|
||||
switch ($(this).attr("href")) {
|
||||
switch ($(this).attr("href")){
|
||||
case "ascending":
|
||||
$(this).attr("href","descending").find(".thmtxt").text("Alphabet [Z-A]");
|
||||
allApps = $(".group_search .element").sort(sortAscending);
|
||||
|
|
@ -225,7 +267,6 @@ var orbitDesktop = function(dom){
|
|||
if(!o.desktopData[o.currentface]){
|
||||
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
||||
bindHandlers();
|
||||
|
||||
});
|
||||
}else{
|
||||
$(o.contentHolder).html(o.desktopData[o.currentface]);
|
||||
|
|
@ -276,9 +317,10 @@ var orbitDesktop = function(dom){
|
|||
});
|
||||
}
|
||||
};
|
||||
|
||||
if(!o.desktopData[o.currentface]){
|
||||
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
||||
bindHandlers();
|
||||
bindHandlers();
|
||||
});
|
||||
}else{
|
||||
$(o.contentHolder).html(o.desktopData[o.currentface]);
|
||||
|
|
@ -294,14 +336,14 @@ var orbitDesktop = function(dom){
|
|||
o.changeTheme($(this).val());
|
||||
})
|
||||
}
|
||||
if(!o.desktopData[o.currentface]){
|
||||
// if(!o.desktopData[o.currentface]){
|
||||
$(o.contentHolder).empty().load("/desktop/"+target,function(){
|
||||
bindHandlers();
|
||||
});
|
||||
}else{
|
||||
$(o.contentHolder).html(o.desktopData[o.currentface]);
|
||||
bindHandlers();
|
||||
}
|
||||
// }else{
|
||||
// $(o.contentHolder).html(o.desktopData[o.currentface]);
|
||||
// bindHandlers();
|
||||
// }
|
||||
};
|
||||
this.loadWallpaper = function(wallpaper){
|
||||
if(!wallpaper)wallpaper = o.themesettings.background;
|
||||
|
|
@ -326,7 +368,7 @@ var orbitDesktop = function(dom){
|
|||
$.each(elements,function(){
|
||||
var widget = $(this);
|
||||
if(widget.attr("data-category")=="widget"){
|
||||
var widgename =widget.attr("data-content");
|
||||
var widgename = widget.attr("data-content");
|
||||
$.getScript("/desktop_widgets/"+widgename+"/"+widgename+".js",function(){
|
||||
widget.find("div.appholder").load("/desktop_widgets/"+widgename+"/index.html.erb");
|
||||
});
|
||||
|
|
@ -343,4 +385,6 @@ orbitDesktop.prototype.widgetfolder = "desktop_widgets";
|
|||
orbitDesktop.prototype.desktopId = "1";
|
||||
orbitDesktop.prototype.notifyImgPath = "temp";
|
||||
|
||||
// devin
|
||||
var uselessfunction = function(){
|
||||
$.post("/desktop/temp_func",{sectionid:"4f83e7bbbd98eb041600001d"});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,4 +38,17 @@ var orbitDesktopAPI = function(){
|
|||
if(!time)time=5000; else time=time*1000;
|
||||
$notify.slideDown().delay(time).slideUp();
|
||||
};
|
||||
this.executeFunc = function(func,callbackFn){
|
||||
func.call(this);
|
||||
if(callbackFn){
|
||||
callbackFn.call(this,func);
|
||||
}
|
||||
};
|
||||
this.sortJSON = function(field, reverse, primer){
|
||||
var key = function (x) {return primer ? primer(x[field]) : x[field]};
|
||||
return function (a,b) {
|
||||
var A = key(a), B = key(b);
|
||||
return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -3,6 +3,7 @@ class DesktopController< ApplicationController
|
|||
before_filter :authenticate_user!
|
||||
def index
|
||||
@desktop = current_user.desktop
|
||||
@section = @desktop.sections.first
|
||||
end
|
||||
|
||||
def desktop
|
||||
|
|
@ -34,4 +35,37 @@ class DesktopController< ApplicationController
|
|||
def settings
|
||||
render :layout => false
|
||||
end
|
||||
|
||||
def getgroups
|
||||
@section = Section.find(params["sectionid"])
|
||||
@groups = @section.groups
|
||||
a = Array.new
|
||||
@groups.each do |group|
|
||||
a << group.tiles
|
||||
end
|
||||
render :json =>a.to_json
|
||||
end
|
||||
|
||||
def getsectionlist
|
||||
@desktop = Desktop.find(params["desktopid"])
|
||||
@sections = @desktop.sections
|
||||
render :json => @sections.to_json
|
||||
end
|
||||
|
||||
def temp_func
|
||||
@section = Section.find(params["sectionid"])
|
||||
@groups = @section.groups
|
||||
|
||||
@groups.each do |group|
|
||||
a = 1;
|
||||
@tiles = group.tiles
|
||||
@tiles.each do |tile|
|
||||
tile.update_attributes({:data_category => "widget",:data_content => "temp", :position => a})
|
||||
a = a+1;
|
||||
end
|
||||
end
|
||||
b = Array.new
|
||||
b << {"success"=>"true"}
|
||||
render :json=>b.to_json
|
||||
end
|
||||
end
|
||||
|
|
@ -7,8 +7,12 @@ class Group
|
|||
before_create :initialize_tile
|
||||
|
||||
def initialize_tile
|
||||
self.tiles.build
|
||||
self.tiles.build
|
||||
self.tiles.build(data_category: "widget", data_content: "timetable", position: 1, shape: "w2 h2", title: "Tiime Table")
|
||||
self.tiles.build(data_category: "app", data_content: "quotes", position: 2, shape: "w1 h1", title: "Quotes")
|
||||
self.tiles.build(data_category: "widget", data_content: "weather", position: 3, shape: "w2 h2", title: "Weather")
|
||||
self.tiles.build(data_category: "widget", data_content: "clock", position: 4, shape: "w2 h1", title: "Clock")
|
||||
self.tiles.build(data_category: "app", data_content: "dailyenglish", position: 5, shape: "w1 h1", title: "Daily English Word")
|
||||
self.tiles.build(data_category: "widget", data_content: "school_events", position: 6, shape: "w2 h1", title: "School Events")
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@ class Tile
|
|||
include Mongoid::Document
|
||||
include Mongoid::Timestamps
|
||||
|
||||
field :data_category
|
||||
field :data_content
|
||||
field :position, type: Integer
|
||||
field :shape
|
||||
field :title
|
||||
|
||||
belongs_to :group
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<div id="content">
|
||||
<div id="header" class="hh3">
|
||||
<div class="dtitle w2 hh3 hp sdm">
|
||||
<span class="thmtxth">Campus</span>
|
||||
<span class="thmtxth" id="section_heading">Loading...</span>
|
||||
<div class="admbg sdm_o">
|
||||
<ul>
|
||||
<ul id="section_list">
|
||||
<!-- <li><a class="admtxt hp w2 hh2" href="">Campus</a></li>
|
||||
<li><a class="admtxt hp w2 hh2" href="">Research</a></li>
|
||||
<li><a class="admtxt hp w2 hh2" href="">Social</a></li>
|
||||
<li><a class="admtxt hp w2 hh2" href="">Private</a></li>
|
||||
<li><a class="admtxt hp w2 hh2" href="">Private</a></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
<div class="scrollbar op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
|
||||
<div class="viewport">
|
||||
<div id="group_wrapper" class="overview">
|
||||
<div class="group">
|
||||
<!-- <div class="group">
|
||||
<ul class="grp ui-sortable">
|
||||
<li class="element w2 h2 hp vp" data-category="abc">
|
||||
<span class="tile thmc1 op07"></span>
|
||||
|
|
@ -87,9 +88,9 @@
|
|||
<h1 class="appname thmtxt">Aperture</h1>
|
||||
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
|
||||
<h1 class="appname thmtxt">Aperture</h1>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -80,6 +80,8 @@
|
|||
orbitDesktop.prototype.themefolder = "desktop_themes";
|
||||
orbitDesktop.prototype.notifyImgPath = "/assets/";
|
||||
orbitDesktop.prototype.desktopId = "<%= @desktop.id %>";
|
||||
orbitDesktop.prototype.sectionId = "<%= @section.id %>";
|
||||
//uselessfunction();
|
||||
var od = new orbitDesktop("#ajax_container");
|
||||
o.notify("Notification Working!!","imp",5)
|
||||
o.notify("Notification Working!!","imp",3)
|
||||
</script>
|
||||
|
|
@ -108,6 +108,9 @@ Orbit::Application.routes.draw do
|
|||
match '/desktop/settings'=>'desktop#settings'
|
||||
match '/desktop/get_desktop_settings/'=>'desktop#get_desktop_settings'
|
||||
match '/desktop/save_desktop_settings/'=>'desktop#save_desktop_settings'
|
||||
match '/desktop/getgroups/'=>'desktop#getgroups'
|
||||
match '/desktop/getsectionlist/'=>'desktop#getsectionlist'
|
||||
match '/desktop/temp_func/'=>'desktop#temp_func'
|
||||
match '/panel/:app_name/front_end/:app_action/:id' => 'pages#show_from_link', :constraints => lambda { |request|
|
||||
!request.query_string.include?("inner=true")
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1,171 @@
|
|||
/*!
|
||||
* 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.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
|
|
@ -0,0 +1,76 @@
|
|||
<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:50px;
|
||||
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:25px; }
|
||||
|
||||
.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.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1,69 @@
|
|||
.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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<div style='width: 180px; height: 150px; background-image: url( /desktop_widgets/weather/img/clouds_180x150_bg.jpg );
|
||||
background-repeat: no-repeat; background-color: #;' ><div id='NetweatherContainer'
|
||||
style='height: 138px;' ><script src='http://netweather.accuweather.com/adcbin/
|
||||
netweather_v2/netweatherV2ex.asp?
|
||||
partner=netweather&tStyle=normal&logo=1&zipcode=ASI|TW|TW018|HSINCHU|
|
||||
&lang=eng&size=8&theme=clouds&metric=0&target=_self'></script></div></div>
|
||||
Reference in New Issue