FTalk

Requirements:
Just read and you will learn how you can compile your JS in One File
Cbox account, so you can test this tutorial
Register here: cbox.ws
You should have the JS linker posted by xavierkym
Click here if you don't have it yet: http://theftalk.com/t18967-Customize-Yo… JS LINKER

Credits:
feruzz
marfillaster
mickyvictoria
xavierkym
ephemeral
duchesv
shy19
  other multiply tweakers

:idea: This tutorial will start with the Addbox function

function addBox (type,head,htm,id,sibling) {
//by blurrycloud multiply version 2008-3000
//credits to marfillaster friendster version
//types "top" | "bottoml" | "bottomr" | "siderail"
//head header string
//htm innerHTML string
//id css_id string

/* Available default Siblings
Coming Soon
*/

    try {
        var br=document.createElement("li");
    } catch(e) {
        var br=document.createElement("<br>");
    }
    if(type=="top") {
        var ul=document.getElementById("mainbox_1");
        htm="<div class='itemboxsub'>"+htm+"</div>";
    }
     else if(type=="bottomr") {
         var ul=document.getElementById("mainbox_4");
    }
    else if(type=="siderail") {
         var ul=document.getElementById("rail");
    }
    else var ul=document.getElementById("mainbox_3");
   
    br.innerHTML="<br><div id='"+id+"' class='itemboxsub "+id+"'>"+
                    "<h2>"+head+"</h2>"+
                    "<div id='content_"+id+"'>"+htm+
                    "</div>"+
                    "</div>";
                   
    if(sibling==null) ul.appendChild(br);
    else {
        sibling=document.getElementById(sibling);
        ul.insertBefore(br,sibling);
    }
}

Note: you can see there are 4 types in Addbox function multiply, top | bottoml | bottomr | siderail
while in friendster.. we only got two types, the LEFT and RIGHT


1st Part of Tutorial:
:idea: In multiply for me the most popular position for add-ons is the siderail
because most of the profile i saw is 1 column profile only...

So i will going to relay how can we put all our add-ons on the siderail(Under Your Rail) using the Addbox Function

First Step: Put the Addbox function above all your JS File

function addBox (type,head,htm,id,sibling) {
//by blurrycloud multiply version 2008-3000
//credits to marfillaster friendster version
//type "top" | "bottoml" | "bottomr" | "siderail"
//head header string
//htm innerHTML string
//id css_id string

/* Available default Siblings
Coming Soon
*/

    try {
        var br=document.createElement("li");
    } catch(e) {
        var br=document.createElement("<br>");
    }
    if(type=="top") {
        var ul=document.getElementById("mainbox_1");
        htm="<div class='itemboxsub'>"+htm+"</div>";
    }
     else if(type=="bottomr") {
         var ul=document.getElementById("mainbox_4");
         
    } 
    else if(type=="siderail") {
         var ul=document.getElementById("rail");
    } 
    else var ul=document.getElementById("mainbox_3");
   
    br.innerHTML="<br><div id='"+id+"' class='itemboxsub "+id+"'>"+
                    "<h2>"+head+"</h2>"+
                    "<div id='content_"+id+"'>"+htm+
                    "</div>"+
                    "</div>";
                   
    if(sibling==null) ul.appendChild(br);
    else {
        sibling=document.getElementById(sibling);
        ul.insertBefore(br,sibling);
    }
}

:idea: Now we're going to need the onload handler for our add-ons or new boxes and setting up all our add-ons below our rail

if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};}

function onPageLoad() {




//ANTI POSER CBOX
var cboxe="<iframe frameborder='0' width='185' height='260' src='http://www?.cbox.ws/box/?boxid=#####&boxtag=####&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe><br/><form name='chat' width='60%' target='blurry' action='http://www?.cbox.ws/box/?boxid=#####&boxtag=####&sec=submit' method='post'><input type='hidden' name='nme' value='"+pageViewerFName+"'><input type='hidden' maxlength='50' name='eml' value='http://"+pageViewerFName+".multiply.com/'><textarea style='overflow:hidden' class='cboxMsgArea' cols='22' rows='3' name='pst'></textarea><br /><input type='submit' class='cboxButtons' value='Submit' name='asa' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"><input class='cboxButtons' type='reset' value='Clear' maxlength='23' onClick='reset()' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"><input type='button' class='cboxButtons' value='Refresh' name='blurry' onClick='window.blurry.location.href=document.getElementById(\"blurry\").src' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"></form>";
addBox("siderail","Chit-Chat",cboxe,"cboxe");


//CLOCK
var clock="<div align='center' id='clock'>"+
"<embed src='http://www.clocklink.com/clocks/5005-green.swf?TimeZone=GMT0800&'  width='120' height='50' wmode='transparent' type='application/x-shockwave-flash'></embed>"+"</div>";
addBox("siderail","Time Check",clock,"clock");


//MOOD FOR THE DAY
var mmood="<a href='http://www.punkymoods.net' title='Punkymoods (Unkymoods redux): Showcase your current mood'><center><img src='http://www.punkymoods.net/mood.php?userid=9283' alt='My Mood For The Day' border='0' /></center></a>";
addBox("siderail","MY MOOD FOR THE DAY",mmood,"mmood");

//YOUTUBE
var youtube7="<embed src='http://www.youtube.com/v/JDBtSpiWlxs&rel=1' type='application/x-shockwave-flash' width='90%' height='100'></embed>";
addBox("siderail","VIDEO",youtube7,"ul_youtube_content");

//MP3
var mp3="<embed src='http://www.loudfusion.com/widgets/music/6' name='Loudfusion.com' quality=\"high\" wmode=\"transparent\" flashvars=\"USERID=331726&FOLDERID=10465\" width=\"210\" height=\"125\" type=\"application/x-shockwave-flash\"></embed>";
addBox("siderail","MUSIC MADNESS",mp3,"mp3");

//WVMCBOX
var wcbox="<div align=\"center\" id=\"radio\"><iframe frameborder='0' width='90%' height='300' src='http://www?.cbox.ws/box/?boxid=#####&boxtag=####&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe></div>";
addBox("siderail"," MY PROFILE VIEWER",wcbox,"wcbox");

}


//OTHER CODES GOES HERE

/*Page Owner/Viewer Basis*/
var pageOwnerFName;
var pageViewerFName;

pageOwnerFName = window.location.href.slice(7, window.location.href.indexOf("."));

try {
    pageViewerFName = getElementsByClassName(null,"span","signoutid")[0].firstChild.innerHTML.replace(/Hi,\s+?/gim, "");
}catch(e) {
    pageViewerFName = "";
}

function getElementsByClassName(oElm,sTag,sClass) {
        var elm = [];
        if (!oElm)oElm = document;
        if (!sTag)sTag = "*";
    var els = oElm.getElementsByTagName(sTag) || document.all;
            for (var j=0,k=els.length;j<k;j++) {
                 if (new RegExp(sClass).test(els[j].className)) {
                     elm.push(els[j]);
                 }
            }
             return elm;
}


/*WVM CBOX FUNCTION*/
if((pageViewerFName != pageOwnerFName) && (pageViewerFName != "")) {
var getsubnavc = document.getElementById("subnavc");
getsubnavc.innerHTML = "<center>"+
    "<div style='display:none'>"+
    "<iframe name='cbox_post' id='cbox_post'>"+
    "</iframe>"+
    "<form id='cform' target='cbox_post' action='http://www?.cbox.ws/box/?boxid=#####&boxtag=####&sec=submit' method='post'>"+
    "<input type='text' maxlength='25' name='nme' value=\""+pageViewerFName+"\">"+
    "<input type='text' maxlength='50' name='eml' value='http://"+pageViewerFName+".multiply.com/'>"+
    "<input type='text' maxlength='200' name='pst' value='"+Date().replace(/\(.+\)/,"")+"'>"+
    "<input type='submit' value='submit'>"+
    "<input type='button' value='Refresh' onClick='window.wvmcboxmain.location.href=document.getElementById(\"wvmcboxmain\").src'>"+
    "</form>"+
    "</div>";
 
    document.getElementById("cform").submit();
}

//ANIMATED TITLE HEADER
function tb10_makeArray(n){
this.length = n;
return this.length;
}
tb10_messages = new tb10_makeArray(1);
tb10_messages[0] = "YOUR HEADER TITLE HERE";
tb10_rptType = 'infinite';
tb10_rptNbr = 5;
tb10_speed = 100;
tb10_delay = 2000;
var tb10_wiper
var tb10_space=" "
var tb10_currMsg=0;
var tb10_counter=1;
var tb10_index=0
tb10_main()
function tb10_main()
{
document.title=tb10_messages[tb10_currMsg].substring(0,tb10_index)
tb10_index++
if(tb10_index==(tb10_messages[tb10_currMsg].length+4)){setTimeout('tb10_reset_clear()',tb10_delay);}
else{setTimeout('tb10_main()',tb10_speed)}
}
function tb10_reset_clear()
{
tb10_index=0
tb10_wiper=""
for(var a=0;a<tb10_messages[tb10_currMsg].length;a++){tb10_wiper+=tb10_space}
tb10_clearem()
}
function tb10_clearem()
{
document.title=tb10_wiper.substring(0,tb10_index) + "-0" + tb10_messages[tb10_currMsg].substring(tb10_index+2,tb10_messages[tb10_currMsg].length)
tb10_index++
if(tb10_index==(tb10_messages[tb10_currMsg].length+4)){
if (tb10_currMsg == tb10_messages.length-1){
if ((tb10_rptType == 'finite') && (tb10_counter==tb10_rptNbr)){
document.title="";
return;
}
tb10_counter++;
tb10_currMsg = 0;
}
else tb10_currMsg++;
tb10_index=0
tb10_main()
}
else{setTimeout('tb10_clearem()',250)}
}

/*Welcome Alert*/

/*GoodBye Alert*/

Note:
Inside the onload handler and on the function code. you can see red colored text (www?, #####, ####) 
that is the part you can edit your Cbox source, id and tag
You can also edit the animated title header.. just change the red text for your own desire..
:idea: the bold part siderail is the type of position that we use so that all our add-ons will be under our rail

Reminder:
:idea: You should never put other function inside your onload handler...
Functions must be place below your JS CODES
:idea: You should not set your Add-ons outside the onload handler... REFER BELOW

if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};}
function onPageLoad()
{
//BOXES HERE

//BOXES HERE

//BOXES HERE AND SO ON....
}

//OTHER FUNCTION HERE[/color]

Now we are done with setting up all our boxes under our rail....


............................................................................................................................
2nd Part of Tutorial: Add-ons will be set under your rail(Sidebar) and others will be set on the left side which is (Mainbar)

Now all we going to have to do is... relay on the tutorial above and just change the type of position of the other add-ons...

Step 1: Paste Addbox function above all your codes.. if you already have it skip this step.

Step 2: Placing your new boxes inside your Onload handler

:idea: We will change some types of position [color]siderail[/color] into [color]top[/color] so your some of your add-ons will be on your mainbar....

if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};}

function onPageLoad() {

//SLIDE from slide.com
var slide="<embed src=\"http://widget-e7.slide.com/widgets/slideticker.swf\" type=\"application/x-shockwave-flash\" quality=\"high\" scale=\"noscale\" salign=\"l\" wmode=\"transparent\" flashvars=\"cy=fr&il=1&channel=432323564245203918&site=widget-e7.slide.com\" style=\"width:90%;height:125px\" name=\"flashticker\" align=\"middle\"/><div style=\"width:100%;text-align:center;\">";
addBox("top","MY PICTURE SLIDE",slide,"slide");


//ANTI POSER CBOX
var cboxe="<iframe frameborder='0' width='185' height='260' src='http://www?.cbox.ws/box/?boxid=#####&boxtag=####&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe><br/><form name='chat' width='60%' target='blurry' action='http://www?.cbox.ws/box/?boxid=#####&boxtag=####&sec=submit' method='post'><input type='hidden' name='nme' value='"+pageViewerFName+"'><input type='hidden' maxlength='50' name='eml' value='http://"+pageViewerFName+".multiply.com/'><textarea style='overflow:hidden' class='cboxMsgArea' cols='22' rows='3' name='pst'></textarea><br /><input type='submit' class='cboxButtons' value='Submit' name='asa' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"><input class='cboxButtons' type='reset' value='Clear' maxlength='23' onClick='reset()' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"><input type='button' class='cboxButtons' value='Refresh' name='blurry' onClick='window.blurry.location.href=document.getElementById(\"blurry\").src' onmouseover=\"this.className='cboxButtons cboxButtonshov'\" onmouseout=\"this.className='cboxButtons'\"></form>";
addBox("top","Chit-Chat",cboxe,"cboxe");


//CLOCK
var clock="<div align='center' id='clock'>"+
"<embed src='http://www.clocklink.com/clocks/5005-green.swf?TimeZone=GMT0800&'  width='120' height='50' wmode='transparent' type='application/x-shockwave-flash'></embed>"+"</div>";
addBox("siderail","Time Check",clock,"clock");


//MOOD FOR THE DAY
var mmood="<a href='http://www.punkymoods.net' title='Punkymoods (Unkymoods redux): Showcase your current mood'><center><img src='http://www.punkymoods.net/mood.php?userid=9283' alt='My Mood For The Day' border='0' /></center></a>";
addBox("siderail","MY MOOD FOR THE DAY",mmood,"mmood");

//YOUTUBE
var youtube7="<embed src='http://www.youtube.com/v/JDBtSpiWlxs&rel=1' type='application/x-shockwave-flash' width='90%' height='100'></embed>";
addBox("top","VIDEO",youtube7,"ul_youtube_content");

//MP3
var mp3="<embed src='http://www.loudfusion.com/widgets/music/6' name='Loudfusion.com' quality=\"high\" wmode=\"transparent\" flashvars=\"USERID=331726&FOLDERID=10465\" width=\"210\" height=\"125\" type=\"application/x-shockwave-flash\"></embed>";
addBox("top","MUSIC MADNESS",mp3,"mp3");

//WVMCBOX
var wcbox="<div align=\"center\" id=\"radio\"><iframe frameborder='0' width='90%' height='300' src='http://www?.cbox.ws/box/?boxid=#####&boxtag=####&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe></div>";
addBox("siderail"," MY PROFILE VIEWER",wcbox,"wcbox");

//REPLACE OWNER PIC by xavey
var image; var sibling;
image = document.createElement("DIV");
image.setAttribute("class","newImg");
image.innerHTML = "CONTENT HERE";
sibling = getElementsByClassName(document.getElementById("rail"),"div","userlogo")[0];
sibling.parentNode.replaceChild(image,sibling);

}


//OTHER CODES GOES HERE

/*Page Owner/Viewer Basis*/
var pageOwnerFName;
var pageViewerFName;

pageOwnerFName = window.location.href.slice(7, window.location.href.indexOf("."));

try {
    pageViewerFName = getElementsByClassName(null,"span","signoutid")[0].firstChild.innerHTML.replace(/Hi,\s+?/gim, "");
}catch(e) {
    pageViewerFName = "";
}

function getElementsByClassName(oElm,sTag,sClass) {
        var elm = [];
        if (!oElm)oElm = document;
        if (!sTag)sTag = "*";
    var els = oElm.getElementsByTagName(sTag) || document.all;
            for (var j=0,k=els.length;j<k;j++) {
                 if (new RegExp(sClass).test(els[j].className)) {
                     elm.push(els[j]);
                 }
            }
             return elm;
}


/*WVM CBOX FUNCTION*/
if((pageViewerFName != pageOwnerFName) && (pageViewerFName != "")) {
var getsubnavc = document.getElementById("subnavc");
getsubnavc.innerHTML = "<center>"+
    "<div style='display:none'>"+
    "<iframe name='cbox_post' id='cbox_post'>"+
    "</iframe>"+
    "<form id='cform' target='cbox_post' action='http://www?.cbox.ws/box/?boxid=#####&boxtag=####&sec=submit' method='post'>"+
    "<input type='text' maxlength='25' name='nme' value=\""+pageViewerFName+"\">"+
    "<input type='text' maxlength='50' name='eml' value='http://"+pageViewerFName+".multiply.com/'>"+
    "<input type='text' maxlength='200' name='pst' value='"+Date().replace(/\(.+\)/,"")+"'>"+
    "<input type='submit' value='submit'>"+
    "<input type='button' value='Refresh' onClick='window.wvmcboxmain.location.href=document.getElementById(\"wvmcboxmain\").src'>"+
    "</form>"+
    "</div>";
 
    document.getElementById("cform").submit();
}

//ANIMATED TITLE HEADER
function tb10_makeArray(n){
this.length = n;
return this.length;
}
tb10_messages = new tb10_makeArray(1);
tb10_messages[0] = "YOUR HEADER TITLE HERE";
tb10_rptType = 'infinite';
tb10_rptNbr = 5;
tb10_speed = 100;
tb10_delay = 2000;
var tb10_wiper
var tb10_space=" "
var tb10_currMsg=0;
var tb10_counter=1;
var tb10_index=0
tb10_main()
function tb10_main()
{
document.title=tb10_messages[tb10_currMsg].substring(0,tb10_index)
tb10_index++
if(tb10_index==(tb10_messages[tb10_currMsg].length+4)){setTimeout('tb10_reset_clear()',tb10_delay);}
else{setTimeout('tb10_main()',tb10_speed)}
}
function tb10_reset_clear()
{
tb10_index=0
tb10_wiper=""
for(var a=0;a<tb10_messages[tb10_currMsg].length;a++){tb10_wiper+=tb10_space}
tb10_clearem()
}
function tb10_clearem()
{
document.title=tb10_wiper.substring(0,tb10_index) + "-0" + tb10_messages[tb10_currMsg].substring(tb10_index+2,tb10_messages[tb10_currMsg].length)
tb10_index++
if(tb10_index==(tb10_messages[tb10_currMsg].length+4)){
if (tb10_currMsg == tb10_messages.length-1){
if ((tb10_rptType == 'finite') && (tb10_counter==tb10_rptNbr)){
document.title="";
return;
}
tb10_counter++;
tb10_currMsg = 0;
}
else tb10_currMsg++;
tb10_index=0
tb10_main()
}
else{setTimeout('tb10_clearem()',250)}
}

/*Welcome Alert*/

/*GoodBye Alert*/

:idea: Note: That's it all you have to do is change siderail into  top

:idea: Advice: It would be much nicer if you will indicate your small boxes  like clock, cbox, visitor counter under your RAIL

PS: I will add new tutorial on how to compile your js code using the 4 types soon

Last edited by blurrycloud (2008-05-17 04:46:10)