friendsterTalk - Friendster Forum

CREDITS:
XAVIER 
SHIROW MASAMUNE 
me.. (hehe) 

This is basically a compilation of codes that formed into a new breed of layouts..
A Demi-overlay (credits to Shirow for the name) is a cross between a CSS and an OVERLAY layout. It uses var replacement codes and sir Xavier's content changer. It is not that hard to work on but There are a few requirements that need to be done beforehand:

You must have complete knowledge of this thread: http://friendstertalk.com/t7708-link%28…sa%29.html
You must be a firefox user! it looks hellish in IE (coz IE sucks!)
must have hide codes for all boxes except groups box and cpbox!! (it depends on you)

ok then..

first paste the codes of xavier like this:
STEP 1: (make the buttons)
inside the loader (you can still edit this)

var benjo="<a href=\"javascript:onClick=get_properties('2')\">photos</a></br>"+
"<a href=\"javascript:onClick=get_properties('6')\">about me </a></br>"+
"<a href=\"javascript:onClick=get_properties('2')\"></a> friends</br>"+
"<a href=\"javascript:onClick=get_properties('18')\">comments</a></br>"+
"<a href=\"javascript:onClick=get_properties('footer_container')\">footer</a></br>"+
"<a href=\"javascript:onClick=get_properties('12')\">back</a></center>";
document.getElementById('8').style.height='100%';
document.getElementById('8').style.overflowY='hidden';
document.getElementById('8').innerHTML = "<table width='100%'><tr><td align='center'>"+benjo+"</td></tr></table>";

you can do image buttons... these are my codes (im happy to share)

var hudas = "<center>"+"<a href=\"javascript:onClick=get_properties('12')\"><img border='0' src= 'http://h1.ripway.com/dracoknight09/BUTTONS/control.gif' /><br></a>"+
"<a href=\"javascript:onClick=get_properties('1')\"><img border='0' src= 'http://h1.ripway.com/dracoknight09/BUTTONS/photos.gif' /><br></a>"+"<a href=\"javascript:onClick=get_properties('2')\"><img border='0' src= 'http://h1.ripway.com/dracoknight09/BUTTONS/friends.gif' /><br></a>"+
"<a href=\"javascript:onClick=get_properties('7')\"><img border='0' src= 'http://h1.ripway.com/dracoknight09/BUTTONS/youtube.gif' /><br></a>"+
"<a href=\"javascript:onClick=get_properties('18')\"><img border='0' src= 'http://h1.ripway.com/dracoknight09/BUTTONS/comments.gif' /><br></a>"+
"<a href=\"javascript:onClick=get_properties('subnav')\"><img border='0' src= 'http://h1.ripway.com/dracoknight09/BUTTONS/copy.gif' /><br></a>"+"</center>";
document.getElementById('8').style.height='100%';
document.getElementById('8').style.overflowY='hidden';
document.getElementById('8').innerHTML = "<table width='100%'><tr><td align='center'>"+hudas+"</td></tr></table>";

i dont mind if you use my images but you can change the bold text to add images of your own

NEXT: replace the contents of the hidden boxes..
guys this is the bug i fixed  RULES:
1. you really need to replace the contents of your cp in order for its sidebar button to seemingly function..
2. what you replace inside the cpbox you must put the same inside the reviews box.

ok then..
for the replacements codes this is the basic var code:

var blackbord = "YOUR CONTENTS HERE!!";
document.getElementById('div_id').style.height='100%';
document.getElementById('div_id').style.overflowX='hidden';
document.getElementById('div_id').innerHTML = "<table width='100%'><tr><td align='center'>"+blackbord+"</td></tr></table>";

replace the bold text and paste inside the onloadhandler.. 

lastly paste this code outside the loader @ the very bottom of your js codes

function get_properties(id) {
document.getElementById('0').innerHTML=document.getElementById(id).innerHTML
}

with enough practice you can make a cool DEMI-OVERLAY layout 
to see live previews:
SHIROW's TEST PAGE
http://www.friendster.com/masamuneisnotemo
MY PROFEE
http://profiles.friendster.com/48500265

this is the new age of layouts come and join us!! 

Last edited by dracoknight09 (2008-01-12 17:59:18)