Scrolling Sidebar Table Simplied?

[Kyo]

Heya! I've been searching for a working "scroll-with-you" kind of box, like the one on your forum. I was wondering if you had a simpler version of this code?

I looked through your listing and found a few, but none that just had a floating postion and collapse/expand ablilty, which is the only part I'm very interested in.

I've tried making it myself and failed miserably. half the week's been spend with me flogging it with my horrid Java skills, and it did not go so well. In fact, I think it hates me! X'D ...But the other half was spent looking for a coding site that has it, and I saw you being talked about with a code like this-- in fact, YOU ARE THE ONLY ONE I HAVE FOUND with one like this. You're amazing.

But anyway, is there a more basic code available that I skipped over or something?

[Wormopolis]

Nov 9, 2010 16:26:37 GMT -8 Kyo said:

Heya! I've been searching for a working "scroll-with-you" kind of box, like the one on your forum. I was wondering if you had a simpler version of this code?

I looked through your listing and found a few, but none that just had a floating postion and collapse/expand ablilty, which is the only part I'm very interested in.

I've tried making it myself and failed miserably. half the week's been spend with me flogging it with my horrid Java skills, and it did not go so well. In fact, I think it hates me! X'D ...But the other half was spent looking for a coding site that has it, and I saw you being talked about with a code like this-- in fact, YOU ARE THE ONLY ONE I HAVE FOUND with one like this. You're amazing.

But anyway, is there a more basic code available that I skipped over or something?

did you see that all you floating table haters?! this guy right here just made my freakin day!

The floating table I have running on here is actually a slightly more advanced version of the one I have in the database under the "Floating Navtree" code. it has some additional features to it that allows for a choice of which side the table is on in the profile, as well as the collapse with memory. I dont have those 2 things currently published because I was just making modifications on this site at the requests of members. Both mods are small, but require modification to the original script tomake it work, otherwise you end up with it starting on one side then shiftng to the other and/or starting expanded and then closing with each page load.

if you want just a basic floating table, its not too difficult, but there is one critical rule you have to keep in mind. you cannot have the vertical height of the table be greater the screen height, or the page will scroll to infinity.

the starting point is to create a div that will hold your HTML, and give it an id that a small code can access it with.

let me know when you have that ready to go and what the id is and I can show you the script.

[Kyo]

Oh gosh, I'm really not a CSS/Javascript person. All I know is that I can make a border pretty with this, this and this. :V

What does a div do? Is it the thing that is a certain part of a code? How would I set it up!? I don't know how it works! *weeps*

Jeez, you're like this to coding.
i683.photobucket.com/albums/vv197/Kyouyaisgod/worm.jpg

[Wormopolis]

Dune!


You dont have to do any of the CSS or javascript. Just make whatever HTML you want and put it between

<div id="scrollerstuff" style="display:none">

</div>

somewhere in your global header.

[Kyo]

Mission accomplished!

What next?

[Wormopolis]

excellent, so now right before that Div put this:


<style type="text/css">
#floatNav {top: expression( ( ignoreMe = document.body.scrollTop +20 ) + 'px' ); z-index: 50;}
</style>
<table  id="floatNav" cellspacing="1" cellpadding="0" border="0" align="left" valign="top" width="12%" bgcolor="0066FF" class="bordercolor">
<tr>
<td  id="navcommL" class="windowbg" style="white-space: nowrap; display: none" onclick="if (this.innerHTML=='-&g'+'t;') {this.parentNode.cells[1].style.display='none'; this.parentNode.parentNode.parentNode.style.width='2%'; this.innerHTML='<-'; exptime=new Date(); exptime.setFullYear(exptime.getFullYear()+1); document.cookie='floathide=true; expires='+exptime;} else { this.parentNode.cells[1].style.display=''; this.parentNode.parentNode.parentNode.style.width='12%'; this.innerHTML='->'; exptime=new Date(); exptime.setFullYear(exptime.getFullYear()-1); document.cookie='floathide=true; expires='+exptime;}">-></td><td id="navstuff" style="display:none">
<table border="0" width="100%" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="top" class="windowbg2" bgcolor="000000">



and the right after that div put this:


</td/></tr>
</table>
</td><td  id="navcommR" class="windowbg" style="white-space: nowrap; display: none" onclick="if (this.innerHTML=='&l'+'t;-') {this.parentNode.cells[1].style.display='none'; this.parentNode.parentNode.parentNode.style.width='2%'; this.innerHTML='->'; exptime=new Date(); exptime.setFullYear(exptime.getFullYear()+1); document.cookie='floathide=true; expires='+exptime;} else { this.parentNode.cells[1].style.display=''; this.parentNode.parentNode.parentNode.style.width='12%'; this.innerHTML='<-'; exptime=new Date(); exptime.setFullYear(exptime.getFullYear()-1); document.cookie='floathide=true; expires='+exptime;}"><-</td></tr></table>

<script type="text/javascript">
<!--
// floating NavBox script

if (!document.cookie.match(/floathide/)) {
 document.getElementById('navstuff').style.display='';
} else {
 document.getElementById('navcommL').innerHTML='<-';
 document.getElementById('navcommR').innerHTML='->';
 document.getElementById('navstuff').parentNode.parentNode.parentNode.style.width='2%';
}
function floatNav() {
spos=(document.cookie.match(/_floatpos=(.*?)(;|$)/) ? RegExp.$1 : 'left');
nv=document.getElementById('floatNav');
nv.style.position=(document.all ? 'absolute' : 'fixed');
nv.style.top=document.body.scrollTop +20;
if (spos=='right') {
 nv.style.right=0;
 document.getElementById('navcommL').style.display='';
} else {
 document.getElementById('navcommR').style.display='';
}
document.body.insertBefore(nv, document.body.firstChild);
}
floatNav();
//-->
</script>



when that part works for you, I will get you the script that lets them choose which side they want it on if you want it.

[Kyo]

OMIGAWD, YOU ARE SO BADASS!!

Thank you SOO much, I'd still be crying in the fetal postion without this, srsly.

And I'm good with it on the left, I like it there. ^,^

But there seems to be a problem-- When I have the box open, and I go to another page, the box grows to about half the size of the page. Can you fix that?
This is what it's doing:
terminuscity.proboards.com/index.cgi

Go to the page and open the box, then go to any other page on the site.

[Wormopolis]

hmmm

the chatbox might be forcing it wider for some reason... its the exact same html from my source and the chatbox is the only thing yuou have different

try this

find this

<table id="floatNav" cellspacing="1" cellpadding="0" border="0" align="left" valign="top" width="12%" bgcolor="0066FF" class="bordercolor">


change to

<table id="floatNav" cellspacing="1" cellpadding="0" border="0" align="left" valign="top" width="12%" bgcolor="0066FF" class="bordercolor" style="width:12%">

[Kyo]

Brilliant! Thank you so, SO much!! *hugs*

Your that best person ever, I'm calling my friend right now to tell her it works! (we've been pining over this code this last week, lol)

If you ever need any graphic help or anything, feel free to ask me!!! It'll be a small trade compared to this, trust me!! ^.^

[randie]

Nov 9, 2010 22:16:00 GMT -8 Wormopolis said:

did you see that all you floating table haters?!

Never hated the float thing dude. Just the position of it on My monitor. Thanks for fixing that.

Just to spice it up I used this one for years. It actually floats.

www.dynamicdrive.com/dynamicindex1/staticmenu.htm

;D

[Wormopolis]

I had seen that when I was doing research, but I didnt like the choppy effect it had. I like it when it doesnt move at all when the page scrolls. the original floating table code I had did the choppy move too until I refined it.