Float Table

[game]

Could you tell me how to make a side table float like your code index table please?

[Nightwalker]

try this code

and thank wormo for it

<style type="text/css">
#floatBox {top: expression( ( ignoreMe = document.body.scrollTop +20 ) + 'px' ); z-index: 50;}
</style>
<table id="floatBox" cellspacing="1" cellpadding="0" border="0" align="left" valign="top" width="12%" bgcolor="0066FF" class="bordercolor">
<tr><td>
<table border="0" width="100%" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="top" class="welcomebg" bgcolor="000000">
CONTENT
</td>
</tr>
</td/></tr></table>
</td></tr></table>

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

function floatBox() {
nv=document.getElementById('floatBox');
nv.style.position=(document.all ? 'absolute' : 'fixed');
nv.style.top=document.body.scrollTop +20;
document.body.insertBefore(nv, document.body.firstChild);
}
floatBox();
-->
</script>

[game]

O.K.
well thank you for the reply and help and thank you Wormo for the code.

[game]

Oooo man!
I put the code in and now my whole board is blank.
I cant even get into my headers/footers
nohaterville.proboards.com

[randie]

Jul 18, 2010 12:16:30 GMT -8 game said:

Oooo man!
I put the code in and now my whole board is blank.
I cant even get into my headers/footers
nohaterville.proboards.com

If you are still locked out from the headers/footers, go to the main page (of this site) and watch the newsfader.

If that does'nt help try this link?
support.proboards.com/index.cgi?board=support&action=display&thread=30155&page=4

[game]

Shewww!
That was a close one!
Fixed, thanks alot!

[game]

ahhhh....and the code works now!
I have my board back and my floating table now..

[randie]

Jul 18, 2010 12:52:27 GMT -8 game said:

Shewww!
That was a close one!
Fixed, thanks alot!

Glad to help. Been there 1 time to many!!

[Nightwalker]

Glad your up and running game

[Wormopolis]

Criminy a lot happens when I take a nap...

[game]

Jul 18, 2010 16:57:09 GMT -8 Wormopolis said:

Criminy a lot happens when I take a nap...

Lol

thanks for the support guys!

Wormo,
Is there a way to give this code (side table) a collapse option?
My moderator mostly uses his cell phone on the site,
in result: the side table overlaps other parts of the page 'blocking his view.


I'll check back

[Nightwalker]

try this
<style type="text/css">
#floatBox {top: expression( ( ignoreMe = document.body.scrollTop +20 ) + 'px' ); z-index: 50;}
</style>
<table id="floatBox" cellspacing="1" cellpadding="4" align="left" valign="top" width="200px" class="bordercolor"><tr><td width="100%" class="titlebg" align="center"><a href="javascript: toggle('fBoxBody');">Hide Floating Box</a></td></tr>

Content here

<script type="text/javascript"><!--
function floatBox() {
var nv=document.getElementById('floatBox');
nv.style.position=(document.all ? 'absolute' : 'fixed');
nv.style.top=document.body.scrollTop +20;
document.body.insertBefore(nv, document.body.firstChild);
}
floatBox();
var cookie_data = document.cookie.split(";");
for(a = 0; a < cookie_data.length; a++){
if(cookie_data.match(new RegExp("id:(.+?)=0($|","i"))){
if(document.getElementById(RegExp.$1))
document.getElementById(RegExp.$1).style.display = "none";
}
}
function toggle(_id){
var obj = document.getElementById(_id);
if(obj.style.display == ""){
obj.style.display = "none";
document.cookie = "id:" + _id + "=0;expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;";
} else {
obj.style.display = "";
document.cookie = "id:" + _id + "=0;expires=Sat, 20 Jan 2000 12:12:12 UTC; path=/;";
}
}
//--></script>

[game]

Hmmmm,
It shows up in the table as a link (Hide Floating Box)
But the link is dead.

Also my content stretched all of the way across the screen until I added the opening <tr><td> tags before where it says content.
----------------------------------------------------------------------------------
Ex.
<table border="0" width="100%" cellpadding="2" cellspacing="0">
<tr>
<td align="left" valign="top" class="welcomebg" bgcolor="000000">
<tr><td>
CONTENT
</td>
</tr>
</td/></tr></table>
</td></tr></table>
---------------------------------------------------------------------------------
but doing the above made my complete float-table the color white
(it originally had a black bg and white and Grey links)

I'm using a table for the content
Here's the code after I added my content and the <td><tr> tags:
----------------------------------------------------------------------------------
<style type="text/css">
#floatBox {top: expression( ( ignoreMe = document.body.scrollTop +20 ) + 'px' ); z-index: 50;}
</style>
<table id="floatBox" cellspacing="1" cellpadding="4" align="left" valign="top" width="10%" class="bordercolor"><tr><td width="100%" class="titlebg" align="center"><a href="javascript: toggle('fBoxBody');">Hide Floating Box</a>
</td></tr>
<td><tr>


<table width="100%"><tr>
<td><a href="http://nohaterville.proboards.com/index.cgi?board=helpboard"><center><font size="1">
<tr>
<TH bgcolor="ffffff"border="10"bordrcolor="green">
<center><font color="000000">
QUICK LINKS
</font></center>
</tr></TH>
<tr><td><a href="http://nohaterville.proboards.com/index.cgi?board=helpboard"><center>
NHV HELP</center></a>
</tr>
</td>
<tr>
<td><center><a href="http://nohaterville.proboards.com/index.cgi?action=members"><center>
MEMBERS<br>LIST</center></a>
</tr>
</td>
<tr>
<td><a href="http://nohaterville.proboards.com/index.cgi?action=viewprofile"><center>
PROFILE</center></a>
</tr></td>
<tr>
<td><a href="http://nohaterville.proboards.com/index.cgi?board=membersfirststop">
<center>
INTRO</center></a>
</tr></td>
<tr><td><a href="http://nohaterville.proboards.com/index.cgi?board=battlecallout"><center>
BATTLE <br>CALLOUTS
</tr></td></center></a>
<tr><td><a href="http://nohaterville.proboards.com/index.cgi?board=activebattles"><center>
TEXT <br>BATTLES</center></a>
</tr></td>
<tr><td><a href="http://nohaterville.proboards.com/index.cgi?board=cypherboard"><center>
CYPHERS</center></a>
</tr></td></a>
<tr><td><a href="http://nohaterville.proboards.com/index.cgi?board=originalwork"><center>
OPEN MIC</a></tr></td></center>
<tr><td>
<a href="http://nohaterville.proboards.com/index.cgi?board=nhvtourn"><center>
TOURNEYS</center></tr></td>
<tr><td><a href="http://tinychat.com/hgnit"><center>LIVE<br>BATTLES</center></tr></td>
</table>
</td>
</tr>
</td/></tr></table>
</td></tr></table>


<script type="text/javascript"><!--
function floatBox() {
var nv=document.getElementById('floatBox');
nv.style.position=(document.all ? 'absolute' : 'fixed');
nv.style.top=document.body.scrollTop +20;
document.body.insertBefore(nv, document.body.firstChild);
}
floatBox();
var cookie_data = document.cookie.split(";");
for(a = 0; a < cookie_data.length; a++){
if(cookie_data.match(new RegExp("id:(.+?)=0($|","i"))){
if(document.getElementById(RegExp.$1))
document.getElementById(RegExp.$1).style.display = "none";
}
}
function toggle(_id){
var obj = document.getElementById(_id);
if(obj.style.display == ""){
obj.style.display = "none";
document.cookie = "id:" + _id + "=0;expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;";
} else {
obj.style.display = "";
document.cookie = "id:" + _id + "=0;expires=Sat, 20 Jan 2000 12:12:12 UTC; path=/;";
}
}
//--></script>

----------------------------------------------------------------------------------
But I then tried a different modification,
taking the closing </tr></td> tags out before where the content goes 'fixed the color problems and my float table bgcolor is now black again how it should be.

Ex.
-----------------------------------------------------------------------------------
<table id="floatBox" cellspacing="1" cellpadding="4" align="left" valign="top" width="200px" class="bordercolor"><tr><td width="100%" class="titlebg" align="center"><a href="javascript: toggle('fBoxBody');">Hide Floating Box</a>(notice that I eliminated the </tr></td> tags)

Content here

<script type="text/javascript"><!--
function floatBox() {
var nv=document.getElementById('floatBox');
nv.style.position=(document.all ? 'absolute' : 'fixed');
-----------------------------------------------------------------------------------

So currently I am using the second option that I described.
(eliminating the </tr></td> tags)

But regardless,
the 'Hide Floating Box' link is dead.

preview:
nohaterville.proboards.com


Any suggestions?
Thanks

[game]

Can somebody please tell me why the table wont collapse?

[Wormopolis]

<table id="floatBox" cellspacing="0" cellpadding="0" align="left" valign="top" width="10%" class="bordercolor"><tr><td width="10%" class="titlebg" align="center"><a href="javascript: toggle('fBoxBody');">Hide Floating Box</a></td></tr><tr><td>
<table id="fBoxBody">
<tr><td>
<script type="text/javascript" src="http://static1.grsites.com/user/folders/BigGame/r6996705/1389224.js"></script>
</td></tr>
<tr><td>
<script type="text/javascript" src="http://static1.grsites.com/user/folders/BigGame/r6996717/1389225.js"></script>
</td></tr>
<tr><td>
<script type="text/javascript" src="http://static1.grsites.com/user/folders/BigGame/r6996751/1389227.js"></script>
</td></tr>
<tr><td>
<script type="text/javascript" src="http://static1.grsites.com/user/folders/BigGame/r6996818/1389229.js"></script>
</td></tr>
<tr><td>
<script type="text/javascript" src="http://static1.grsites.com/user/folders/BigGame/r6996827/1389230.js"></script>
</td></tr>
<tr><td>
<script type="text/javascript" src="http://static1.grsites.com/user/folders/BigGame/r6996841/1389231.js"></script>
</td></tr>
<tr><td>
<script type="text/javascript" src="http://static1.grsites.com/user/folders/BigGame/r6996886/1389232.js"></script>
</td></tr>
</table>
</td></tr></table>


you had all of the rows closing before the cells.... you have to close tags in reverse order. second table was never closed. toggle(fBoxBody) wasnt working because there was no element with id=fBoxBody.

as for the toggle code.. the link should work, but the cookie part by observation seems to have a slight flaw in it. I am hoping nightwalker can shed some light on what he was attempting to do.