[align=center][b]= Floating Navigation at the side. =[/b]
Screenshot
[url=http://i282.photobucket.com/albums/kk264/unmaskedluke/wawa.jpg][img]http://i282.photobucket.com/albums/kk264/unmaskedluke/wawa.jpg[/img][/url]
[sup]click for larger image[/sup]
[url=http://profiles.friendster.com/16602771][b]Live Preview[/b][/url]
--
Actually, this trick is the same as [url=http://theftalk.com/t41997-.%3A%3AfLoating-menu%2C-with-toggLe-show-hide!%3A%3A..html]this[/url]. But with different style - CSS style. And without the toggle-show-hide effect. Just a simple one.
This trick is useful if your profile doesnt have the main navigation. Means, you replace it with other thing, for example, slide, mp3 player, etc, just like in my profile. But you also can use it for other purpose. You can put any link you want.
--
1) Paste this at the bottom of your JS ext.[/align]
[spoiler]floatnavi="<div id=\"divStayTopLeft\" style=\"position:absolute;z-index:50;\"><div class=\"arrowlistmenu\">"+
"<h3 class=\"menuheader expandable\">Navigation</h3>"+
"<ul class=\"categoryitems\">"+
"<li><a href=\"[color=red][b]
http://www.friendster.com[/b][/color]/\">[color=red][b]Home[/b][/color]</a></li>"+
"<li><a href=\"[color=red][b]
http://www.friendster.com/user.php[/b][/color]\">[color=red][b]My Profile[/b][/color]</a></li>"+
"<li><a href=\"[color=red][b]
http://www.friendster.com/widget_myapps.php[/b][/color]\">[color=red][b]My Apps[/b][/color]</a></li>"+
"<li><a href=\"[color=red][b]
http://www.friendster.com/friends.php[/b][/color]\">[color=red][b]My Friends[/b][/color]</a></li>"+
"<li><a href=\"[color=red][b]
http://www.friendster.com/explore.php[/b][/color]\">[color=red][b]Explore[/b][/color]</a></li>"+
"<li><a href=\"[color=red][b]
http://www.friendster.com/gallery.php[/b][/color]\">[color=red][b]Search[/b][/color]</a></li>"+
"<li><a href=\"[color=red][b]
http://www.friendster.com/logout.php[/b][/color]\">[color=red][b]Log Out[/b][/color]</a></li>"+
"</ul>"+
"<div>"+
"</div>"+
"</div></div>";
flow=document.getElementById('flo_wrapper');
river=document.createElement("div");
river.innerHTML=floatnavi;
flow.parentNode.insertBefore(river,flow);
//in this part you can change it into "frombottom" or "fromtop"
var verticalpos="frombottom"
function BoyantDiv()
{
var startX = 15;
var startY = 400;
function ml(id)
{
if (document.getElementById)
{
var wek=document.getElementById(id);
}
else if (document.all)
{
var wek=document.all[id];
}
else
{
var wek=document.layers[id];
}
if(document.layers)
{
wek.style=wek;
}
wek.sP = function(x,y) {shino(x,y);};
function shino(x,y)
{
wek.style.left=x;
wek.style.top=y;
}
wek.x = startX;
if (verticalpos=="fromtop")
{
wek.y = startY;
}
else{
if (navigator.appName.indexOf("Netscape") != -1)
{
wek.y = pageYOffset + innerHeight;
}
else
{
wek.y = document.body.scrollTop + document.body.clientHeight;
}
wek.y -= startY;
}
return wek;
}
window.stayTopLeft = function () {boyant();};
function boyant()
{
if (verticalpos=="fromtop"){
if (navigator.appName.indexOf("Netscape") != -1)
{
var tenten = pageYOffset;
}
else
{
var tenten = document.body.scrollTop;
}
ftlObj.y += (tenten + startY - ftlObj.y)/8;
}
else{
if (navigator.appName.indexOf("Netscape") != -1)
{
var tenten = pageYOffset + innerHeight;
}
else
{
var tenten = document.body.scrollTop + document.body.clientHeight;
}
ftlObj.y += (tenten - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
wakoko=setTimeout("stayTopLeft()", 50);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
BoyantDiv();[/spoiler]
You can edit the red part.
--
Lastly, past this code at your CSS ext.
<">Thats it. Your done.
[align=center]----
Credits:
[b]Shakiro[/b] - for the floating code
[b]DynamicDrive[/b] - CSS menu style[/align]