Pages: 12
[b]CREDITS:[/b]
XAVIER
SHIROW MASAMUNE
me.. (hehe)
This is basically a compilation of codes that formed into a new breed of layouts..
A [b]Demi-overlay[/b] (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:
[b]You must have complete knowledge of this thread: [/b][url]http://theftalk.com/t7708-link%28from-sidebar-mainbar-vice-versa%29.html[/url]
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:
[b]STEP 1:[/b] (make the buttons)
inside the loader (you can still edit this)
[quote]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>";[/quote]
you can do image buttons... these are my codes (im happy to share)
[quote]var hudas = "<center>"+"<a href=\"javascript:onClick=get_properties('12')\"><img border='0' src= '[b]http://h1.ripway.com/dracoknight09/BUTTONS/control.gif[/b]' /><br></a>"+
"<a href=\"javascript:onClick=get_properties('1')\"><img border='0' src= '[b]http://h1.ripway.com/dracoknight09/BUTTONS/photos.gif[/b]' /><br></a>"+"<a href=\"javascript:onClick=get_properties('2')\"><img border='0' src= '[b]http://h1.ripway.com/dracoknight09/BUTTONS/friends.gif[/b]' /><br></a>"+
"<a href=\"javascript:onClick=get_properties('7')\"><img border='0' src= [b]'http://h1.ripway.com/dracoknight09/BUTTONS/youtube.gif[/b]' /><br></a>"+
"<a href=\"javascript:onClick=get_properties('18')\"><img border='0' src= '[b]http://h1.ripway.com/dracoknight09/BUTTONS/comments.gif[/b]' /><br></a>"+
"<a href=\"javascript:onClick=get_properties('subnav')\"><img border='0' src= '[b]http://h1.ripway.com/dracoknight09/BUTTONS/copy.gif[/b]' /><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>";[/quote]
i dont mind if you use my images but you can change the bold text to add images of your own
[b]NEXT[/b]: replace the contents of the hidden boxes..
guys this is the bug i fixed
[b]RULES:[/b]
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:
[quote]var blackbord = "[b]YOUR CONTENTS HERE!![/b]";
document.getElementById('[b]div_id[/b]').style.height='100%';
document.getElementById('[b]div_id[/b]').style.overflowX='hidden';
document.getElementById('[b]div_id[/b]').innerHTML = "<table width='100%'><tr><td align='center'>"+blackbord+"</td></tr></table>";[/quote]
replace the bold text and paste inside the onloadhandler..
lastly paste this code outside the loader @ the very bottom of your js codes
[quote]function get_properties(id) {
document.getElementById('0').innerHTML=document.getElementById(id).innerHTML
}[/quote]
with enough practice you can make a cool [b]DEMI-OVERLAY[/b] layout
to see live previews:
SHIROW's TEST PAGE
[url]http://www.friendster.com/masamuneisnotemo[/url]
MY PROFEE
[url]http://profiles.friendster.com/48500265[/url]
this is the new age of layouts come and join us!!
Last edited by dracoknight09 (2008-01-12 12:59:18)
upsss... just a glitch... it's ok now...
hmmm...
nice effort creating that tweaks... Last edited by Refresh/Reload (2008-01-12 12:55:28)
this was the iframe you were talking about bro .. hehe
demi overlay.. what about your second idea of demi overlay shi?
you know what i mean. xD
anyway.. i noticed that you credits are not working bro.
Last edited by ducheszv (2008-01-12 13:42:07)
im promoting this type of layout.. LOLZ!!!
Go Bordz!!!
bordz..
i dont know if shirows joking or not,, but its a cool idea
you can have an overlay and CSS/JS at the same time.. the border between the two is just the X button..
ssory bro.. i gotta admit i need some tuts with making scripts im only good at observing the difference..
Last edited by ducheszv (2008-01-12 14:54:44)
[b]You must have complete knowledge of this thread: [/b][url]http://theftalk.com/t7708-link%28from-sidebar-mainbar-vice-versa%29.html[/url]
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)[/quote]
There is a simple trick to make it look good in IE.. I actually did this type of layout, which I finished after 3 days.
And it was good in All Browsers for all screen resolution.
I'll let you realise what I did before I'll reveal it to you..
Anyway, good and you shared it to them.
dont keep it.. haha lol
[/color][/b]
another breed of layout! i'll try this one..
but i want it look good in IE
[quote]There is a simple trick to make it look good in IE.. I actually did this type of layout, which I finished after 3 days. And it was good in All Browsers for all screen resolution.
I'll let you realise what I did before I'll reveal it to you..[/quote]
hope to reveal it..
ok then..
for the replacements codes this is the basic var code:
[quote]var blackbord = "[b]YOUR CONTENTS HERE!![/b]";
document.getElementById('[b]div_id[/b]').style.height='100%';
document.getElementById('[b]div_id[/b]').style.overflowX='hidden';
document.getElementById('[b]div_id[/b]').innerHTML = "<table width='100%'><tr><td align='center'>"+blackbord+"</td></tr></table>";[/quote]
What CONTENTS should we replace in this code?
Last edited by stepdarn14 (2008-01-13 01:24:27)