Peekaboo Side Tables CODE FREE

[EmilyColeman]

RIGHT SIDE!!!

<style type="text/css">
<!--
/* Peekaboo Side Tables (Right Side) CSS by SubDevo */
#rightNav {
  width: 24px;
  height: 100%;
  top: 0px;
  left: auto;
  right: 0px;
  position: fixed;
  _position: absolute;
}
#rightNavTog {
  position: absolute;
  width: 24px;
  height: 100%;
  left: 0px;
  cursor: pointer;
  background-image: url(http://i53.tinypic.com/2empxmu.png);
  background-position: left center
}
#rightNavContent {
  position: absolute;
  left: 24px;
  width: 230px;
  height: 100%;
  overflow: auto;
  text-align: center;
  color: #FFFFFF;
  background-image: url(http://i45.tinypic.com/28b9y6u.png);
}
-->
</style>

<!-- ============================================
START SubDevo's Peekaboo Side Tables (Right Side)
============================================= -->

<div id="rightNav" style="display:none; z-index:51;">
<div id="rightNavTog" title="Click to Hide or Show" onclick="togR_Nav(true)" onmouseover="this.style.backgroundImage='url(http://i54.tinypic.com/2weh1kh.png)'" onmouseout="this.style.backgroundImage='url(http://i53.tinypic.com/2empxmu.png)'"></div>
<div id="rightNavContent" style="display:none;" onscroll="setRnavCook(this.scrollTop,1)">

<!-- *** PLACE ALL RIGHT SIDE CONTENT BELOW THIS LINE *** -->

SIDE TABLE CONTENT HERE <br/><b>USE ONLY HTML FOR CONTENT!</B>

<!-- *** PLACE ALL RIGHT SIDE CONTENT ABOVE THIS LINE *** -->

</div>
</div>

<!-- ==========================================
END SubDevo's Peekaboo Side Tables (Right Side)
=========================================== -->

<script type="text/javascript">
/* Peekaboo Side Tables (Right Side) by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* http://interoceandesigns.proboards.com or http://lsdp.proboards.com */

var R_memOnly=0; // Members Only? 1=Yes, 0=No
var R_TogWidth=24; // Width of Clickable area.
var R_SideWidth=230; // Width of content.

function setRnavCook(a,b){ var n=(b)?"R_NavTop=":"R_NavOpen=";
  document.cookie=n+a+"; expires=Sat, 17 Jan 2050 12:12:12 UTC; path=/";
}
function scrollRT(){R_NavH.scrollTop=(document.cookie.match(/R_NavTop=(\d+)/))?RegExp.$1:0;}
function togR_Nav(a){ var m=document.body,b=R_Nav.style,c=R_NavH.style;
  if(a!=true){if(is_IE){b.height=m.clientHeight;}
     b.right=-parseInt(m.scrollLeft)+"px"; b.top=parseInt(m.scrollTop)+"px";
  }else{
     if(c.display=="none"){c.display=""; b.width=R_wT;setRnavCook(1);
        if(R_NavFirst){R_NavFirst=false;setTimeout("scrollRT()",200);}else{scrollRT();}
     }else{setRnavCook(0);c.display="none"; b.width=R_TogWidth;}
}} var R_wT=1+R_TogWidth+R_SideWidth+"px",is_IE=(document.uniqueID)?true:false;
var R_Nav=document.getElementById ("rightNav"),R_NavH=document.getElementById ("rightNavContent");
if(!R_memOnly||pb_username!="Guest"){ R_Nav.style.display=""; var R_NavFirst=true;
  if(document.cookie.match(/R_NavOpen=1/)){togR_Nav(true);}
  if(is_IE){window.attachEvent("onscroll", togR_Nav); window.attachEvent("onresize", togR_Nav);}
}
</script>




LEFT SIDE!!!


<style type="text/css">
<!--
/* Peekaboo Side Tables (Left Side) CSS by SubDevo */
#leftNav {
  width: 24px;
  height: 100%;
  top: 0px;
  right: auto;
  left: 0px;
  position: fixed;
  _position: absolute;
}
#leftNavTog {
  position: absolute;
  width: 24px;
  height: 100%;
  right: 0px;
  cursor: pointer;
  background-image: url(http://i53.tinypic.com/2empxmu.png);
  background-position: right center;
}
#leftNavContent {
  position: absolute;
  right: 24px;
  width: 230px;
  height: 100%;
  overflow: auto;
  text-align: center;
  color: #FFFFFF;
  background-image: url(http://i45.tinypic.com/28b9y6u.png);
}
-->
</style>

<!-- ===========================================
START SubDevo's Peekaboo Side Tables (Left Side)
============================================ -->

<div id="leftNav" style="display:none; z-index:51;">
<div id="leftNavTog" title="Click to Hide or Show" onclick="togL_Nav(true)" onmouseover="this.style.backgroundImage='url(http://i54.tinypic.com/2weh1kh.png)'" onmouseout="this.style.backgroundImage='url(http://i53.tinypic.com/2empxmu.png)'"></div>
<div id="leftNavContent" style="display:none;" onscroll="setLnavCook(this.scrollTop,1)">

<!-- *** PLACE ALL LEFT SIDE CONTENT BELOW THIS LINE *** -->

SIDE TABLE CONTENT HERE <br/><b>USE ONLY HTML FOR CONTENT!</B>

<!-- *** PLACE ALL LEFT SIDE CONTENT ABOVE THIS LINE *** -->

</div>
</div>

<!-- =========================================
END SubDevo's Peekaboo Side Tables (Left Side)
========================================== -->

<script type="text/javascript">
/* Peekaboo Side Tables (Left Side) by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* http://interoceandesigns.proboards.com or http://lsdp.proboards.com */

var L_memOnly=0; // Members Only? 1=Yes, 0=No
var L_TogWidth=24; // Width of Clickable area.
var L_SideWidth=230; // Width of content.

function setLnavCook(a,b){ var n=(b)?"L_NavTop=":"L_NavOpen=";
  document.cookie=n+a+"; expires=Sat, 17 Jan 2050 12:12:12 UTC; path=/";
}
function scrollLT(){L_NavH.scrollTop=(document.cookie.match(/L_NavTop=(\d+)/))?RegExp.$1:0;}
function togL_Nav(a){ var m=document.body,b=L_Nav.style,c=L_NavH.style;
  if(a!=true){if(is_IE){b.height=m.clientHeight;}
     b.left=parseInt(m.scrollLeft)+"px"; b.top=parseInt(m.scrollTop)+"px";
  }else{
     if(c.display=="none"){c.display=""; b.width=L_wT;setLnavCook(1);
        if(L_NavFirst){L_NavFirst=false;setTimeout("scrollLT()",200);}else{scrollLT();}
     }else{setLnavCook(0);c.display="none"; b.width=L_TogWidth;}
}} var L_wT=1+L_TogWidth+L_SideWidth+"px",is_IE=(document.uniqueID)?true:false;
var L_Nav=document.getElementById ("leftNav"),L_NavH=document.getElementById ("leftNavContent");
if(!L_memOnly||pb_username!="Guest"){ L_Nav.style.display=""; var L_NavFirst=true;
  if(document.cookie.match(/L_NavOpen=1/)){togL_Nav(true);}
  if(is_IE){window.attachEvent("onscroll", togL_Nav); window.attachEvent("onresize", togL_Nav);}
}
</script>



Instructions-

The instructions are the same for either side, so I will explain only the left side for this example.

Decide weather you want the side tables shown for members only or also for guests.
var L_memOnly=0; // Members Only? 1=Yes, 0=No
Change this to 1 (in the script) if you wish to hide the side tables from guests.

Each Peekaboo side table consists of 3 divs.
One outer div (leftNav), which holds two vertical divs: the content div (leftNavContent) and the toggle div (leftNavTog).
The first thing you need to decide is the width of your toggle div and the width of your content div (side table width). Enter your toggle div width in the script.
var L_TogWidth=24; // Width of Clickable area.

Now enter the SAME value in ALL the 24px parts of the CSS.

#leftNav {
width: 24px;
height: 100%;
top: 0px;
right: auto;
left: 0px;
position: fixed;
_position: absolute;
}
#leftNavTog {
position: absolute;
width: 24px;
height: 100%;
right: 0px;
cursor: pointer;
background-image: url(http://i53.tinypic.com/2empxmu.png);
background-position: right center;
}
#leftNavContent {
position: absolute;
right: 24px;
width: 230px;
height: 100%;
overflow: auto;
text-align: center;
color: #FFFFFF;
background-image: url(http://i45.tinypic.com/28b9y6u.png);
}

Now enter your content width in the script:
var L_SideWidth=230; // Width of content.
Enter the same value in the Green part in the above CSS.