Peekaboo Side Table ( Left )

[Metal Cobra]

Ahhh, okay. I think I got it. I appreciate the fact that you took the time to clear things up. ^^

This has always been a BA code. }

EDIT: One more thing... I noticed there are arrows inside the content box when it's opened. Is there a way to get them to go away?

[blitzy]

Hi Pebble,

I'm using this code in conjunction with Kismet's tabbed content code. Problem is, that in the boards, it shoves everything to the left. Preview.

I've gone through and taken out what parts is causing the issue, and it seems to the the clickable section in the CSS, though I believe the issue is in the Javascript, because I changed the name from clickable to clicky, and the tabs no longer were clickable.

Here is the Javascript I have in my Global Headers:
<script type="text/javascript">
$( function() {
var myTabs = new KISCODE.TabSwitcher( {
container: ".dem-tabs",
defaultTab: 1,
animate: true
} );
var myOtherAwesomeTabs = new KISCODE.TabSwitcher( {
container: ".arrow-tabs",
prevButton: ".previous",
nextButton: ".next",
circular: true
} );
} );
</script>

This is what I have in my CSS:
.clickable {
display: inline;
border-bottom: 0px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}

.butterfly {
width: 25px;
height: 25px;
background-image: url(http://i.imgur.com/lI3rgkO.png);
margin-left: 5px;
float: left;
}
.navi {
background-color: @container_background_color_1;
}
#tab-strip {
list-style: none outside none;
padding: 0px;
display: block;
background-color: @container_background_color_1;
}
#tab-strip a {
text-decoration: none;
}
.tab-content {
display: none;
}
.tabs {
background-color: @container_background_color_1;
}

And this is the top half of the actual plugin:

<div class='dem-tabs'>
<center><ul id='tab-strip'>
<div style="display: inline-block">
<li id='tab1' class='clickable'><span class="butterfly"></span></li>
<li id='tab2' class='clickable'><span class="butterfly"></span></li>
<li id='tab3' class='clickable'><span class="butterfly"></span></li>
<li id='tab4' class='clickable'><span class="butterfly"></span></li>
<li id='tab5' class='clickable'><span class="butterfly"></span></li>
</div>
</ul>
<div class="navi" style="clear:both;">Click the butterflies to navigate</div></center>
<div class="tabs">

PS, I am aware of the tabbed version of this plugin, but I'm not a fan of the style it takes... no offense meant.

[Pebble]

Mar 25, 2014 12:40:38 GMT -8 blitzy said:

Hi Pebble,

I'm using this code in conjunction with Kismet's tabbed content code. Problem is, that in the boards, it shoves everything to the left. Preview.

I've gone through and taken out what parts is causing the issue, and it seems to the the clickable section in the CSS, though I believe the issue is in the Javascript, because I changed the name from clickable to clicky, and the tabs no longer were clickable.

Here is the Javascript I have in my Global Headers:
<script type="text/javascript">
$( function() {
var myTabs = new KISCODE.TabSwitcher( {
container: ".dem-tabs",
defaultTab: 1,
animate: true
} );
var myOtherAwesomeTabs = new KISCODE.TabSwitcher( {
container: ".arrow-tabs",
prevButton: ".previous",
nextButton: ".next",
circular: true
} );
} );
</script>

This is what I have in my CSS:
.clickable {
display: inline;
border-bottom: 0px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}

.butterfly {
width: 25px;
height: 25px;
background-image: url(http://i.imgur.com/lI3rgkO.png);
margin-left: 5px;
float: left;
}
.navi {
background-color: @container_background_color_1;
}
#tab-strip {
list-style: none outside none;
padding: 0px;
display: block;
background-color: @container_background_color_1;
}
#tab-strip a {
text-decoration: none;
}
.tab-content {
display: none;
}
.tabs {
background-color: @container_background_color_1;
}

And this is the top half of the actual plugin:

<div class='dem-tabs'>
<center><ul id='tab-strip'>
<div style="display: inline-block">
<li id='tab1' class='clickable'><span class="butterfly"></span></li>
<li id='tab2' class='clickable'><span class="butterfly"></span></li>
<li id='tab3' class='clickable'><span class="butterfly"></span></li>
<li id='tab4' class='clickable'><span class="butterfly"></span></li>
<li id='tab5' class='clickable'><span class="butterfly"></span></li>
</div>
</ul>
<div class="navi" style="clear:both;">Click the butterflies to navigate</div></center>
<div class="tabs">

PS, I am aware of the tabbed version of this plugin, but I'm not a fan of the style it takes... no offense meant.

Yep, this isn't a problem with the peekaboo table, it's what you're adding. I'm not familiar with the code you're adding but it seems it has the same class name as the tables in your forum.  You need to change the 'clickable' to something else, maybe 'myclickable'  in both the HTML and the CSS

[Pebble]

I've just looked at the link to this code. It seems the code is remotely hosted so what I posted above wont work. In fact, it wont work with proboards as they have both used the same class name.

I have a tabbed table code here (not released) interoceandesigns.com/thread/3325/tabbed-table which might work for what you want.

and I think there is a dynamically tabbed table in the library by someone else.

[kismetkins]

Mar 25, 2014 13:04:50 GMT -8 Pebble said:

Mar 25, 2014 12:40:38 GMT -8 blitzy said:

Hi Pebble,

I'm using this code in conjunction with Kismet's tabbed content code. Problem is, that in the boards, it shoves everything to the left. Preview.

I've gone through and taken out what parts is causing the issue, and it seems to the the clickable section in the CSS, though I believe the issue is in the Javascript, because I changed the name from clickable to clicky, and the tabs no longer were clickable.

Here is the Javascript I have in my Global Headers:
<script type="text/javascript">
$( function() {
var myTabs = new KISCODE.TabSwitcher( {
container: ".dem-tabs",
defaultTab: 1,
animate: true
} );
var myOtherAwesomeTabs = new KISCODE.TabSwitcher( {
container: ".arrow-tabs",
prevButton: ".previous",
nextButton: ".next",
circular: true
} );
} );
</script>

This is what I have in my CSS:
.clickable {
display: inline;
border-bottom: 0px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}

.butterfly {
width: 25px;
height: 25px;
background-image: url(http://i.imgur.com/lI3rgkO.png);
margin-left: 5px;
float: left;
}
.navi {
background-color: @container_background_color_1;
}
#tab-strip {
list-style: none outside none;
padding: 0px;
display: block;
background-color: @container_background_color_1;
}
#tab-strip a {
text-decoration: none;
}
.tab-content {
display: none;
}
.tabs {
background-color: @container_background_color_1;
}

And this is the top half of the actual plugin:

<div class='dem-tabs'>
<center><ul id='tab-strip'>
<div style="display: inline-block">
<li id='tab1' class='clickable'><span class="butterfly"></span></li>
<li id='tab2' class='clickable'><span class="butterfly"></span></li>
<li id='tab3' class='clickable'><span class="butterfly"></span></li>
<li id='tab4' class='clickable'><span class="butterfly"></span></li>
<li id='tab5' class='clickable'><span class="butterfly"></span></li>
</div>
</ul>
<div class="navi" style="clear:both;">Click the butterflies to navigate</div></center>
<div class="tabs">

PS, I am aware of the tabbed version of this plugin, but I'm not a fan of the style it takes... no offense meant.

Yep, this isn't a problem with the peekaboo table, it's what you're adding. I'm not familiar with the code you're adding but it seems it has the same class name as the tables in your forum.  You need to change the 'clickable' to something else, maybe 'myclickable'  in both the HTML and the CSS

The problem's that the CSS for the list items is affecting the forum items that have the same class; that doesn't mean you need to change the HTML for the plugin - that's what the JavaScript uses. Best solution is to just change the selector for the CSS to #tab-strip li or something that matches the tab buttons.

[Shinobi]

Pebble phrpg.freeforums.net/ that's my forum, what I want is, when I hide the menu, I want my forum to expand and occupy the rest of the page, how can I do that?, and also, how can i make the bar and everything part of a percentage?

I'm trying like this:

#LPBar {

width: 19%;

}

But it doesn't work.

[Pebble]

That is not possible with this plug at present.

[Shinobi]

Have you consider adding it?

Thank you for your reply.

[Pebble]

Not to this plugin. It's a completely plugin that would need writing.

[GloomyStarWitch]

Pebble hi!! sorry to bother you! but i need a bit of help as i seem to have a small problem?

So, i went to the "content" area to place my text and other stuff. and i wanted to add some links in the "content" box. i placed my codes and everything, but when i went to check a live preview of the links, they didn't work?

here's the codes/links/images i've put in so far in the content box;

<center><img src="http://i1281./a507/GloomyAdvancers/PERSONAL/welcome_zpswmnhshhl.png" border="0" alt=" photo welcome_zpswmnhshhl.png"/></a></a>
<br><img src="http://i1281./a507/GloomyAdvancers/for%20themes/topthreads_zpsxplgruql.png" border="0" alt=" photo topthreads_zpsxplgruql.png"/></a>
<br><a href=”http://advancers.proboards.com/thread/464”>Advanceshipping Discussion</a>
<br><a href=”http://advancers.proboards.com/thread/18”>Advanceshipping Art</a>
<br><a href=”http://advancers.proboards.com/thread/1608”>Usershipping Thread</a>
<br><a href=”http://advancers.proboards.com/thread/832”>Anime General Discussion</a>
<br><a href=”http://advancers.proboards.com/thread/738”>Battle Arena</a>
<br><a href=”http://advancers.proboards.com/thread/1132”>Advanceshipping Hints Project</a>
<br><a href=”http://advancers.proboards.com/thread/43/art”>Art Thread</a>
<a href=”http://advancers.proboards.com/thread/43/art”>Art Thread</a>
</br>
</center>

So for example, if i click on the first link here it'd brink me here.

here's a comparison of how the links look like
Original;
http://advancers.proboards.com/thread/464
link when clicked from peekaboo box;
http://advancers.proboards.com/"http://advancers.proboards.com/thread/464"

I haven't touched/messed around with any of the plugins html (i'm not good with html in general anyways lol). i've only added my codes from the plugins>manage>content area. nothing else.
Am i using the wrong code or something? idk i'm really sorry i'm not good with html in general.

also, i can't give you a better live preview as the theme is still not available to the public; only staff.;"(

oh! and this also might be helpful; here's a list of plugins i'm using while using the peekaboo side table.
~Thread Descriptions
~Karma System
~Quick Reply BBCode Buttons
~Simple Tagging
~Awards System

hope all of this info will help you help me figure this out.:") lol and thank you SOOOOO much in advance!!!
/btw i really love this plugin it's gonna be SOO helpful for me and my new theme!!! good job!!! <3 and ty!!

[Pebble]

Your quote marks " are incorrect. You have : ”

You also look to have some extra </a> tags after the img tags.

EDIT:

This is probably what you want:


<center>

<img src="http://i1281./a507/GloomyAdvancers/PERSONAL/welcome_zpswmnhshhl.png" border="0" alt=" photo welcome_zpswmnhshhl.png"/>

<br>

<img src="http://i1281./a507/GloomyAdvancers/for%20themes/topthreads_zpsxplgruql.png" border="0" alt=" photo topthreads_zpsxplgruql.png"/>

<br><a href="http://advancers.proboards.com/thread/464">Advanceshipping Discussion</a>

<br><a href="http://advancers.proboards.com/thread/18">Advanceshipping Art</a>

<br><a href="http://advancers.proboards.com/thread/1608">Usershipping Thread</a>

<br><a href="http://advancers.proboards.com/thread/832">Anime General Discussion</a>

<br><a href="http://advancers.proboards.com/thread/738">Battle Arena</a>

<br><a href="http://advancers.proboards.com/thread/1132">Advanceshipping Hints Project</a>

<br><a href="http://advancers.proboards.com/thread/43/art">Art Thread</a>

<a href="http://advancers.proboards.com/thread/43/art">Art Thread</a>

<br>

</center>


[Niomi]

Hi pebble!! I love this code but when trying to make it bigger with CSS it works fine until you close and try to open it again. I'm not sure if there's a go around for this 'cause I'd like it if the side bar was a bit bigger but I only found out how to change the size within the CSS code.

here's the site we're using it on

[Mint]

Hi Pebble,
Your plugin has been working great for me but I just need help with adding some CSS to the HTML. Could you help me?

How do I add this CSS:

}

table, tr, td {

   border-collapse:collapse;

}

td {

   border:white 2px solid;

   height:auto;

   width:auto;

}

th {

   height:auto;

   width:auto;

}

.clanname {

   color:white;

   font-size:20px;

   font-family:century, times, serif;

}


To This HTML?:

<!DOCTYPE html>

<html>

<head>

<link rel='stylesheet' href='style.css'/>

<script src='script.js'></script>

</head>

<body>

   <div><table><tr><td style="border:none;"><table><tr>

       <th colspan=4><span class="clanname">S P E C K L E C L A N</h2></th>

       </tr>

       <tr>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td></tr>

       </table></td></tr>

       <tr><td style="border:none;"><table><tr>

       <th colspan=4><span class="clanname">M I S T C L A N</h2></th>        </tr>

       <tr>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td></tr>

       </table></td></tr>

       <tr><td style="border:none;"><table><tr>

       <th colspan=4><span class="clanname">W H I S P E R C L A N</h2></th>        </tr>

       <tr>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td></tr>

       </table></td></tr>

       <tr><td style="border:none;"><table><tr>

       <th colspan=4><span class="clanname">S M O K E C L A N</h2></th>        </tr>

       <tr>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td>

       <td><img src="https://placehold.it/60x60" /></td></tr>

       </table></td></tr></table>

   </div>

</body>

</html>        

[-=MvC=-]

Is there a way to change the colour to the txt that I but on the side tabs?

[TermiteHunter]

The tab images just broke 12 am EDT Pebble
They now display a gray box. The text at the top is 2 letters "NG" image missiNG?
Photobucket source does not resolve when pasted into browser
I suspect an error at PB or the image has been lost