Scrolling Side menu

[Topeka]

This is a previous code that you edited to make it align anywhere on the screen.

<table border="0" width="100%" align="center" valign="center" cellpadding="0"> <!-- width % positionleftright -->
<tr>
<td id="SideTab" valign="top" align="right"> <!-- left right position -->

<table border="1" width="12%" >
<tr>
<td>
<div id="sidemenuholder">
Blooooooop
<br />
An example of a 2nd floating box
<br />
<span id="hidden_content" style="display: none;">
Guests shouldnt be able to see this part
<br />
Nor this part
</span></div>
</td>
</tr>
</table>

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

<script type="text/javascript">
/*
Scrolling Side Menu
By Cyborg
Modified from original HTML scrolling menu
*/

startPos = '8%'; // 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>

Whenever i make these 'tds' align right (green suckers), they will align outside of the table.

I have 2 images i took to show what i mean.
There 1600x1200 size, so ill only place the links.

The firsts image is w/o the td align and the 2nd is with align right.
i285.photobucket.com/albums/ll47/musicgodguy/brians/NoAlign.jpg
i285.photobucket.com/albums/ll47/musicgodguy/brians/AlignRight.jpg

In the 2nd one i circle where that table is (pointed in the 1st), and instead of aligning it inside the table/td, it will go outside of it, and i have no idea why, but its not helping very much, and i've tried a few things and i cant fix it. So, is there a way to fix that? it kindof helps to have that first table 100% width. and have the floating text right on the 'right' edge of the screen. but now, all im doing is trial and error to get presentages right, and even then, they go outa wack when you enlarge or shrink the window itsself.

i quickly pasted the scripts in here to take the pics, and so you can see it.

topekat3.proboards.com/index.cgi?/

Thanks

ps:
that 2nd table inside the first was just another trial to fix it. so even if i take that innertable out, that first td align right will still do the same.

[Wormopolis]

totally confused.. both of the little things you have circled seem to be aligned to the right side of the table they are in...

[Topeka]

uh.. just look at the 2nd image. the circled part is the table that i thought it should be inside (vertically). its no longer inside that table?, its placed outside and to the right of the table, instead of inside the table and the aligned right?

This is all about vertical alignment i guess... its like its no longer staying in that table area when i align it right if that makes sense?
(well i think? idk if its actually supposed to do that? it doesnt make sense if it is)


like heres the table in my perspective

Right aligned

Just space

___________And its scrolling vertically over here outside of table area( text aligned right)


No align

Its scrolling vertically in this table area

why doesnt it work like this??

aligned right

Vertically scrolling here, and text aligned right.

hope this is more clear?

[Wormopolis]

position: absolute is always done to the screen, not the element it is contained in.

if you want that little box to scroll on the right side of the screen using absolute, you have to give it a right position using right: 100

then you can remove all the align tags

[Topeka]

if absolute is done to the screen why does it the horizontal position change when you change the width of the table it is placed in?

i got it to work for the most part. so thanks a bunch.
and also, how do i make it not so jumpy when scrolling? make it more pasted on the forum. like the left side box. ?

[Wormopolis]

the table width was affecting the width of the forum overall, so the positioning was still relative to the screen, but the table was changing the width. I could get the div to be independant of the table by changing it to absolute and back to relative. if you want something to be to the screen, its best to just keep it outside of other elements and on the body level, then use absolute to position it.

the left side tables, like on my site, are put into the body element rigt after they are created. then I use the style code to change the top positions. try that with your right side table. I know it will work because at one point I had a global user box that had an avatar and some links in it that stuck to the bottom right of the forum as you scrolled.

[Topeka]

Ok, thanks. Im going to look up how to do this, and try it out myself. If i get stumped, (which will probably happen), ill repost.

Edit:

so i looked up positioning and all that, and got it to work though w3schools Tryit editor, but it had a doctype which i have no idea how to edit the doctype of proboards. So i i looked to see how you did it with your scrolling box on the left. and changed it as followed.

<style type="text/css">
#linkbox {top: expression( ( ignoreMe = document.body.scrollTop +25 ) + 'px' ); z-index: 50;}
</style>

<table id="linkbox" width="12%" border="0">
<tr>
<td align="right">
TABLE TRIAL
</td>
</tr>
</table>

<script type="text/javascript">
<!--
// floating navbox script
function linkbox() {
ln=document.getElementById('linkbox');
ln.style.position=(document.all ? 'absolute' : 'fixed');
ln.style.top=document.body.scrollTop +25;
ln.style.right="0px"
document.body.insertBefore(ln, document.body.firstChild);
}
linkbox();
-->
</script>


and i understand how it all works except for two parts, which, one i can get a guess, but other than that nothing

This in your style,
expression( ( ignoreMe
and this in your script
document.all ?
The document.all ? , im Guessing, has something to do w/ the doctype? but what, i have no idea.
and for ignoreMe, i searched it, and i cant find anything that goes with expression or ignoreMe, so i dont even have a guess. but If you dont mind me asking what do those two things do?

[Wormopolis]

document.all is just a way to find out if the user is using IE or FF. document.all doesnt exist in FF.

the expression in the style, is so that it will convert whatever is in the parenthesis to a value before setting it to the style attribute.

so it basically evaluates where the scroll is, adjusts by 25 (to keep a buffer at the top) and when it gets a number sets the top attribute to it.

you have to set the number to a variable in order for it to work., I named the variable "ignoreme".

[Topeka]

o ok, i understand it now. but, what difference does it make if its FF or IE for the document.all?,

does like IE only support absolute position, not fixed for it to work? or something?

[Wormopolis]

exactly.

[Topeka]

O ok Sweet. Thanks for the help.

[Wormopolis]

no problem. glad I could help for once!