Alternative Add Box Generators Q and A [spoiler][quote]Q: Apa sih itu? A: Ini adalah generator bwat nambahain box-box baru yang berisi konten yang kita mau. Header dan content dapat kita pilih sendiri. [hr][hr][hr] Q: Saya kan pake WVMe versi XX kok ga bisa muncul box tambahannya? A: Tolong pakai generator AddBox sesuai petunjuk pemakaian dengan benar. Tambahkan onload handler dan addbox function. Dan tolong pakai generator sesuai versi WVMe anda.[/quote] [/spoiler] [UPDATED] Marfi's AddBox Gen: [url]http://h1.ripway.com/tommywinarta/addboxgen.htm[/url] Untuk WVme Ver 3+ addbox 3.1 [url]http://www.freewebs.com/iblizmutz/abbbox3.1.html[/url] Untuk WVme Ver 3+ addbox 2.1 [url]http://h1.ripway.com/Ragnarock/gen2.1.html[/url] Untuk WVme Ver 2+ addbox 2.2 [url]http://theftalk.com/t19396-Addbox-Generator.html[/url] Untuk WVme Ver 2+ Chibibo's AddBox: http://chibibo.elementfx.com/fsaddbox.htm Untuk WVme Ver 2+ Lordheinz's AddBox: http://h1.ripway.com/heinz/wvm.html Untuk WVme Ver 2+ Nophatz AddBox With Min/Max and Tooltips: http://h1.ripway.com/nopathz/mintol.html WVMe Ver 2+ Nophatz AddBox Generator With Min/Max And Tooltips: http://h1.ripway.com/fti/nopzgen.html WVMe Ver 2+ 3+ Credits: FriendsterTalk Members! [hr][hr][hr] Cara pemakaian: Harus punya onload handler di js bagian A: [spoiler] [quote]//onload handler function onProfileLoad() { [b]//masukan code hasil generate di sini[/b] } if (!attachOnLoadHandler(function(){onProfileLoad()})) window.onload = function(){onProfileLoad()};[/quote] Trus harus punya addbox function di bagian c: [quote]function addBox (type,head,htm,id,sibling) { //by marfillaster //type "LEFT" | "RIGHT" //head header string //htm innerHTML string //id css_id string //sibling css_id_insertbefore string | null /* Available default Siblings Default "sibling_ID" Boxes for Reference (10/19/07) LEFT RIGHT "0" = controlpanel "15" = meettrail "1" = photos "2" = friends "13" = blogs "14" = googleads "12" = reviews "7" = fan "6" = moreabout "8" = groups "18" = publiccomments null = appends to last(without "") "10" = scrapbook */ try { var li=document.createElement("li"); } catch(e) { var li=document.createElement("<li>"); } if(type=="LEFT") { var ul=document.getElementById("0").parentNode.parentNode; htm="<div class='boxcontent'>"+htm+"</div>"; } else {var ul=document.getElementById("2").parentNode.parentNode; } li.innerHTML="<div id='"+id+"' class='commonbox "+id+"'>"+ "<h2>"+head+"</h2>"+ "<div id='content_"+id+"'>"+ htm+ "</div>"+ "</div>"; if(sibling==null) ul.appendChild(li); else { sibling=document.getElementById(sibling).parentNode; ul.insertBefore(li,sibling); } }[/quote] [/spoiler] Jadi js nya begini: [spoiler] [quote]//onload handler function onProfileLoad() { //masukan code hasil generate di sini } if (!attachOnLoadHandler(function(){onProfileLoad()})) window.onload = function(){onProfileLoad()}; //Kode2 js lain dibawah ini //AddBox Function function addBox (type,head,htm,id,sibling) { //by marfillaster //type "LEFT" | "RIGHT" //head header string //htm innerHTML string //id css_id string //sibling css_id_insertbefore string | null /* Available default Siblings Default "sibling_ID" Boxes for Reference (10/19/07) LEFT RIGHT "0" = controlpanel "15" = meettrail "1" = photos "2" = friends "13" = blogs "14" = googleads "12" = reviews "7" = fan "6" = moreabout "8" = groups "18" = publiccomments null = appends to last(without "") "10" = scrapbook */ try { var li=document.createElement("li"); } catch(e) { var li=document.createElement("<li>"); } if(type=="LEFT") { var ul=document.getElementById("0").parentNode.parentNode; htm="<div class='boxcontent'>"+htm+"</div>"; } else {var ul=document.getElementById("2").parentNode.parentNode; } li.innerHTML="<div id='"+id+"' class='commonbox "+id+"'>"+ "<h2>"+head+"</h2>"+ "<div id='content_"+id+"'>"+ htm+ "</div>"+ "</div>"; if(sibling==null) ul.appendChild(li); else { sibling=document.getElementById(sibling).parentNode; ul.insertBefore(li,sibling); } }[/quote] [/spoiler] Mengaplikasikan addbox: [quote]var [b]code[/b]="kode html ato apapun kamu disini"; addBox("LEFT","<div>[color=red]Box Title[/color]</div>",[b]code[/b],"[color=green]div244[/color]",null);[/quote] ganti yg di bold dengan kata2 kesukaan kamu tapi keduanya harus tetap sama. ganti yg warna merah sesuai box title kamu. ganti yg warna hijau dengan id box pilihan kmu. Aplikasikan Add Box dengan tooltips & minimizer/maximizer Harus punya: [spoiler] Min/Max Function Di bagian c [quote]function show_hide(the_box) { if (document.getElementById(the_box)) { if (document.getElementById(the_box).style.display == 'none') { document.getElementById(the_box).style.display = 'block'; } else { document.getElementById(the_box).style.display = 'none'; } } }[/quote] [/spoiler] Sama fungsi tooltips: [spoiler] [quote]/********************************** * TOOLTIPS * * Sumber : http://www.swazz.org/ * ***********************************/ if (typeof document.attachEvent!='undefined') { window.attachEvent('onload',init); document.attachEvent('onmousemove',moveMouse); document.attachEvent('onclick',checkMove); } else { window.addEventListener('load',init,false); document.addEventListener('mousemove',moveMouse,false); document.addEventListener('click',checkMove,false); } var oDv=document.createElement("div"); var dvHdr=document.createElement("div"); var dvBdy=document.createElement("div"); var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft; boxOpen=false; ox=10; oy=10; lockX=0; lockY=0; function init() { oDv.appendChild(dvHdr); oDv.appendChild(dvBdy); oDv.style.position="absolute"; oDv.style.visibility='hidden'; document.body.appendChild(oDv); } function defHdrStyle() { dvHdr.innerHTML='<img style="vertical-align:middle" src="info.gif"> '+dvHdr.innerHTML; dvHdr.style.fontWeight='bold'; dvHdr.style.width='170px'; dvHdr.style.fontFamily='Tahoma'; dvHdr.style.border='1px solid #A5CFE9'; dvHdr.style.padding='3'; dvHdr.style.fontSize='11'; dvHdr.style.color='#4B7A98'; dvHdr.style.background='#D5EBF9'; dvHdr.style.filter='alpha(opacity=85)'; // IE dvHdr.style.opacity='0.85'; // FF } function defBdyStyle() { dvBdy.style.borderBottom='1px solid #A5CFE9'; dvBdy.style.borderLeft='1px solid #A5CFE9'; dvBdy.style.borderRight='1px solid #A5CFE9'; dvBdy.style.width='170px'; dvBdy.style.fontFamily='Tahoma'; dvBdy.style.fontSize='11'; dvBdy.style.padding='3'; dvBdy.style.color='#1B4966'; dvBdy.style.background='#FFFFFF'; dvBdy.style.filter='alpha(opacity=85)'; // IE dvBdy.style.opacity='0.85'; // FF } function checkElemBO(txt) { if (!txt || typeof(txt) != 'string') return false; if ((txt.indexOf('header')>-1)&&(txt.indexOf('body')>-1)&&(txt.indexOf('[')>-1)&&(txt.indexOf('[')>-1)) return true; else return false; } function scanBO(curNode) { if (checkElemBO(curNode.title)) { curNode.boHDR=getParam('header',curNode.title); curNode.boBDY=getParam('body',curNode.title); curNode.boCSSBDY=getParam('cssbody',curNode.title); curNode.boCSSHDR=getParam('cssheader',curNode.title); curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:false; curNode.fixX=parseInt(getParam('fixedrelx',curNode.title)); curNode.fixY=parseInt(getParam('fixedrely',curNode.title)); curNode.absX=parseInt(getParam('fixedabsx',curNode.title)); curNode.absY=parseInt(getParam('fixedabsy',curNode.title)); curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10; curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10; curNode.fade=(getParam('fade',curNode.title)=='on')?true:false; curNode.fadespeed=(getParam('fadespeed',curNode.title)!='')?getParam('fadespeed',curNode.title):0.04; curNode.delay=(getParam('delay',curNode.title)!='')?parseInt(getParam('delay',curNode.title)):0; if (getParam('requireclick',curNode.title)=='on') { curNode.requireclick=true; document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false); document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false); } else {// Note : if requireclick is on the stop clicks are ignored if (getParam('doubleclickstop',curNode.title)!='off') { document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false); } if (getParam('singleclickstop',curNode.title)=='on') { document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false); } } curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:true; curNode.title=''; curNode.hasbox=1; } else curNode.hasbox=2; } function getParam(param,list) { var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]'); var res = reg.exec(list); var returnvar; if(res) return res[2].replace('[[','[').replace(']]',']'); else return ''; } function Left(elem){ var x=0; if (elem.calcLeft) return elem.calcLeft; var oElem=elem; while(elem){ if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0)) x+=parseInt(elem.currentStyle.borderLeftWidth); x+=elem.offsetLeft; elem=elem.offsetParent; } oElem.calcLeft=x; return x; } function Top(elem){ var x=0; if (elem.calcTop) return elem.calcTop; var oElem=elem; while(elem){ if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0)) x+=parseInt(elem.currentStyle.borderTopWidth); x+=elem.offsetTop; elem=elem.offsetParent; } oElem.calcTop=x; return x; } var ah,ab; function applyStyles() { if(ab) oDv.removeChild(dvBdy); if (ah) oDv.removeChild(dvHdr); dvHdr=document.createElement("div"); dvBdy=document.createElement("div"); CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle(); CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle(); dvHdr.innerHTML=CBE.boHDR; dvBdy.innerHTML=CBE.boBDY; ah=false; ab=false; if (CBE.boHDR!='') { oDv.appendChild(dvHdr); ah=true; } if (CBE.boBDY!=''){ oDv.appendChild(dvBdy); ab=true; } } var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width, height ; var ini=false; // Customised function for inner window dimension function SHW() { if (document.body && (document.body.clientWidth !=0)) { width=document.body.clientWidth; height=document.body.clientHeight; } if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) { width=document.documentElement.clientWidth; height=document.documentElement.clientHeight; } return [width,height]; } var ID=null; function moveMouse(e) { //boxMove=true; e?evt=e:evt=event; CSE=evt.target?evt.target:evt.srcElement; if (!CSE.hasbox) { // Note we need to scan up DOM here, some elements like TR don't get triggered as srcElement iElem=CSE; while ((iElem.parentNode) && (!iElem.hasbox)) { scanBO(iElem); iElem=iElem.parentNode; } } if ((CSE!=LSE)&&(!isChild(CSE,dvHdr))&&(!isChild(CSE,dvBdy))){ if (!CSE.boxItem) { iterElem=CSE; while ((iterElem.hasbox==2)&&(iterElem.parentNode)) iterElem=iterElem.parentNode; CSE.boxItem=iterElem; } iterElem=CSE.boxItem; if (CSE.boxItem&&(CSE.boxItem.hasbox==1)) { LBE=CBE; CBE=iterElem; if (CBE!=LBE) { applyStyles(); if (!CBE.requireclick) if (CBE.fade) { if (ID!=null) clearTimeout(ID); ID=setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay); } else { if (ID!=null) clearTimeout(ID); COL=1; ID=setTimeout("oDv.style.visibility='visible';ID=null;",CBE.delay); } if (CBE.IEbugfix) {hideSelects();} fixposx=!isNaN(CBE.fixX)?Left(CBE)+CBE.fixX:CBE.absX; fixposy=!isNaN(CBE.fixY)?Top(CBE)+CBE.fixY:CBE.absY; lockX=0; lockY=0; boxMove=true; ox=CBE.offX?CBE.offX:10; oy=CBE.offY?CBE.offY:10; } } else if (!isChild(CSE,dvHdr) && !isChild(CSE,dvBdy) && (boxMove)) { // The conditional here fixes flickering between tables cells. if ((!isChild(CBE,CSE)) || (CSE.tagName!='TABLE')) { CBE=null; if (ID!=null) clearTimeout(ID); fadeOut(); showSelects(); } } LSE=CSE; } else if (((isChild(CSE,dvHdr) || isChild(CSE,dvBdy))&&(boxMove))) { totalScrollLeft=0; totalScrollTop=0; iterElem=CSE; while(iterElem) { if(!isNaN(parseInt(iterElem.scrollTop))) totalScrollTop+=parseInt(iterElem.scrollTop); if(!isNaN(parseInt(iterElem.scrollLeft))) totalScrollLeft+=parseInt(iterElem.scrollLeft); iterElem=iterElem.parentNode; } if (CBE!=null) { boxLeft=Left(CBE)-totalScrollLeft; boxRight=parseInt(Left(CBE)+CBE.offsetWidth)-totalScrollLeft; boxTop=Top(CBE)-totalScrollTop; boxBottom=parseInt(Top(CBE)+CBE.offsetHeight)-totalScrollTop; doCheck(); } } if (boxMove&&CBE) { // This added to alleviate bug in IE6 w.r.t DOCTYPE bodyScrollTop=document.documentElement&&document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop; bodyScrollLet=document.documentElement&&document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft; mouseX=evt.pageX?evt.pageX-bodyScrollLet:evt.clientX-document.body.clientLeft; mouseY=evt.pageY?evt.pageY-bodyScrollTop:evt.clientY-document.body.clientTop; if ((CBE)&&(CBE.windowLock)) { mouseY < -oy?lockY=-mouseY-oy:lockY=0; mouseX < -ox?lockX=-mouseX-ox:lockX=0; mouseY > (SHW()[1]-oDv.offsetHeight-oy)?lockY=-mouseY+SHW()[1]-oDv.offsetHeight-oy:lockY=lockY; mouseX > (SHW()[0]-dvBdy.offsetWidth-ox)?lockX=-mouseX-ox+SHW()[0]-dvBdy.offsetWidth:lockX=lockX; } oDv.style.left=((fixposx)||(fixposx==0))?fixposx:bodyScrollLet+mouseX+ox+lockX+"px"; oDv.style.top=((fixposy)||(fixposy==0))?fixposy:bodyScrollTop+mouseY+oy+lockY+"px"; } } function doCheck() { if ( (mouseX < boxLeft) || (mouseX >boxRight) || (mouseY < boxTop) || (mouseY > boxBottom)) { if (!CBE.requireclick) fadeOut(); if (CBE.IEbugfix) {showSelects();} CBE=null; } } function pauseBox(e) { e?evt=e:evt=event; boxMove=false; evt.cancelBubble=true; } function showHideBox(e) { oDv.style.visibility=(oDv.style.visibility!='visible')?'visible':'hidden'; } function hideBox(e) { oDv.style.visibility='hidden'; } var COL=0; var stopfade=false; function fadeIn(fs) { ID=null; COL=0; oDv.style.visibility='visible'; fadeIn2(fs); } function fadeIn2(fs) { COL=COL+fs; COL=(COL>1)?1:COL; oDv.style.filter='alpha(opacity='+parseInt(100*COL)+')'; oDv.style.opacity=COL; if (COL<1) setTimeout("fadeIn2("+fs+")",20); } function fadeOut() { oDv.style.visibility='hidden'; } function isChild(s,d) { while(s) { if (s==d) return true; s=s.parentNode; } return false; } var cSrc; function checkMove(e) { e?evt=e:evt=event; cSrc=evt.target?evt.target:evt.srcElement; if ((!boxMove)&&(!isChild(cSrc,oDv))) { fadeOut(); if (CBE&&CBE.IEbugfix) {showSelects();} boxMove=true; CBE=null; } } function showSelects(){ var elements = document.getElementsByTagName("select"); for (i=0;i< elements.length;i++){ elements[i].style.visibility='visible'; } } function hideSelects(){ var elements = document.getElementsByTagName("select"); for (i=0;i< elements.length;i++){ elements[i].style.visibility='hidden'; } }[/quote] [/spoiler] Contoh hasil generated box: [quote]var code="kode html ato apapun kamu disini"; addBox("LEFT","<a href=\"#\" onClick=\"show_hide('content_div412'); return false\"><div title=\"header=[Tooltips Header] body=[Tooltips Body]\">Box Title</div></a>",code,"div412",null); show_hide("content_div412");[/quote] Masih bingung dengan bagian a, b, dan c? Ini saya bikin lebih simple lagi. [spoiler] [quote]// BAGIAN A //---------------------------------------- function onProfileLoad() { // BAGIAN B (onload handler) // masukan code hasil generate di sini } //---------------------------------------- // BAGIAN C if (!attachOnLoadHandler(function(){onProfileLoad()})) window.onload = function(){onProfileLoad()};[/quote] [/spoiler] Tinggal masukin kode2 js kmu tuh...... Trus, buat para kontributor di FTI..... Biasanya pada ga tau..... Harus taruh js hasil coding mereka dimana..... Nih penjelasannya: Bagian A buat bangian js yg pertama kali akan di load Bagian B adalah bagian yg digunakan untuk addBox dan dapat digunakan apabila js tak bekerja secara optimal di bagian a/c bagian C adalah bagian2 untuk function (contoh: refresh()) [b]Bonus[/b] Tracker.js siap pakai! [spoiler] <">[/spoiler] Untuk WVM Compilation ada disini: http://theftalk.com/t36532-Compiled-WVM-Version.html [hr][hr][hr][hr] [color=red]Satiya's Tutorial[/color] [b]sebelumnya saya minta ijin kpd mod ft untuk membuka thread baru.... bila tidak berguna silahkan ditutup. [/b] sebenernya seh ini thread sama kaya poenya sista anna, tapi masih sering newbie bingung mnambahkan box bila melihat tutorial bang kanal (tau, sekarang tutorial abang dengan [b]judul AddBox Standalone ma WVM[/b] yg dulunya sticky jd kmana.... maap gagh bsa kasih linknya) trus memakai wvm versi beda2. langsung saja... bnyak kali newbie yg bingung...ktika mnambahkan box didalam profil mereka. so langsung saja kita mulai.... begini bro / sist ... mnurut hasil pengalaman dan tutor dr para senior khususnya abang kanal. dan mengingat para newbie sering kali newbie bingung mnambahkan box bila memakai [b]WVM[/b] setau saya sekarang ini ada [b]2 fungsi addBox[/b] so penjelasannya click dhis spoiler: [spoiler] [b]In dhis one yg defaultnya WVM 3.9 seperti dibawah ini[/b] [quote][b]addBox(pageOwnerFName+"'s Visitors",TRACKER.div.innerHTML,"tracker","right");[/b][/quote] klo Addbox bro LoseMyself seperti itu... tinggal ikutin alurnya saja di penambahan box berikutnya misal saya poenya script jam seperti ini. <">[b]So....[/b]penambahan addboxnya tinggal ngikutin alurnya saja, jd kayak gini: [quote]//SCRIPT JAM var jam="<embed src='http://www.clocklink.com/clocks/8003-orange.swf?TimeZone=ICT&' width='150' height='150' wmode='transparent' type='application/x-shockwave-flash'>"; [b]addBox(judul boxnya,content_jam,"content_jam","right",null);[/b][/quote] [b]bag judul boxnya[/b] bsa diganti sesuka hati. [b]"RIGHT"[/b] untuk peletakkan boxnya... bsa dikanan (right), bsa dikiri(left), [b]Null[/b] fungsi null saya tambahkan karena nantinya box tersebut terletak di bawah sendiri. [b][color=red]Jd kesimpulannya box tersebut akan berada di sebelah kanan dan terletak dibawah sendiri[/color][/b] [b][color=green] penambahan box untuk mode yg lainnya lagi default WVM 3.4.1 [/color][/b] ada juga jenis box yg scriptnya macam seperti ini: [quote][b]addBox("RIGHT",pageOwnerFName+"'s Visitors",TRACKER.div.innerHTML,"tracker","2");[/b][/quote] bila dilihat sepintas memang serupa tapi tag sama.... so klo saya poenya script jam yg seperti tadi dengan menggunakan addBox seperti contoh ke yg ini, maka penulisan scriptnya jd kayak gni. [quote]//SCRIPT JAM var jam="<embed src='http://www.clocklink.com/clocks/8003-orange.swf?TimeZone=ICT&' width='150' height='150' wmode='transparent' type='application/x-shockwave-flash'>"; addBox("RIGHT",JUDUL BOXNYA,content_jam,"content_jam",null);[/quote] Untuk penjelasannya tetep sama... Right,judul box, serta nama kontennya. nah semoga bro bsa membedakan antar 2 fungsi box tersebut.... sekarang tinggal lihad... model seperti apa box yg bro and sist poenya. semoga membantu..... [/spoiler] maap klo ad salah kata ato penjelasan yg kurang.... mungkin senior bsa membenarkannya. sekian dan thanks. semoga berguna yap. [b]Credit: sist anna, bang kanal, dll [/b] [quote=kiddy]thanks.. kan lebih enak tuh.. disaranin buat para member.. harap men-subscribe kan trit ini buat memudah kan kita juga qo!![/quote] Iya tuh bener2.... Kalo bisa dijadiin topik sticky... Heheh [hr][hr][hr][hr] [quote=gbangetz]buat para master friendstertalk saya mohon izin dan restunya klik di sene [align=center][url]http://h1.ripway.com/gu3bangetz/addbox/addboxgen.htm[/url][/align] semoga berhasil contoh hasilnya [img]http://img297.imageshack.us/img297/5452/friendster3oc4.png[/img] ini kodenya [quote]http://h1.ripway.com/gu3bangetz/contoh.js[/quote] generate di sini [url]http://www.balibersatu.com/layout/index3.html[/url][/quote]

Last edited by deathwish4MCR-freak-dude (2008-08-16 08:05:50)