Requirements: :arrow: Just read and you will learn how you can compile your JS in One File :arrow: Cbox account, so you can test this tutorial Register here: [url]cbox.ws[/url] :arrow: You should ha
You are viewing a post by blurrycloud. View all 67 posts in Requirements: :arrow: Just read and you will learn how you can compile your JS in One File :arrow: Cbox account, so you can test this tutorial Register here: [url]cbox.ws[/url] :arrow: You should ha.
2008-02-28 17:51:46
- blurrycloud
- » FTalkAgent
2177
0
1969-12-31
Requirements: :arrow: Just read and you will learn how you can compile your JS in One File :arrow: Cbox account, so you can test this tutorial Register here: [url]cbox.ws[/url] :arrow: You should ha
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: [url]cbox.ws[/url]
You should have the JS linker posted by xavierkym
Click here if you don't have it yet: [url]http://theftalk.com/t18967-Customize-Your-Multiply-Linker-Tutorial%29.html] JS LINKER[/url]
[quote]Credits:
feruzz
marfillaster
mickyvictoria
xavierkym
ephemeral
duchesv
shy19
other multiply tweakers[/quote]
:idea: This tutorial will start with the Addbox function
[quote]function addBox (type,head,htm,id,sibling) {
//by blurrycloud multiply version 2008-3000
//credits to marfillaster friendster version
//types "[color=red]top[/color]" | "[color=red]bottoml[/color]" | "[color=red]bottomr[/color]" | "[color=red]siderail[/color]"
//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);
}
}[/quote]
[quote]Note: you can see there are 4 types in Addbox function multiply, [color=red]top[/color] | [color=red]bottoml[/color] | [color=red]bottomr[/color] | [color=red]siderail[/color]
while in friendster.. we only got two types, the LEFT and RIGHT
[b]1st Part of Tutorial:[/b]
:idea: In multiply for me the most popular position for add-ons is the [color=red]siderail[/color]
because most of the profile i saw is 1 column profile only...[/quote]
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
<">: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
[quote][b]if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};}
function onPageLoad()[/b] [color=green]{[/color]
//ANTI POSER CBOX
var cboxe="<iframe frameborder='0' width='185' height='260' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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("[b]siderail[/b]","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("[b]siderail[/b]","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("[b]siderail[/b]","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("[b]siderail[/b]","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("[b]siderail[/b]","MUSIC MADNESS",mp3,"mp3");
//WVMCBOX
var wcbox="<div align=\"center\" id=\"radio\"><iframe frameborder='0' width='90%' height='300' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe></div>";
addBox("[b]siderail[/b]"," MY PROFILE VIEWER",wcbox,"wcbox");
[color=green]}[/color]
//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://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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] = "[color=red]YOUR HEADER TITLE HERE[/color]";
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*/[/quote]
[quote]Note:
Inside the onload handler and on the function code. you can see red colored text ([color=red]www?, #####, ####[/color])
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 [b]siderail[/b] is the type of position that we use so that all our add-ons will be under our rail[/quote]
[quote]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[/quote]
[quote][b]if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};}
function onPageLoad()[/b]
[color=green]{[/color]
//BOXES HERE
//BOXES HERE
//BOXES HERE AND SO ON....
[color=green]}[/color]
//OTHER FUNCTION HERE[/color][/quote]
Now we are done with setting up all our boxes under our rail....
............................................................................................................................
[b]2nd Part of Tutorial[/b]: Add-ons will be set under your rail([color=red]Sidebar[/color]) and others will be set on the left side which is ([color=red]Mainbar[/color])
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....
[quote][b]if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};}
function onPageLoad()[/b] [color=green]{[/color]
//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("[color=red][b]top[/b][/color]","MY PICTURE SLIDE",slide,"slide");
//ANTI POSER CBOX
var cboxe="<iframe frameborder='0' width='185' height='260' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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("[color=red][b]top[/b][/color]","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("[color=red]siderail[/color]","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("[color=red]siderail[/color]","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("[color=red][b]top[/b][/color]","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("[color=red][b]top[/b][/color]","MUSIC MADNESS",mp3,"mp3");
//WVMCBOX
var wcbox="<div align=\"center\" id=\"radio\"><iframe frameborder='0' width='90%' height='300' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe></div>";
addBox("[color=red]siderail[/color]"," MY PROFILE VIEWER",wcbox,"wcbox");
//REPLACE OWNER PIC by xavey
var image; var sibling;
image = document.createElement("DIV");
image.setAttribute("class","newImg");
image.innerHTML = "[color=red]CONTENT HERE[/color]";
sibling = getElementsByClassName(document.getElementById("rail"),"div","userlogo")[0];
sibling.parentNode.replaceChild(image,sibling);
[color=green]}[/color]
//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://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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] = "[color=red]YOUR HEADER TITLE HERE[/color]";
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*/[/quote]
[quote]:idea: Note: That's it all you have to do is change [b]siderail[/b] into [b]top[/b]
:idea: Advice: It would be much nicer if you will indicate your small boxes like clock, cbox, visitor counter under your RAIL[/quote]
[b]PS: I will add new tutorial on how to compile your js code using the 4 types soon[/b]
[hr]
Added: Replace Owner Pic by xavey
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: [url]cbox.ws[/url]
You should have the JS linker posted by xavierkym
Click here if you don't have it yet: [url]http://theftalk.com/t18967-Customize-Your-Multiply-Linker-Tutorial%29.html] JS LINKER[/url]
[quote]Credits:
feruzz
marfillaster
mickyvictoria
xavierkym
ephemeral
duchesv
shy19
other multiply tweakers[/quote]
:idea: This tutorial will start with the Addbox function
[quote]function addBox (type,head,htm,id,sibling) {
//by blurrycloud multiply version 2008-3000
//credits to marfillaster friendster version
//types "[color=red]top[/color]" | "[color=red]bottoml[/color]" | "[color=red]bottomr[/color]" | "[color=red]siderail[/color]"
//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);
}
}[/quote]
[quote]Note: you can see there are 4 types in Addbox function multiply, [color=red]top[/color] | [color=red]bottoml[/color] | [color=red]bottomr[/color] | [color=red]siderail[/color]
while in friendster.. we only got two types, the LEFT and RIGHT
[b]1st Part of Tutorial:[/b]
:idea: In multiply for me the most popular position for add-ons is the [color=red]siderail[/color]
because most of the profile i saw is 1 column profile only...[/quote]
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
<">: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
[quote][b]if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};}
function onPageLoad()[/b] [color=green]{[/color]
//ANTI POSER CBOX
var cboxe="<iframe frameborder='0' width='185' height='260' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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("[b]siderail[/b]","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("[b]siderail[/b]","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("[b]siderail[/b]","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("[b]siderail[/b]","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("[b]siderail[/b]","MUSIC MADNESS",mp3,"mp3");
//WVMCBOX
var wcbox="<div align=\"center\" id=\"radio\"><iframe frameborder='0' width='90%' height='300' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe></div>";
addBox("[b]siderail[/b]"," MY PROFILE VIEWER",wcbox,"wcbox");
[color=green]}[/color]
//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://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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] = "[color=red]YOUR HEADER TITLE HERE[/color]";
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*/[/quote]
[quote]Note:
Inside the onload handler and on the function code. you can see red colored text ([color=red]www?, #####, ####[/color])
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 [b]siderail[/b] is the type of position that we use so that all our add-ons will be under our rail[/quote]
[quote]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[/quote]
[quote][b]if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};}
function onPageLoad()[/b]
[color=green]{[/color]
//BOXES HERE
//BOXES HERE
//BOXES HERE AND SO ON....
[color=green]}[/color]
//OTHER FUNCTION HERE[/color][/quote]
Now we are done with setting up all our boxes under our rail....
............................................................................................................................
[b]2nd Part of Tutorial[/b]: Add-ons will be set under your rail([color=red]Sidebar[/color]) and others will be set on the left side which is ([color=red]Mainbar[/color])
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....
[quote][b]if (!addEvent(function() { onPageLoad();})) { window.onload = function() { onPageLoad();};}
function onPageLoad()[/b] [color=green]{[/color]
//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("[color=red][b]top[/b][/color]","MY PICTURE SLIDE",slide,"slide");
//ANTI POSER CBOX
var cboxe="<iframe frameborder='0' width='185' height='260' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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("[color=red][b]top[/b][/color]","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("[color=red]siderail[/color]","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("[color=red]siderail[/color]","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("[color=red][b]top[/b][/color]","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("[color=red][b]top[/b][/color]","MUSIC MADNESS",mp3,"mp3");
//WVMCBOX
var wcbox="<div align=\"center\" id=\"radio\"><iframe frameborder='0' width='90%' height='300' src='http://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&sec=main' marginheight='2' marginwidth='2' scrolling='auto' allowtransparency='yes' name='blurry' id='blurry'></iframe></div>";
addBox("[color=red]siderail[/color]"," MY PROFILE VIEWER",wcbox,"wcbox");
//REPLACE OWNER PIC by xavey
var image; var sibling;
image = document.createElement("DIV");
image.setAttribute("class","newImg");
image.innerHTML = "[color=red]CONTENT HERE[/color]";
sibling = getElementsByClassName(document.getElementById("rail"),"div","userlogo")[0];
sibling.parentNode.replaceChild(image,sibling);
[color=green]}[/color]
//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://[color=red]www?[/color].cbox.ws/box/?boxid=[color=red]#####[/color]&boxtag=[color=red]####[/color]&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] = "[color=red]YOUR HEADER TITLE HERE[/color]";
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*/[/quote]
[quote]:idea: Note: That's it all you have to do is change [b]siderail[/b] into [b]top[/b]
:idea: Advice: It would be much nicer if you will indicate your small boxes like clock, cbox, visitor counter under your RAIL[/quote]
[b]PS: I will add new tutorial on how to compile your js code using the 4 types soon[/b]
[hr]
Added: Replace Owner Pic by xavey
Last edited by blurrycloud (2008-05-17 00:46:10)
 |