Peekaboo Side Table ( Left )

[Pebble]

Peekaboo Side Table (Left)

Images:






Demo: Pebble Plugins

Download: PB's Library
Version: 1.0.4
Updated: 22/10/13

Right Side is here: Peekaboo Side Table (Right)

Inputs Needed:

Standard bar image
Rollover bar image
Bar width
Content width
Content
Content Background colour
Option to open by default

CSS variables if you want to change things:

#LPbar { CSS stuff here } // The bar that you click to open/close
#LPcont { CSS stuff here } // The content that is hidden/shown

For support please leave a post in this thread and remember to tag me.

[Angelic Girl]

Hey there Pebble,
I attempted to use this version of your plugin, and while it worked fine at first, it gave me an error in which I could not create a thread on my forum. After disabling the plugin itself, I was able to make a thread. I don't think I have any coding errors in the html section of the plugin that would be causing this. Any suggestions on what may be happening?

Was using it here : psyencefiction.proboards.com

However I have it disabled now.

[Pebble]

Jan 22, 2013 17:05:34 GMT -8 Angelic Girl said:

Hey there Pebble,
I attempted to use this version of your plugin, and while it worked fine at first, it gave me an error in which I could not create a thread on my forum. After disabling the plugin itself, I was able to make a thread. I don't think I have any coding errors in the html section of the plugin that would be causing this. Any suggestions on what may be happening?

Was using it here : psyencefiction.proboards.com

However I have it disabled now.

I just tried this in IE9 , FF & Chrome and there wasn't a problem (on the demo site) so I'd say it's something that you've added.
If you disable the plug-in there is no way for me to check it
If you don't want to leave it enabled then you could post up the HTML you've added here and I'll have a quick look.

[Angelic Girl]

Pebble,
I've enabled the plugin again. I'm trying to use it with Kismet's tabbed table code for the sidebar. It may be causing issues.

Here's the html portion of the code that I have installed at the moment:

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>

<script type='text/javascript'>
/* code written by kismet of RPG-Directory.com */
$(function(){ function selectTab(tab){ var i=1; while($('#tab'+i).length){ if(tab.attr('id')!=='tab'+i){ $('#tab'+i).removeClass('highlight'); $('#tab'+i+'-content').hide(); } else { tab.addClass('highlight'); $('#tab'+i+'-content').show(); } i++; }} $('#tab1').addClass('highlight'); $('.clickable').each(function(){ $(this).click(function(){ selectTab($(this)); });});});</script>

<script type='text/javascript' src='http://yourjavascript.com/1211131136/jquery.cookie.js'></script>
<script type='text/javascript'>
/* code written by kismet of RPG-Directory.com */

$(function(){var kiscookie="kismet_selected_tab";function selectTab(tab){var i=1;while($('#tab'+i).length){if(tab.attr('id')!=='tab'+i){$('#tab'+i).removeClass('highlight');$('#tab'+i+'-content').hide();}else{tab.addClass('highlight');$('#tab'+i+'-content').show();}
i++;}}
$('.clickable').each(function(){$(this).click(function(){selectTab($(this));$.cookie(kiscookie,$(this).attr('id'));});});if($.cookie(kiscookie)){var tab=$.cookie(kiscookie);selectTab($('#'+tab));}});</script>

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript' src='http://yourjavascript.com/1211131136/jquery.cookie.js'></script>

<img src="http://i1077./w467/bethyxgirlx/katepf2_zpsc788a58b.png"/>
<br/>
<div align="center">
<ul id='tab-strip'>
<li id='tab1' class='clickable'>CBOX</li>
<li id='tab2' class='clickable'>STAFF</li>
<li id='tab3' class='clickable'>FEATURED</li><br>
<li id='tab4' class='clickable'>LINKS</li>
<li id='tab5' class='clickable'>CREDITS</li>
</ul>
<div id='tab1-content' class='tab-content'>
<div style="background: #2d111d; width: 190px; margin-top: 20px; padding: 10px; font-family: arial; text-align: justify; font-size: 11px; line-height: 11px; color: #763825;">
<center><!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="185" height="180" src="http://www2.cbox.ws/box/?boxid=2323567&boxtag=85f3tj&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-2323567" style="border:#ababab 0px solid;" id="cboxmain2-2323567"></iframe></div>
<div><iframe frameborder="0" width="185" height="75" src="http://www2.cbox.ws/box/?boxid=2323567&boxtag=85f3tj&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform2-2323567" style="border:#ababab 0px solid;border-top:0px" id="cboxform2-2323567"></iframe></div>
</div>
<!-- END CBOX --></center></div></div>

<div id='tab2-content' class='tab-content'>
<div style="background: #2d111d; width: 190px; margin-top: 20px; padding: 10px; font-family: arial; text-align: justify; font-size: 11px; line-height: 11px; color: #763825;">
<a href="http://psyencefiction.proboards.com/index.cgi?action=viewprofile&user=admin"><font color='#e3e2e1'>angelic girl</font></a><br>
<a href="http://psyencefiction.proboards.com/index.cgi?action=viewprofile&user=anish"><font color='#e3e2e1'>anish</font></a><br>
<a href="http://psyencefiction.proboards.com/index.cgi?action=viewprofile&user=kyla"><font color='#e3e2e1'>kyla</font></a><br>
<a href="http://psyencefiction.proboards.com/index.cgi?action=viewprofile&user=moonrider"><font color='#e3e2e1'>lune</font></a><br>
<a href="http://psyencefiction.proboards.com/index.cgi?action=viewprofile&user=remy"><font color='#e3e2e1'>remy</font></a><br></br>
<font size=3><b><font color='#e3e2e1'><a href="http://psyencefiction.proboards.com/index.cgi?board=forumannouncements&action=display&thread=2757">APPLY FOR STAFF!</font></font></a></b></div></div>

<div id='tab3-content' class='tab-content'>
<div style="background: #2d111d; width: 190px; margin-top: 20px; padding: 10px;  font-family: arial; text-align: justify; font-size: 11px; line-height: 11px; color: #763825;">
<center><b>FORUM OTM</b></center>
<center>COMING SOON!<br></br>
<center><b>GRAPHIC CONTEST</b><br>
<a href="http://ktms.b1." target="_blank"><img src="http://i752./xx170/Sunset_Endings/KTMS/aff.png" alt="Keep the Magic Secret"></a><br>
ADMIN: <a href="http://psyencefiction.proboards.com/index.cgi?action=viewprofile&user=quillz"/><font color="#ffffff">INQUILLZ</font></a><br></br>
<p align="justify">Based on the BBC show, Keep the Magic Secret is the longest running Merlin RPG, created October 2008. We are AU as of series one, drawing both from the legends and the show. Join in the dangerous world of magic, Knights and courtly deeds but just remember to keep the magic secret! </p><br></br>
</div></div>

<center><b>PAID-FOR ADS</b></center>.<br>
<a href="http://liarsgunsandmoney.b1./"
target="_blank"><img src="http://i1153./p512/tripzle/farscape/lgmban.png" border="0" alt="LGaM"></a><br></br>
<a href="http://unforgivable-curse.proboards.com" target="_blank"><img src="http://i1077./w467/bethyxgirlx/TUC_zpsbd529aed.png" border="0" alt="TUC"/></a><br></br>
Learn more about how to get your site displayed <a href="http://psyencefiction.proboards.com/index.cgi?board=creditsstore&action=display&thread=55"/><font color='#e3e2e1'>here</font></a>.
</div></div>

<div id='tab4-content' class='tab-content'>
<div style="background: #2d111d; width: 190px; margin-top: 20px; padding: 10px; font-family: arial; text-align: justify; font-size: 11px; line-height: 11px; color: #763825;">
<a href="http://psyencefiction.proboards.com/index.cgi?board=siteinformation&action=display&thread=3"><font color='#e3e2e1'>forum rules</font></a><br>
<a href="http://psyencefiction.proboards.com/index.cgi?board=siteinformation&action=display&thread=4"><font color='#e3e2e1'>forum cbox rules</font></a><br>
<a href="http://psyencefiction.proboards.com/index.cgi?board=membersuggestions"><font color='#e3e2e1'>suggestions / help</a></font><br>
<a href="http://psyencefiction.proboards.com/index.cgi?board=forumadvertssubmissions&action=display&thread=74"><font color='#e3e2e1'>affiliate</font></a><br>
<a href="http://psyencefiction.proboards.com/index.cgi?board=forumadvertssubmissions"><font color='#e3e2e1'>advertise</font></a>
</div></div>

   
<div id='tab5-content' class='tab-content'>
<div style="background: #2d111d; width: 190px; margin-top: 20px; padding: 10px; font-family: arial; text-align: justify; font-size: 11px; line-height: 11px; color: #763825;">
Sidebar copyright <a href="http://rpg-directory.com/threads/tabbed-content.32391/"/>Kismet</a> of RPG-D, and Smangii of Slightly Insane.  Other codes can be found on Proboards Support.  Skin and Layout made by Angelic Girl of Psyence Fiction.  Thieves will be reported!</div></div>





There's also a CSS section that I've added to the style sheet. I dont think that would cause any problems though.

[Pebble]

Just breifly looking, you're loading Jquery libraries and add on's. V5 comes with Jquery 1.7.2 already loaded so this may be messing things up as most of V5 is coded with Jquery.
Does the plug-in work if you take out your HTML (as in, can you create threads?)

The HTML looks OK (apart from the </br> you have every so often which should be <br> or <br />)
I'd bet money it's the scripts you're adding/loading that are causing the problem.

There is a tabbed table code here at PB's for V5 I think that should work well.
Have you seen the tabbed peekaboo tables? Maybe they'll be more suited to what you're trying to do?

[Angelic Girl]

Oh, no I haven't. I'll have a look, are they in the plugin section or template Modification. And I know the plugin was working fine until I added the content, so I bet you're right about the Jquery.

[Pebble]

Have a look here: support.proboards.com/thread/434824/page/4/peekaboo-multi-tabbed-right-tables#page=1

I haven't had time to do the left side yet but you'll get the idea from the right side.

[Angelic Girl]

Okay thank you. I'll have to take a look at it when I'm not tired. xD I've bookmarked the link. :3

[bleepakableep]

Is there anyway to edit the height? Instead of it going from the very top to bottom - look like this : insatiable-therpg.proboards.com/index.cgi

[Pebble]

Updated code in first post to remember the users choice if open or closed (if you have set it to open on page load)

[Pebble]

Jan 23, 2013 18:38:14 GMT -8 bleepakableep said:

Is there anyway to edit the height? Instead of it going from the very top to bottom - look like this : insatiable-therpg.proboards.com/index.cgi

Hi bleepakableep,
You can use this code (right side, I haven;'t done the left side yet). Pick the one tab option, distance from top of screen and then make the tab as big/small as you want. Worth a look.

Peekaboo Multi Tabbed Right Side

OR

You could try adding this to your global footer :


<style>
#leftPouter{
top:100px; // distance from top of screen
height:50%; // height of Peekaboo table
}
</style>

[XaviEo]

Thank you so much Pebble for that update! Now the code is perfect for me! (:

[Mistuh M]

Would there be any chance of adding a 'Height' option to the bar? We use a small image which is 30x130 and since there is no height option, it just duplicates the image and it looks terrible.

[True Essence]

Hey Pebble, great code! I've been looking for this one. I just have one question, I'm testing it on my beta site and right now it's working except it has my "Click for ICbox" twice when the box is not that big. I just want the sidetable to fit right in with the box like it does on my current v4 site.

Test site

Real site

Do you know what I need to fix to remedy this?

[Pebble]

I haven't tried this but put this at the bottom of your CSS :

Admin > Themes > colors and styles > style sheet

#leftPbar{
background-attachment:fixed;
background-position:center;
}