Scrolling Menu

[ÇÝßØRG]

Browser Tested: IE and Firefox
Placement: Global Header

Basically, the menu goes to the left of your screen and follows you down and up when you scroll up and down.

<table border="0" width="[color=Red]1000[/color]" align="center" valign="center" cellpadding="0">
<tr>
<td id="SideTab" valign="top">

<!--
/*
Scrolling Side Menu
By Cyborg
Modified from original HTML scrolling menu
*/
// -->

<div id="sidemenuholder">

<script type="text/Javascript">
if(pb_username == "Guest")

{
document.write("<a href='/index.cgi'><img src='http://s1.images.proboards.com/menu/home.gif' alt='home' border='0'></a><br /><IMG SRC='http://i36.tinypic.com/2940y2v.png' width='63' height='1' border='0'><br />");

document.write("<a href='/index.cgi?action=register'><img src='http://s4.images.proboards.com/menu/register.gif' alt='register' border='0'></a><br /><IMG SRC='http://i36.tinypic.com/2940y2v.png' width='63' height='1' border='0'><br />");

document.write("<a href='/index.cgi?action=login'><img src='http://s4.images.proboards.com/menu/login.gif' border='0' alt='login'></a><br /><IMG SRC='http://i36.tinypic.com/2940y2v.png' width='63' height='1' border='0'>");
}

</script>
<span id="hidden_content" style="display: none;">
<IMG SRC="http://i36.tinypic.com/2940y2v.png" width="63" height="1"><br/>

<A HREF="index.cgi"><IMG SRC="http://s1.images.proboards.com/menu/home.gif" border="0" alt="Home" ></A><br/>
<IMG SRC="http://i36.tinypic.com/2940y2v.png" width="63" height="1"><br/>

<A HREF="index.cgi?action=search"><IMG SRC="http://s1.images.proboards.com/menu/search.gif" border="0" alt="Search"></A><br/>
<IMG SRC="http://i36.tinypic.com/2940y2v.png" width="63" height="1"><br/>

<A HREF="/index.cgi?action=members"><IMG SRC="http://s1.images.proboards.com/menu/members.gif" alt="Members" BORDER=0></A><br/>
<IMG SRC="http://i36.tinypic.com/2940y2v.png" width="63" height="1"><br/>

<A HREF="index.cgi?action=admin"><IMG SRC="http://s1.images.proboards.com/menu/admin.gif" alt="Admin" border="0"></A><br/>
<IMG SRC="http://i36.tinypic.com/2940y2v.png" width="63" height="1"><br/>

<A HREF="index.cgi?action=calendar"><IMG SRC="http://s1.images.proboards.com/menu/calendar.gif" alt="Calendar" border="0"></A><br/>
<IMG SRC="http://i36.tinypic.com/2940y2v.png" width="63" height="1"><br/>

<A HREF="index.cgi?action=viewprofile"><img src="http://s1.images.proboards.com/menu/profile.gif" alt="Profile" border="0"></A><br/>
<IMG SRC="http://i36.tinypic.com/2940y2v.png" width="63" height="1"><br/>

<A HREF="index.cgi?action=logout"><IMG SRC="http://s1.images.proboards.com/menu/logout.gif" alt="Logout" border="0"></A><br/>
<IMG SRC="http://i36.tinypic.com/2940y2v.png" width="63" height="1"><br/>

</span></div>

<script type="text/javascript">
// cyborg's scrolling menu

startPos = '50%';  // percentage of vertical screen

sideMenu = document.getElementById('sidemenuholder');
sideMenu.style.display="";
posperc=(parseInt(startPos)/100.00*document.body.clientHeight;

function changeMenuPos() {

var topOffSet = document.body.scrollTop;
posY = topOffSet+posperc;
sideMenu.style.cssText="position: absolute; top: "+posY+"px;";
}
changeMenuPos();
window.onscroll = changeMenuPos;


if(pb_username != 'Guest') document.getElementById('hidden_content').style.display = '';

//-->
</script>



</td>
</tr>
</table>


Instructions:
1. After inserting this code, go to Admin -> Skins/Forum Colors -> Customize Images -> *Select a skin* -> *Replace all "Menu Icons" with this image: i43.tinypic.com/nlrifs.png

This is done so that the menu icons where they originally were dissapear

2. (Optional) If you want the menu to be closer or further away from the center just increase/decrease the red number

[Wormopolis]

you have a preview site or do you want me to put it on this page?

[ÇÝßØRG]

I dont mind, what do you think is best?

If you think a screenshot would be best, Ill do that

[Wormopolis]

I'll insert the code into this page.. I think it would be interesting to see what it does with the floating navbox over there.

[ÇÝßØRG]

Im guessing the navbox and the menu are just gonna keep overlapping each other or just mess up the entire page since both of them are set to work on the left of the page

[Wormopolis]

navbox is programmed to stay on left margin, Either I shut it off for this thread or I adjust the floating menu. I havent put the code in for this yet because I was working on another request last night.

It'll get there.

[Wormopolis]

Did you write this or is it open source?

[ÇÝßØRG]

Open source for a normal HTML website I saw, which I edited to suit proboards and it's attributes

[Wormopolis]

ok. I just wanted to make sure you got credit for it since you didnt put your name in the code header. If you did the work like that, you can always put in the header:

/* Modified from open source code to work on PB - by Cyborg
original code found at: www.blahblah.com
*/

[Wormopolis]

couple of errors in there that need to be addressed:

the really long document.write line you have, it has some elements you put in " " that are causing the document.write string to terminate prematurely. To make it work on this page, I had to change all of them to single quotes. I also broke up the document.write into 3 write statements, because it wasnt fond of a line feed in there for some reason.

at the top of the code, you started a table, but never closed it anywhere. I added closing tags after the script for the table to make it work on this page.

if you clean those things up in the code I can move it to the database.

you should also think about what I said about putting your name in the code header. As long as you declare you modified an open source, its ok to add your name saying you made changes. putting original source is good too.

[ÇÝßØRG]

I dont exactly know where I got this code from cos I got it a really long time ago, and I decided to post it recently.

btw, that menu terminating issue doesnt seem to happen on my test site (SC site), maybe its just a code conflict with your navbox?



k I cleaned it up but I just found that for some reason guests cant see the buttons I want them to see. The menu just dissapears for guests. Got an idea whats wrong?

I have this part for guests:
<script type="text/Javascript">
if(pb_username == "Guest"){

document.write("<a href='/index.cgi'><img src='http://s1.images.proboards.com/menu/home.gif' alt="home" border='0'></a><br /><IMG SRC='http://i36.tinypic.com/2940y2v.png' width='63' height='1' border='0'>")<br />

document.write("<a href='/index.cgi?action=register'><img src='http://s4.images.proboards.com/menu/register.gif' alt="register" border='0'></a><br /><IMG SRC='http://i36.tinypic.com/2940y2v.png' width='63' height='1' border='0'>")<br />

document.write("<a href='/index.cgi?action=login'><img src='http://s4.images.proboards.com/menu/login.gif' border='0' alt="login"></a><br /><IMG SRC='http://i36.tinypic.com/2940y2v.png' width='63' height='1' border='0'>");
}


In my main post I just changed it from a code to a quote so I could colour the 1000 in red

[Wormopolis]

wouldnt be a conflict with the navbox, the navbox code doesnt run in this thread anymore. I have a selector in there. sometimes when copying from posts into the headers, extra linefeeds get put into codes. if between regular lines the compiler ignors them, but if in the middle of a documnt.write statement it gets pissy. I tend to break up really long .write statements anyway to make bugs easier to find.

[Wormopolis]

and the guest menu thing, again, is that you have stuff inside the document.write statement that has double quotes around it ("home"). Viewing this page as a guest I can see the menu because I changed those to single quotes.

[ÇÝßØRG]

cool thanks man

i updated my post now

[Wormopolis]

I added in a little something extra to allow user to vertically adjust where the menu posts.