Google Personalized Home Page similar, how to save the final layout

Google Personalized homepage Similar, how to save the final layout of a

<style type= "Text/css" >


*{


padding:0;margin:0


}





. dragtable{


margin-top:10px;


width:100%;


Background-color: #fff;


}


td{


Vertical-align:top;


}





. dragtr{


Cursor:move;


Font-weight:bold;


Background-color: #6993bC;


Background-image:url (.. /bis/img/tleftbg.gif);


Background-position:left top;


Background-repeat:no-repeat;


Color: #FFFFFF;


height:20px;


}


input{


Cursor:hand;


}


#parentTable {


Border-collapse:collapse;


margin:0 0 0 10;


/*letter-spacing:25px;*/


}


</style>


<script defer>


var drag={


Dragged:false,


Ao:null,


Tdiv:null,


Dragstart:function () {


Drag.ao=event.srcelement;


if ((drag.ao.tagname== "TD") | | (drag.ao.tagname== "TR")) {


Drag.ao=drag.ao.offsetparent;


drag.ao.style.zindex=100;


}else{


Return


}


Drag.dragged=true;


Drag.tdiv=document.createelement ("div");


drag.tdiv.innerhtml=drag.ao.outerhtml;


drag.ao.style.border= "1px dashed red";


drag.tdiv.style.display= "Block";


drag.tdiv.style.position= "Absolute";


Drag.tdiv.style.filter= "Alpha (opacity=70)";


Drag.tdiv.style.cursor= "Move";


Drag.tdiv.style.border= "1px solid #000000";


Drag.tdiv.style.width=drag.ao.offsetwidth;


Drag.tdiv.style.height=drag.ao.offsetheight;


Drag.tdiv.style.top=drag.getinfo (Drag.ao). Top;


Drag.tdiv.style.left=drag.getinfo (Drag.ao). Left;


Document.body.appendChild (DRAG.TDIV);


Drag.lastx=event.clientx;


Drag.lasty=event.clienty;


Drag.lastleft=drag.tdiv.style.left;


Drag.lasttop=drag.tdiv.style.top;


},


Draging:function () {//IMPORTANT: Determine the location of the mouse





if (! drag.dragged| | Drag.ao==null) return;


var Tx=event.clientx;


var Ty=event.clienty;


Drag.tdiv.style.left=parseint (drag.lastleft) +tx-drag.lastx;


Drag.tdiv.style.top=parseint (drag.lasttop) +ty-drag.lasty;


for (Var i=0;i<parenttable.cells.length;i++) {


var parentcell=drag.getinfo (Parenttable.cells[i]);


if (tx>=parentcell.left&&tx<=parentcell.right&&ty>=parentcell.top&&ty<= Parentcell.bottom) {


var subtables=parenttable.cells[i].getelementsbytagname ("table");


if (subtables.length==0) {


if (tx>=parentcell.left&&tx<=parentcell.right&&ty>=parentcell.top&&ty<= Parentcell.bottom) {


Parenttable.cells[i].appendchild (Drag.ao);


}


Break


}


for (Var j=0 j<subtables.length; J + +) {


var subtable=drag.getinfo (Subtables[j]);


if (tx>=subtable.left&&tx<=subtable.right&&ty>=subtable.top&&ty<= Subtable.bottom) {


Parenttable.cells[i].insertbefore (Drag.ao,subtables[j]);


Break


}else{


Parenttable.cells[i].appendchild (Drag.ao);


}


}


}


}


},


Dragend:function () {


if (! drag.dragged) return;


Drag.dragged=false;


Drag.mm=drag.repos (150,15);


Drag.ao.style.borderwidth= "0px";


drag.ao.style.bordertop= "1px solid #3366cc";


Drag.tdiv.style.borderwidth= "0px";


Drag.ao.style.zindex=1;


Setcookie (drag.ao.id+ "Top", Drag.getinfo (Drag.ao). top);


Setcookie (drag.ao.id+ "left", Drag.getinfo (Drag.ao). left);


Displaysavelayout ();


},


Getinfo:function (o) {//Get coordinates


var to=new Object ();


to.left=to.right=to.top=to.bottom=0;


var twidth=o.offsetwidth;


var theight=o.offsetheight;


while (O!=document.body) {


To.left+=o.offsetleft;


To.top+=o.offsettop;


O=o.offsetparent;


}


To.right=to.left+twidth;


To.bottom=to.top+theight;


return to;


},


Repos:function (Aa,ab) {


var f=drag.tdiv.filters.alpha.opacity;


var tl=parseint (Drag.getinfo (Drag.tdiv). left);


var tt=parseint (Drag.getinfo (drag.tdiv). top);


var kl= (Tl-drag.getinfo (Drag.ao). left)/ab;


var kt= (Tt-drag.getinfo (Drag.ao). top)/ab;


var Kf=f/ab;


Return SetInterval (


function () {


if (ab<1) {


Clearinterval (DRAG.MM);


Drag.tdiv.removeNode (TRUE);


Drag.ao=null;


Return


}


ab--;


TL-=KL;


Tt-=kt;


F-=KF;


Drag.tdiv.style.left=parseint (TL) + "px";


Drag.tdiv.style.top=parseint (TT) + "px";


Drag.tdiv.filters.alpha.opacity=f;


}


, Aa/ab)


},





Inint:function () {//initialization





for (Var i=0;i<parenttable.cells.length;i++) {


var subtables=parenttable.cells[i].getelementsbytagname ("table");


for (Var j=0;j<subtables.length;j++) {


if (subtables[j].classname!= "dragtable") break;


Subtables[j].style.position = "absolute";


Subtables[j].style.left = GetCookie (subtables[j].id+ "left");


Subtables[j].style.top = GetCookie (subtables[j].id+ "top");


Subtables[j].style.position = "relative";


Subtables[j].rows[0].classname= "DRAGTR";


Subtables[j].rows[0].attachevent ("onmousedown", Drag.dragstart);


}


}


document.onmousemove=drag.draging;


Document.onmouseup=drag.dragend;


}


}//end of Object Drag





Drag.inint ();


/*


function _show (str) {


var w=window.open (', ');


var d=w.document;


D.open ();


Str=str.replace (/= (?!)) (.*?) (?!") (|>)/g, "=\" $1\ "$");


Str=str.replace (/(<) (. *?) (>)/g, "<span style= ' color:red;" ><$2></span><br/> ");


Str=str.replace (/\r/g, "<br/>\n");


D.write (str);


}


*/


function Collapseexpand ()


{


var imgobj = event.srcelement;


var contab = imgObj.parentElement.parentElement.parentElement.parentElement;





if (Imgobj.type = = "image" && contab.classname = = "Dragtable")


{


var icon1 = "Hide";


var icon2 = "Show";


var displaycss = "Block";


if (ImgObj.src.indexOf ("Hide") >-1)


{


Icon1 = "Hide";


Icon2 = "show";


Displaycss = "None";


}else{


Icon1 = "show";


Icon2 = "Hide";


Displaycss = "block";


}


for (var i=1; i<contab.rows.length; i++)


{


Contab.rows (i) style.display = displaycss;


}


IMGOBJ.SRC = ImgObj.src.replace (Icon1,icon2);


}else{


Return


}


}//End Function Collaps ()


function GetLayout ()


{


var _tab = new Array ("KPIs", "favorite", "4graph", "1graph");


for (var i=0; i<4; i++)


{


Alert (_tab[i]+ "left:->" +getcookie (_tab[i]+ "left") + "\ n" +_tab[i]+ "top:->" +getcookie (_tab[i]+ "top"))


}


}//End Function GetLayout ()


function Setcookie (cookiename,cookievalue,ndays) {


var today = new Date ();


var expire = new Date ();


if (Ndays==null | | ndays==0) Ndays=1;


Expire.settime (Today.gettime () + 3600000*24*ndays);


Expire.settime (Today.gettime ());


Document.cookie = cookiename+ "=" +escape (cookievalue);//+ "; expires=" +expire.togmtstring ();


Document.cookie = cookiename+ "=" +escape (cookievalue) + "; expires=" +expire.togmtstring ();


}


function Displaysavelayout ()


{


var sl = document.getElementById ("Savelayout");


if (Sl.style.display = "None")


{


Sl.style.display = "block";


}


}//End Function Displaysavelayout ()


function Savelayout ()


{


var sl = document.getElementById ("Savelayout");


if (Sl.style.display = = "Block")


{


Sl.style.display = "None";


Sl.innertext = "Page layout saved successfully.";


Window.status = "Page layout saved successfully.";


}


var tables = document.getelementsbytagname ("table");


for (var i=0; tables.length; i++)


{


Try


{


if (tables[i].id!= "ParentTable" && typeof (Tables[i].id)!= "undefined" && tables[i].id)


{


Alert (tables[i].id+ ":\nleft->" +getcookie (tables[i].id+ "left") + ' \t\t top: ' +getcookie (tables[i].id+ ' top '));


Alert (tables[i].id+ "left:" +tables[i].style.pixleft);





}//


}catch (e)


{


Return


}


}//End for Loop


}//End Function Savelayout ()


</script>