[CB] Floating Sidebar (left)

[elli]

LIVE PREVIEW

This is a left-side, fixed side bar that is (to the best of my knowledge) the only cross-browser alternative to the Floating Sidebar script by Nightwalker, popular in ProBoard-compatible templates from Caution 2.0. If you've used Nightwalker's code, you may have noticed that it breaks in Internet Explorer. My version does not, and in fact works the same all the way down to Internet Explorer 6. And unlike SubDevo's "Peakaboo Side Tables", this won't jump around in IE as you scroll down. In other words, this is a perfectly cross-browser code.

This also aligns your board to the left.

I'm just going to use some of Smangii's instructions from his side tables, because they're basically the same principle. (: (And they're well-written.)

BEFORE USING PLEASE FOLLOW THESE STEPS:

1) Placing the code

Place the Sidebar Global Headers ABOVE your other content in global headers.
Place the Sidebar Global Footers BELOW your other content in global footers.

* Some problems might arise from placement depending on what codes you have already. Swap back and forth just to see what works.

I have not tested this with Smangii's Border-Around Forum code, and I don't know how these two would work together. Aesthetically, it would probably be silly to use both, but if you want to anyway and you have trouble, post for support and you and I can work it out.

2) Resizing your forum

IMPORTANT!!
REMOVE ALL CODES you currently have that resize the forum's width before continuing.
This is a crucial step--DO IT!!!

FLUID FORUMS:

Fluid forums are not compatible with this code. Your forum will have to be fixed width. Follow the steps below!

FIXED FORUMS:

There are several lines that define the forum's width. You will need to change all of them.

In the Global Headers' CSS:

body table tr td table.bordercolor, body table.bordercolor { width: 850px; }
blockquote table.bordercolor, td.windowbg table tr td table.bordercolor, td.windowbg2 table tr td table.bordercolor { width: 650px !important; }

Change numbers in red. This second line needs to be 200 pixels less than the full width of your forum. For example, if your forum is 900 pixels width, this number will need to be 700px.

In the Global Headers' HTML:

<div style="width: 850px; margin-left : 260px;" width="850">

Both of these numbers need to be the same number you defined in the CSS.

In the Global Footers' HTML:

<div style="width:850px; margin-left: 260px;" width="850">

Once again, these values need to be the same as the last instances. You can also use this line to change the text color, size and font of the default ProBoards footer text. (ie, Click here to make this board ad-free, etc.)

3) Resizing your sidebar

This is pretty easy. Basically you're changing two different numbers. One modifies the actual sidebar width, the second modifies the amount of space between the bar and your forum.

In the Global Headers' JavaScript:

document.getElementsByTagName('table')[0].style.marginLeft = "260px";

This is for your welcome table, and the number needs to be the width of your sidebar plus the pixel-value of the amount of space between the bar and your forum. For example, if your sidebar is 200 pixels wide, and you want 30 pixels of space between it and your forum, you would change this number to 230px. GOT IT???

In the Global Headers' CSS:

width: 240px;

This is the width of your sidebar.

In the Global Headers' HTML:

<div style="width: 850px; margin-left : 260px;" width="850">

This is the same value you used in the JavaScript; the width of your sidebar and the space in between it and your board.

In the Global Footers' HTML:

<div style="width:850px; margin-left: 260px;" width="850">

See above.

================================================================

Global Headers

<!-- BEGIN FLOATING SIDEBAR
By Elli - smangii.proboards.com
You may repost as long as this header remains intact
GLOBAL HEADERS -->

<script type="text/javascript">
<!--
// Remove Welcome Table align and add margin
document.getElementsByTagName('table')[0].removeAttribute("align");
document.getElementsByTagName('table')[0].style.marginLeft = "260px";
//-->
</script>

<style type="text/css">
/* Resize forum with CSS, by Chris */
body table tr td table.bordercolor, body table.bordercolor { width: 850px; }
blockquote table.bordercolor, td.windowbg table tr td table.bordercolor, td.windowbg2 table tr td table.bordercolor { width: 650px !important; }

html, body { height: 100%; }
#sidebar {
background-color: #d1d1d1;
width: 240px;
height: 100%;
position: fixed;
_position:absolute;
top: 0;
_top:expression(eval(document.body.scrollTop));
left: 0;
bottom: 0;
}
</style>
<!--[if IE]>
<style type="text/css">
#sidebar-container { min-height: 100%; overflow: hidden; }
</style>
<![endif]-->

<div id="sidebar-container">
<div id="sidebar">
Replace this text with anything you want to appear in this box.<br />
<b>To add images, links, and styles, you must use HTML, not UBBC.</b>
</div>
</div>
<div style="width: 850px; margin-left : 260px;" width="850">

<!-- END FLOATING SIDEBAR
GLOBAL HEADERS -->

Global Footers

<!-- BEGIN FLOATING SIDEBAR
GLOBAL FOOTERS -->
</div>
<div style="width:850px; margin-left: 260px;" width="850">
<!-- END FLOATING SIDEBAR -->