developers
/
orbit-4-1
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Various view update and change #thmbackground tag

This commit is contained in:
devin chen 2013-05-30 15:24:16 +08:00 committed by saurabhbhatia
parent b085e826a5
commit 2b12a4775c
8 changed files with 124 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
app/assets/Archive/javascripts/orbitdesktop.js
View File

@ -41,11 +41,12 @@ var sortDescending = function(a, b) {
Array.prototype.indexOfObject = function(object){
for(i = 0;i < this.length; i++){
if(this[i] === object)
if(this[i] === object){
break;
}
}
return i;
}
};
jQuery.ajax = (function(_ajax){
@ -136,7 +137,7 @@ var orbitDesktop = function(dom){
o.getlocation();
$.getJSON("/desktop/get_desktop_settings",{"get":"desktop","desktopid":o.desktopId},function(desktopSettings){
if(desktopSettings){
if(desktopSettings.theme!="custom"){
if(desktopSettings.theme!=="custom"){
theme = desktopSettings.theme;
}else{
theme = "4f8d3f493b67fcd05f086359";
@ -163,17 +164,17 @@ var orbitDesktop = function(dom){
$(o.contentHolder).empty().load("/desktop/desktop",function(){
o.desktopData["d_desktop"] = "";
o.initializeDesktop("d_desktop","",false);
})
});
}else{
o.customPage(custom_load);
}
});
})
});
};
};
this.customPage = function(customload){
customload = customload.replace("#","");
if(customload.search("-") != -1){
if(customload.search("-") !== -1){
customload = customload.split("-");
o.menu_item($(".docklist a[custom-load="+customload[0]+"]"),true,customload[1]);
}else{
@ -188,7 +189,7 @@ var orbitDesktop = function(dom){
$('head').append( $('<link rel="stylesheet" id="dyn_css" type="text/css" />').attr('href', "/"+o.themefolder+"/"+theme+"/css/"+ts.css));
o.loadWallpaper();
o.loadIconCache();
})
});
};
this.getlocation = function(){
@ -201,11 +202,11 @@ var orbitDesktop = function(dom){
});
o.locationdata.formatted_address = data.results[0].formatted_address;
});
}
};
var locationError = function(){
o.notify("Unable to find your location!","alert");
}
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locationSuccess,locationError);
@ -214,7 +215,7 @@ var orbitDesktop = function(dom){
o.notify("Your browser does not support Geolocation!","alert");
}
}
};
this.bindDesktopEvents = function(){ //this function will bind the global handlers to thd desktop, for example doc
$(".docklist a").click(function(){
@ -260,7 +261,7 @@ var orbitDesktop = function(dom){
error:function(){
o.notify("Please try again later!","imp");
}
}
};
$(this).ajaxSubmit(options);
return false;
});
@ -287,15 +288,16 @@ var orbitDesktop = function(dom){
url : $e.attr("href"),
success : function(data){
if(typeof data == "string"){
if(ca)
if(ca){
$(ca).html(data);
else{
} else {
o.layout_data(data);
// $("div[container=true]").html(data);
}
}
if(exe)
if(exe){
window.o[o.data_method][exe](data,$e);
}
if(t == "delete"){
if($e.attr("delete-item")=="true"){
var li_to_delete = $e.parentsUntil("li[item=true]").find("li[item=true]");
@ -304,7 +306,7 @@ var orbitDesktop = function(dom){
}
}
});
}
};
if($e.attr("confirm-message")){
o.confirm({
buttons : ["Yes","No"],
@ -314,7 +316,7 @@ var orbitDesktop = function(dom){
if(value){
a();
}
})
});
}else{
a();
}
@ -322,11 +324,8 @@ var orbitDesktop = function(dom){
});
$(window).resize(function(){
// var ww = $(window).width();
// $("img#thmbackground").attr({"width":ww});
// if( $('.tinycanvas').length > 0 ){
$('.tinycanvas').tinyscrollbar_update('relative');
// }
if($(o.contentHolder).find("div.app_frame").length > 0){
$(o.contentHolder).find("div.app_frame").each(function(){
var app_holder_height = $(this).height() - 72;
@ -349,11 +348,10 @@ var orbitDesktop = function(dom){
var split = function( val ) {
return val.split( /,\s*/ );
}
};
var extractLast = function( term ) {
return split( term ).pop();
}
};
// $("body").on("keydown","*[autocomplete]", function( event ) {
// var autocompleteList = $(this).attr("autocomplete-list");
@ -402,7 +400,7 @@ var orbitDesktop = function(dom){
x = 0;
temp_div.append(column);
}
})
});
if(x != 0){
temp_div.append(column);
}
@ -418,7 +416,7 @@ var orbitDesktop = function(dom){
column.append(ul);
x++;
temp_div.append(column);
})
});
total_width = (!isNaN(base_width)) ? (base_width + gutter*2 +1) * total_columns : null;
}
break;
@ -427,11 +425,11 @@ var orbitDesktop = function(dom){
}
// total_width = (!isNaN(base_width) ? ( base_width + 12 ) * total_columns : null);
return {
"markup":temp_div.html(),
"markup":temp_div[0].innerHTML,
"width":total_width,
"total":entries.length
};
}
};
var check_container = $("<div></div>").html(h).find("div[container=true]");
if(check_container.length > 0){
$("div[container=true]")
@ -447,7 +445,7 @@ var orbitDesktop = function(dom){
$("div[container=true]")
.find("div.tinycanvas")
.prepend('<div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>');
var f = o.layout_data.generate_layout_html(h)
var f = o.layout_data.generate_layout_html(h);
$("div[container=true] div.overview").html(f.markup);
var settings = {main : ".tinycanvas"};
var tsettings = {};
@ -466,7 +464,7 @@ var orbitDesktop = function(dom){
o.pagination(pagination_link,pagination_variable,page_no);
}
}
}
};
}
// call other functions here
o.tinyscrollbar_ext(settings,tsettings);
@ -474,7 +472,8 @@ var orbitDesktop = function(dom){
o.autocomplete();
o.use_select2();
o.check_simple_layout();
}
};
this.paging = true;
this.pagination = function(link,variable,page_no){
var retvalue = null;
@ -497,7 +496,7 @@ var orbitDesktop = function(dom){
}
}
});
}
};
this.insert_new_column = function(index){
var column_container = $("div[container=true] .overview"),layout = column_container.attr("content-layout"),base_width = parseInt(column_container.attr("base-width")),column;
@ -513,10 +512,9 @@ var orbitDesktop = function(dom){
break;
default:
return false;
break;
}
if(index == 0){
column.insertBefore(previous_column)
column.insertBefore(previous_column);
}else{
column.insertAfter(previous_column);
}
@ -524,29 +522,29 @@ var orbitDesktop = function(dom){
o.tinyscrollbar_ext({
main : ".tinycanvas",
fill : base_width * total_columns
})
});
return column;
}
};
this.remove_column = function(index){
var column_container = $("div[container=true] .overview"),layout = column_container.attr("content-layout"),column = column_container.find(".column").eq(index),base_width = parseInt(column_container.attr("base-width"));
if(column.length == 0)return false;
if(column.length == 0){ return false; }
switch(layout){
case "datalist":
break;
case "column":
break;
default:
return false;
break;
}
column.remove();
var total_columns = column_container.find(".column").length;
o.tinyscrollbar_ext({
main : ".tinycanvas",
fill : base_width * total_columns
})
});
return column;
}
};
this.menu_item = function(dom,customload,submenuitem){
if(!customload)customload=false;
@ -647,17 +645,12 @@ var orbitDesktop = function(dom){
}
if(dom.length == 0)
o.layout_data(data);
// $('*[content-type=menu] a').removeClass('thmc1 thmtxt active');
// dom.addClass('thmc1 thmtxt active');
}
this.initializeDesktop = function(target,url,cache){ //this is for initializing main desktops that are sections and tiles
target = (!target) ? 'desktop' : target;
var bindHandlers = function(){ // this function will bind all the handlers in the desktop
var dragged = null,draggable,lastpos = [];
/* Hotfix - Part 1 */
// var items = $(".gridster ul li");
// items.detach();
o.gridvar = $(".grid ul").find("> li ")
.mousedown(function(e){
@ -680,15 +673,6 @@ var orbitDesktop = function(dom){
dragged.addClass("noClick");
},
stop: function(event, ui){
// for (var i = 1; i <= 30; i++) {
// // var celement = $(".grid ul .widget[data-col="+i+"]:last");
// $(".grid ul .widget[data-col="+i+"]").each(function(){
// var pos = $(this).position();
// if(pos && (pos.top + $(this).height() + 6) > 550){
// revertbacktiles();
// }
// });
// }
$('.tinycanvas').tinyscrollbar_update('relative');
var newpos = o.gridvar.serialize();
$.post("/desktop/newpositions",{"newpositions":newpos});
@ -697,16 +681,6 @@ var orbitDesktop = function(dom){
})
.data('gridster');
/* Hotfix - Part 2 */
// $.each(items , function (i, e) {
// var item = $(this);
// var columns = parseInt(item.attr("data-sizex"));
// var rows = parseInt(item.attr("data-sizey"));
// var col = parseInt(item.attr("data-col"));
// var row = parseInt(item.attr("data-row"));
// o.gridvar.add_widget(item, columns, rows, col, row);
// });
var revertbacktiles = function(){
lastpos.push({"col":"","row":""});
$(".grid ul li").each(function(i){
@ -715,7 +689,6 @@ var orbitDesktop = function(dom){
}
var remove_empty_columns = function(){
for (var i = 1; i <= 30; i++) {
// var celement = $(".grid ul .widget[data-col="+i+"]:last");
$(".grid ul .widget[data-col="+i+"]").each(function(){
});
@ -735,7 +708,6 @@ var orbitDesktop = function(dom){
dragged.removeClass("noClick");
});
o.appname_substr('.gridster li');
o.simple_drop_down();
o.tinyscrollbar_ext({
main: '.tinycanvas'
@ -754,12 +726,7 @@ var orbitDesktop = function(dom){
$.each(tiles,function(i,tile){
var shape = tile.shape.split(" ");
// if(tile.title == "Weather")console.log("Big - row : " + tile.row + ", col : "+ tile.column);
// if(tile.title == "Google Scholar")console.log("Scholar - row : " + tile.row + ", col : "+ tile.column);
// if(total_x % 2 != 0)
// row = row - y;
// if(i == 7)tile.row = null;
if(tile.row){
row = tile.row;
col = tile.column;
@ -786,9 +753,9 @@ var orbitDesktop = function(dom){
var f = (tile.fullsize?"fullsize":null);
if(tile.data_category == "app"){
$li = $('<li data-id="'+tile.id+'" class="app" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-title="'+tile.title+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile.data_content+'" class="appicon" onclick="return false;" data-url="'+tile.link+'"><img src="'+tile.icon+'" alt="" ></a><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
$li = $('<li data-id="'+tile.id+'" class="app" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile.data_content+'" class="appicon" onclick="return false;" data-url="'+tile.link+'"><img src="'+tile.icon+'" alt="" ></a><h1 class="appname thmtxt text_ofl"><span>'+tile.title+'</span></h1></li>');
} else {
$li = $('<li data-id="'+tile.id+'" class="widget '+f+'" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'" js-link="'+tile.js[0].url+'" css-link="'+tile.css.url+'"><span class="tile '+tilecolor+' '+op+'"></span><div class="appholder"></div><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
$li = $('<li data-id="'+tile.id+'" class="widget '+f+'" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'" js-link="'+tile.js[0].url+'" css-link="'+tile.css.url+'"><span class="tile '+tilecolor+' '+op+'"></span><div class="appholder"></div><h1 class="appname thmtxt text_ofl"><span>'+tile.title+'</span></h1></li>');
}
@ -877,18 +844,12 @@ var orbitDesktop = function(dom){
$result.empty().show();
$applist.hide();
// searchArray = $elements.filter(":containsi("+$(this).val()+")").clone(1,1);
// searchArray = $('#app_list').find('[data-title*="'+query+'"]').clone(1,1);
searchArray = $elements.filter(function(){
var matcher = new RegExp(query, "i");
return matcher.test( $(this).attr('data-title') );
return matcher.test( $(this).find('.appname span')[0].innerHTML );
}).clone(1,1);
if(searchArray.length > 0){
// searchArray.each(function(){
// $(this).hide("fold","fast");
// })
// $("#app_manager #seperator").show();
var i = 0, c = 1; // c for numbers of columns
var $column;
searchArray.each(function(){
@ -1088,7 +1049,6 @@ var orbitDesktop = function(dom){
}
});
elementSetting();
o.appname_substr('#group_wrapper .element');
o.check_simple_layout();
}
var elementSettingsData = {};
@ -1112,7 +1072,7 @@ var orbitDesktop = function(dom){
var $app;
count++;
elementSettingsData[app.id] = {"sections" : app.sections};
$app = $('<div class="element w1 h1 thmc2" data-type="'+app.data_category+'" data-title="'+app.title+'" data-author="'+app.author+'" data-version="'+app.version+'" data-update="'+app.last_update+'" data-id="'+app.id+'" data-text-color="'+app.text_color+'" data-background="'+app.background+'" ><span class="tile thmc2"></span><a href="'+app.id+'" class="appicon"><img src="'+app.icon+'" alt="" onclick="return false;"></a><h1 class="appname thmtxt">'+app.title+'</h1></div>');
$app = $('<div class="element w1 h1 thmc2" data-type="'+app.data_category+'" data-author="'+app.author+'" data-version="'+app.version+'" data-update="'+app.last_update+'" data-id="'+app.id+'" data-text-color="'+app.text_color+'" data-background="'+app.background+'" ><span class="tile thmc2"></span><a href="'+app.id+'" class="appicon"><img src="'+app.icon+'" alt="" onclick="return false;"></a><h1 class="appname thmtxt text_ofl"><span>'+app.title+'</span></h1></div>');
if( count > 4 ){
count = 1, colindex+=1;
$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
@ -1218,7 +1178,6 @@ var orbitDesktop = function(dom){
o.tinyscrollbar_ext({
main: '.tinycanvas',
});
o.appname_substr('#group_wrapper .element',9);
};
var loadApps = function(){ // this loads apps from db to in each sections
$.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){
@ -1249,7 +1208,7 @@ var orbitDesktop = function(dom){
if(x == 1){
$ul = $('<ul class="appgroup w1" ></ul>');
}
$li = $('<li class="element to_drop w1 hh2 hp vp" data-category="'+app.data_category+'" data-content="'+app.data_content+'" id="'+app._id+'"><div class="appicon"><img src="'+o.iconPath+app.data_content+'.png" class="" width="30" /></div><h1 class="appname thmtxth">'+app.title+'</h1></li>');
$li = $('<li class="element to_drop w1 hh2 hp vp" data-category="'+app.data_category+'" data-content="'+app.data_content+'" id="'+app._id+'"><div class="appicon"><img src="'+o.iconPath+app.data_content+'.png" class="" width="30" /></div><h1 class="appname thmtxth text_ofl"><span>'+app.title+'</span></h1></li>');
$ul.append($li);
if(x == 7){
$("#group_wrapper #section"+(i+1)).append($ul);
@ -1622,7 +1581,6 @@ var orbitDesktop = function(dom){
}else{
li.find(".not_status").html("Install on <a href='addthis' for='"+o.sectionList[0]._id+"' style='text-decoration:underline;'>"+o.sectionList[0].name+"</a> <a href='addthis' for='"+o.sectionList[1]._id+"' style='text-decoration:underline;'>"+o.sectionList[1].name+"</a> <a href='addthis' for='"+o.sectionList[2]._id+"' style='text-decoration:underline;'>"+o.sectionList[2].name+"</a> <a href='addthis' for='"+o.sectionList[3]._id+"' style='text-decoration:underline;'>"+o.sectionList[3].name)+"</a>";
}
//console.log(section_names);
column.find("ul").append(li);
if(counter%4==0){
$("#apps_store #widget_list").append(column);
@ -1650,10 +1608,11 @@ var orbitDesktop = function(dom){
this.loadWallpaper = function(wallpaper){ // this is to load new wallpaper
wallpapernm = (!wallpaper) ? o.themesettings.background : wallpaper;
if(!wallpaper){
$("#thmbackground").attr("src","/"+o.themefolder+"/"+o.theme+"/images/"+wallpapernm);
$("#thmbackground").css("background-image","url(/"+o.themefolder+"/"+o.theme+"/images/"+wallpapernm+")");
} else {
$("#thmbackground").attr("src",o.wallpaperPath+wallpaper);
$("#thmbackground").css("background-image","url("+o.wallpaperPath+wallpaper+")");
}
console.log('loaded');
};
this.loadIconCache = function(){ // this function load or refresh icon cache for the theme
@ -1756,9 +1715,6 @@ var orbitDesktop = function(dom){
$simple_layout.css('width',sw);
});
}
// if($simple_layout.find(".s_column").length > 0){
// $simple_layout.css('width',sw);
// }
};
this.simple_drop_down = function(){
// simple dropdown menu

10
app/assets/Archive/javascripts/orbitdesktopAPI.js
View File

@ -72,7 +72,7 @@ var orbitDesktopAPI = function(){
this.changeWallpaper = function(wallpaper){
//takes 1 parameter
//wallpaper (string): takes wallpaper and sets the wallpaper
$("img#thmbackground").attr("src",o.wallpaperPath+wallpaper);
$("#thmbackground").attr("src",o.wallpaperPath+wallpaper);
o.saveWallpaper(wallpaper);
};
this.confirm = function(settings,callbackfn){
@ -152,14 +152,14 @@ var orbitDesktopAPI = function(){
return;
}
}
var whtml =$('<div id="app_frame_'+o.windowcounter+'" class="thmc2 app_frame" data-app="'+settings.appid+'"><div id="content"><div id="header" class="hh3"><div class="dtitle hh3 hp" style="text-transform:capitalize;"><span class="thmtxth">'+settings.title+'</span></div><span class="icon-remove hh3 hp thmtxt"></span></div><div id="holder_'+o.windowcounter+'" class="app_holder"><iframe src="'+appurl+'" frameborder="0" scrolling="auto"></iframe><div class="clear"></div></div></div></div>');
var whtml =$('<div id="app_frame_'+o.windowcounter+'" class="thmc2 app_frame" data-app="'+settings.appid+'"><div class="app_frame_header"><div class="dtitle hh2 hp"><span class="thmtxth">'+settings.title+'</span></div><span class="icon-remove hh2 hp thmtxt"></span></div><div id="holder_'+o.windowcounter+'" class="app_holder clear"><iframe src="'+appurl+'" frameborder="0" scrolling="auto"></iframe></div></div>');
$(o.contentHolder).append(whtml);
var parentwindow = $(o.contentHolder).find("div#app_frame_"+o.windowcounter);
var parentwindow = $(o.contentHolder).find("#app_frame_"+o.windowcounter);
var app_holder_height = parentwindow.height() - 72;
var app_holder_width = parentwindow.width();
parentwindow.find("iframe").attr({"height":app_holder_height,"width":app_holder_width});
parentwindow.find("div.app_holder").height(app_holder_height);
parentwindow.find("span.icon-remove").click(function(){
parentwindow.find(".app_holder").height(app_holder_height);
parentwindow.find(".icon-remove").click(function(){
parentwindow.remove();
})
}

26
app/assets/Archive/stylesheets/desktop/desktop-main.css
View File

@ -86,14 +86,17 @@ a:focus {
font-size: 20px; }
#thmbackground {
min-height: 100%;
min-width: 980px;
width: 100%;
height: auto;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1; }
z-index: -1;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
#bgover {
position: fixed;
@ -154,6 +157,15 @@ a.admtxt.admbg2:hover {
.ini_input:focus {
outline: none; }
.text_ofl {
overflow: hidden; }
.text_ofl span {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; }
/* - Opacity */
.op00 {
opacity: 0; }
@ -277,7 +289,7 @@ a.admtxt.admbg2:hover {
margin-right: 96px;
top: 120px;
left: 0;
z-index: 11; }
z-index: 13; }
#holder {
height: 516px;
@ -752,7 +764,9 @@ a.admtxt.admbg2:hover {
background-color: #fff;
position: absolute;
width: 100%; }
.app_frame #header .icon-remove {
.app_frame .app_frame_header {
height: 72px; }
.app_frame .app_frame_header .icon-remove {
display: block;
float: right;
line-height: 60px;

28
app/assets/Archive/stylesheets/desktop/desktop-main.scss
View File

@ -86,14 +86,17 @@ a:focus { outline: none; }
}
}
#thmbackground {
min-height: 100%;
min-width: 980px;
width: 100%;
height: auto;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bgover {
position: fixed;
@ -139,6 +142,17 @@ a.admtxt.admbg2:hover {
border: 0;
}
.ini_input:focus { outline: none; }
.text_ofl {
overflow: hidden;
span {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
}
/* - Opacity */
@for $i from 0 through 10 {
@ -207,7 +221,7 @@ a.admtxt.admbg2:hover {
margin-right: 96px;
top: 120px;
left: 0;
z-index: 11;
z-index: 13;
}
#holder {
height: 516px;
@ -752,13 +766,17 @@ a.admtxt.admbg2:hover {
position: absolute;
width: 100%;
}
#header .icon-remove {
.app_frame_header{
height: 72px;
.icon-remove {
display: block;
float: right;
line-height: 60px;
font-size: 20px;
cursor: pointer;
}
}
}
/*Tooltip popup */

3
app/views/desktop/app_view1.html.erb
View File

@ -4,9 +4,8 @@
<div class="dtitle w2 hh2 hp"><span class="thmtxth">Appname</span></div>
<span class="icon-remove hh2 hp thmtxt"></span>
</div>
<div id="holder">
<div id="holder" class="clear">
<!-- app content -->
<div class="clear"></div>
</div>
</div>
</div>

4
app/views/desktop/desktop.html.erb
View File

@ -1,5 +1,5 @@
<div id="desktop">
<div id="content">
<div id="content">
<div id="header" class="hh2">
<div class="dtitle w2 hh2 hp sdm">
<div class="thmtxth sdm_t" id="section_heading"></div>
@ -18,7 +18,5 @@
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>

2
app/views/desktop/index.html.erb
View File

@ -71,7 +71,7 @@
</div>
<!--<div id="orbitbar"></div>-->
<img src="" id="thmbackground" />
<div id="thmbackground"></div>
<div id="bgover" ></div>
<div id="orbitnote"></div>
<div id="orbitdiag">

3
lib/desktopapp/views/app_view1.html.erb
View File

@ -4,9 +4,8 @@
<div class="dtitle w2 hh3 hp"><span class="thmtxth">Appname</span></div>
<span class="icon-remove hh3 hp thmtxt"></span>
</div>
<div id="holder">
<div id="holder" class="clear">
<!-- app content -->
<div class="clear"></div>
</div>
</div>
</div>