[CB] Peekaboo Side Tables | ProBoards Support

[CB] Peekaboo Side Tables Feb 21, 2011 0:40:24 GMT -8 noddynogood likes this

Post by SubDevo on Feb 21, 2011 0:40:24 GMT -8

Peekaboo Side Tables by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.

Check out the LIVE PREVIEW to see what this code is all about!

You can use these to replace Smangii's side tables or even use it WITH them!
You may add any HTML content to the side tables just like "normal" side tables.
I have provided separate codes for the left and right side.
You may use either one or both of them together.

Enjoy!!!

SubDevo

I highly recommend putting this code on a test site to get it "just right" before using them on your main forum. Especially, if you are replacing Smangii's side tables with this code.
Putting in the Peekaboo Side Table code (as is) will show up just like in the live preview site above (without the content, of course).

Location: Bottom of Global Footer ( And I mean BOTTOM! )

Right Side CSS and Code.

<style type="text/css">

</style>



<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)">



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



</div>
</div>



<script type="text/javascript">
/* Peekaboo Side Tables (Right Side) by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or 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 CSS and Code.

<style type="text/css">

</style>



<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)">



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



</div>
</div>



<script type="text/javascript">
/* Peekaboo Side Tables (Left Side) by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or 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 Maroon 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.

NOTE:
If any added content is wider than the above value, a horizontal scroll bar will appear within the side table. To prevent this, make sure your added content width is less than this value or change the content width (above) to "fit" the content.
This is especially important if you add widgets such as a chat box or playlist.

Changing the "Look" of the Content Div:

#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);
}

You may freely use the current background image. It is a 50% semi-transparent png.
If you want a background color instead of an image, replace that line with: background-color: #FF0000;
Enter your default color for text in this line: color: #FFFFFF; Change the Maroon to your desired colors.

Changing the "Look" of the Toggle Div:

#leftNavTog {
position: absolute;
width: 24px;
height: 100%;
right: 0px;
cursor: pointer;
background-image: url(http://i53.tinypic.com/2empxmu.png);
background-position: right center;
}

Enter the URL to your background image for the toggle div.
Make sure the width of the image used is the same width you entered in for all the widths (explained earlier).
If you want a background color instead of an image, replace that line with:
background-color: #FF0000;
Change the Maroon to your desired color.

Customize the Toggle Div (HTML):

Find the leftNavTog div line in the code.

<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>

You can have a mouse over (rollover) effect with the toggle div.
Just use the image that you entered for the leftNavTog background image for the "onmouseout" URL in the above.
Enter the URL to your "hover" image in the "onmouseover" section.

If you are not using images and you want the color to change, replace the leftNavTog line with this:

<div id="leftNavTog" title="Click to Hide or Show" onclick="togL_Nav(true)" onmouseover="this.style.backgroundColor='#FF0000'" onmouseout="this.style.backgroundColor='#00FF00'"></div>
Change the color to taste.

If you do not want any mouse over (rollover) effects, replace that line with this:

<div id="leftNavTog" title="Click to Hide or Show" onclick="togL_Nav(true)"></div>

Adding Content:

All your content goes between these clearly marked sections.



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



You may use any HTML (NOT UBBC) within here, just like you would use for "normal" sidetables.

Is there a way I can use this without it starting closed?
And can it be changed to stay open?

Yes and yes!

I used the Right side code for the following.
For the left side, replace all the Blue "R"s with "L".

1) To have it to start open on first visit and still have the open/closed memory:

Replace this:

if(document.cookie.match(/R_NavOpen=1/)){togR_Nav(true);}

With this:

var a=document.cookie; if(!a.match(/R_NavOpen/)||a.match(/R_NavOpen=1/)){togR_Nav(true);}

2) If you want it open on every page load and user can still close it (no memory):

Replace this:

if(document.cookie.match(/R_NavOpen=1/)){togR_Nav(true);}

With this:

togR_Nav(true);

3) If you want it open all the time (user can not close):

Do the change in the option #2 above AND remove the Red from the div HTML.
Note: Change the blue to "left" for the left side code.

<div id="rightNavTog" title="Click to Hide or Show" onclick="togR_Nav(true)"... etc..

Be aware that if you have the side tables open all the time, they may cover (overlap) your forum for users with smaller screen resolutions. That could be annoying...

EDIT:
No code change. Added more instructions.