Popout code for sidebar

[Pheobe Black]

So I'm trying to find a code/template for making my sidebar plugin(s) pop in and out of the side of the forums preferably with a button/tab/icon. I've looked via google and all of it is a foreign language to me and I can't figure it out. I made a plugin for my side bars, so if anyone can give me a code that I can put into the wrapper template to stick the sidebar plugin coding into, I'd be eternally grateful. The tester for my forum is orderofmerlintester.proboards.com

[Pheobe Black]

bump

[Tumbleweed]

Oct 15, 2016 9:28:30 GMT -8 Pheobe Black said:

So I'm trying to find a code/template for making my sidebar plugin(s) pop in and out of the side of the forums preferably with a button/tab/icon. I've looked via google and all of it is a foreign language to me and I can't figure it out. I made a plugin for my side bars, so if anyone can give me a code that I can put into the wrapper template to stick the sidebar plugin coding into, I'd be eternally grateful. The tester for my forum is orderofmerlintester.proboards.com

Pheobe, there is a plug in that does that called the Peekaboo Side Table ( Left ) by Pebble. It's very customizable.  But if you are set on making your sidebar work that way, I can take a look at what you have but I'm a bit confused, you said you made it into a plugin but what I see is someone else's side bar and then you said want to put the code you have in your wrapper. If you can clarify that would help.

Edit: I went ahead and did the coding for a pop out side table. It's here: abetteramerica.freeforums.net/

Here is the coding if you want to use it or if you want the Peekaboo instead, that's fine:

I put this above my the wrapper div in my wrapper template (above this: <div id="wrapper">)

The html: (also have a google font link in there)

<link href='http://fonts.googleapis.com/css?family=Aguafina+Script' rel='stylesheet' type='text/css'>
<div class="slide">
<div class="my_wrapper">
Your coding content here
</div>
<div id="my_tabbie">Tab Name</div>
</div>

I do want to warn you, it is a little bit of a bear to get things perfect if you change content and tab widths but I made comments to help you.
This is the css and it goes at the bottom of your style sheet or you could just put style tags around the css and put in your wrapper template above the html and actually, while you are styling it, it might be easier.

.slide {
position:absolute;
top:30px;
/*the left (negative number) and width needs to be the same*/
left:-250px;
width:250px;
height:500px;
transition: 0.4s;
z-index:2000;
}
/*the margin left must be the same as left&width in the slide class*/
.slide:hover{
margin-left:250px;
}
/*everything is rotated so the width and height are swapped*/
#my_tabbie{
position:relative;
/*this will be half of the height of the class slide minus the width of the tab approx*/
top:-280px;
/*this will be half of the width of the class slide minus the 22px of the tab approx*/
left:114px;
float:right;
font-family:'Aguafina Script', cursive;
font-size:1.2em;
text-align:center;
width:190px; /* since rotated this is actually the height of your tab */
height:22px; /* since rotated this is actually the width of your tab */
letter-spacing:2px;
font-weight:bold;
color:#88cccc;
/* Since rotated this is moving the test a bit left so center */
padding-top:10px;
background-color:#ffffff;
border-right:2px solid #88cccc;
border-left:2px solid #88cccc;
border-bottom:2px solid #88cccc;
/*remember these are rotated*/
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
z-index:2002;
}
.my_wrapper{
background-color:#8cc;
width:235px;
height:100%;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
padding:8px;
float:left;
z-index:2001;
}
Since I am rotating the tab&text it can take a bit to wrap your brain around how everything is swapped. Width is height, height is width, etc. Again, I put comments to help. Also on the test site I have it in a fixed position (always there) but the coding I gave you it's in absolute positioning (will scroll out with the forum). If you want it in the fixed position change the class .slide to this:

.slide {
position:fixed;

Any questions, just ask.

[Pheobe Black]

THANK YOU! And yeah, it's a mutation of coding that I mashed together a few years ago b/c the plugins back then just werent working for us very well and we've kept it since. I'm more than willing to wrestle with codes, I do it several times a week since my cohorts decide something needed to be fixed and they touch the wrong stuff hahaha. But thank you SOOOOOO MUCH!

[Pheobe Black]

Okay, so I've gotten it installed, the problem I'm having now is I can't get my right sidebar stuff to go into the slider. I wanted it for the right's stuff so those users with smaller screen resolutions would be able to see the stuff that we'd be putting there and I could compress the div I have everything wrapped in. The left sidebar I have in place already expands down, so it would make a major scrolling mess if I added them both into it, and the right one is on a board by board set up so we can put different content per board onto it.

This is my mess of a wrapper:

<!DOCTYPE HTML>

$[tag.html.open]

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>$[title] | $[forum.name]</title>

$[head]

</head>

<body>

{if $[maintenance_mode]}

<div class="maintenance-header">

{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}

</div>

{/if}

       <div style="width:1500px;">

           <div id="navigation-menu" style="height:50px;width:1500px;text-align:center;font-size:16px;position:fixed;_position: absolute;left: 0px;top:0px;z-index:1;">

               <div style="float:left;width:255px;">

                   <table class="idname" style="padding-top:5px;"><tbody><tr><td style="padding-right: 5px;">$[current_user.avatar_small]</td>

                       <td>

                           <p id="welcome">

                               {if !$[current_user.is_member]}

                               Welcome to The Order of Merlin, Muggle.<br>Please $[login_link] or $[register_link].

                               {else}

                               <span>Welcome $[current_user.name].</span>  $[logout_link]

                               {/if}

                           </p>

                       </td>

                       </tr>

                   </table>

               </div>

               <div style="float:left;width:990px;">

                   <a href="/">Home</a> |

                   <a href="/help">Help</a> |

                   <a href="/search">Search</a> |

                   {if $[current_user.is_staff]}<a href="/admin">Admin</a>{if $[current_user.new_reports] > 0}<sup>$[current_user.new_reports]</sup>{/if}{/if} |

                   {if $[current_user.is_member]}<a href="/members">Members</a>{/if} |

                   <a href="/user/$[current_user.id]">Profile</a> {if $[current_user.new_notifications] > 0}<sup>$[current_user.new_notifications]</sup>{/if} |

                   <a href="/bookmarks">Bookmarks</a>{if $[current_user.new_bookmarks] > 0}<sup>$[current_user.new_bookmarks]</sup>{/if} |

                   <a href="/conversations/inbox">Owls</a>{if $[current_user.messages.new] > 0}<sup>$[current_user.messages.new]</sup>{/if} |

                   <a href="$[participated_threads_link.href]">Tags</a>{if $[current_user.has_new_recent_threads] > 0}<sup>$[current_user.has_new_recent_threads]</sup>{/if} |

                   <a href="$[login_link.href]">Login</a> |

                   <a href="$[register_link.href]">Register</a> |

                   <a href="http://hogwartsww123.proboards.com/page/Affiliates">Our Friends</a><br>

                   <div style="float:left;">

                       $[navigation.tree]

                   </div>

               </div>

           </div>

           <div class="sidebar left">

               $[left_sidebar]

           </div>

           <link href='http://fonts.googleapis.com/css?family=Aguafina+Script' rel='stylesheet' type='text/css'>

<div class="slide">

<div class="my_wrapper">

Your coding content here

   <div class="sidebar left">

               $[right_sidebar]

           </div>

</div>

<div id="my_tabbie">Tab Name</div>

</div>

           

           <div id="wrapper">

               <header>

                   <div id="banner-container" role="banner">

                       <h2 id="banner">

                           $[forum.title]

                       </h2>

                   </div>

                   <a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>

                   <a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>

               </header>

               <div style="margin-top:50px;">

                   $[header]

               </div>

               <div id="content" role="main">

{if $[notice]}

<div class="container">

<div class="title-bar"><h2>$[notice.title]</h2></div>

<div class="content pad-all cap-bottom">

$[notice.message]

</div>

</div>

{/if}

$[content]

</div>

$[footer]

</div>

       </div>



{if $[is_mobile_browser]}

<br /><p class="center">Switch to the $[mobile_switch_link].</p>

{/if}

</body>

</html>



The coding for the side bar in question is this:
CSS:
/* Resize forum with CSS, by Chris */

body table tr td table.bordercolor, body table.bordercolor {

   width: 990px;

}

blockquote table.bordercolor, td.windowbg table tr td table.bordercolor, td.windowbg2 table tr td table.bordercolor {

   width: 790px !important;

}



html, body {

   height: 100%;

}

#sidebarr {

width: 255px;

   height:100%;

position: fixed;

_position:absolute;

top: 0;

_top:expression(eval(document.body.scrollTop));

left: 1245px;

bottom: 0;

   overflow:auto;

}

<!--[if IE]>

<style type="text/css">

#sidebar-container { min-height: 100%; overflow: hidden; }

</style>

<![endif]-->


HTML:
Headers:

<!-- BEGIN FLOATING SIDEBAR

By Elli - smangii.proboards.com

You may repost as long as this header remains intact

GLOBAL HEADERS -->

<div id="sidebar-container" >

   <div id="sidebarr" style="margin-top:50px;">

<section class="ac-container">

   <label style="font-size:18px;padding-bottom:5px;"><input name="accordion-1" type="radio" />Guest Information</label>

   <article class="ac-small article-hide">

       <ul>

           <li><a href="/page/Affiliates">Affiliates Page</a></li>

           <li><a href="/board/62">Advertisements</a></li>

           <li><a href="/page/Staff">Meet the Staff</a></li>

       </ul>

   </article>

   <label style="font-size:18px;padding-bottom:5px;">

       <input name="accordion-1" type="radio" />About Us</label>

   <article class="ac-medium">

       <div style="font-size:20px;text-align:center;">$[plugin.settings.date]</div>

       <div style="font-size:12px;height:250px;overflow:auto;padding:5px;text-align:justify;">$[plugin.settings.plot]</div>

       $[plugin.settings.season]<br>

       $[plugin.settings.weather_forecast]<br>

   </article>

   <label style="font-size:18px;padding-bottom:5px;"><a href="http://hogwartsww123.proboards.com/board/269/ads">Want Ads</a></label>

   <div style="font-size:18px;padding-bottom:3px;">Adoptables<br>

       <div style="font-size:10px;">*Indicates account is already made. Ask Admin for more info.</div></div>

   <div style="font-size:12px;height:100px;overflow:auto;padding:5px;text-align:justify;">

       $[plugin.settings.adoptables]

   </div>

   <div style="font-size:18px;padding-bottom:3px;">Canons</div>

   <div style="font-size:12px;height:100px;overflow:auto;padding:5px;text-align:justify;">

       $[plugin.settings.canons]

   </div>

       </section>

   </div>

</div>



<div style="width: 990px;" width="990">



<!-- END FLOATING SIDEBAR

GLOBAL HEADERS -->



FOOTERS:

<!-- BEGIN FLOATING SIDEBAR

GLOBAL FOOTERS -->

</div>

<div style="width:990px;" width="990">

<!-- END FLOATING SIDEBAR -->

It doesn't matter WHAT I do, it won't go into the slider section. I'm not sure if I messed it up or what, but I've repasted the code you gave me as is several times but that right bar's plugin info will NOT go where I want it to.  I'm sorry if I give you a headache, and I REALLY REALLY appreciate you helping me!

[Tumbleweed]

I was just assuming you could take your basic html you added yourself  and put it in what I gave you but it seems it more complicated than that. Looking at the coding you posted there is more to that plugin then just the basics to a side bar. I see additional plugin stuff like :

$[plugin.settings.plot]
$[plugin.settings.season]<br>
$[plugin.settings.weather_forecast]<br>, etc...

Is the above bolded stuff from that side bar plugin or from some other plugin that allows you to add that to your side table? Sorry if that is a stupid question but if if weren't for my confusion on the bolded stuff above, you could just make your own plugin by using what I gave you and then adding your own content. So in other words, create a plugin and under components add my css to the css box and if you want to use the headers/footers option, add the html I gave you to the header (removing the stuff you gave me for the footer) then paste just your own html so it would look something like this with what I gave you in red: (You can see I have it sort of working on this test site except of course the plugin plot, season, etc, called up info isn't showing: houseofglass.proboards.com/ )


<link href='http://fonts.googleapis.com/css?family=Aguafina+Script' rel='stylesheet' type='text/css'>
<div class="slide">
<div class="my_wrapper">

<label style="font-size:18px;padding-bottom:5px;"><input name="accordion-1" type="radio" />Guest Information</label>
<article class="ac-small article-hide">
<ul>
<li><a href="/page/Affiliates">Affiliates Page</a></li>
<li><a href="/board/62">Advertisements</a></li>
<li><a href="/page/Staff">Meet the Staff</a></li>
</ul>
</article>

<label style="font-size:18px;padding-bottom:5px;"><input name="accordion-1" type="radio" />About Us</label>
<article class="ac-medium">
<div style="font-size:20px;text-align:center;">$[plugin.settings.date]</div>
<div style="font-size:12px;height:250px;overflow:auto;padding:5px;text-align:justify;">$[plugin.settings.plot]</div>
$[plugin.settings.season]<br>
$[plugin.settings.weather_forecast]<br>

</article>

<label style="font-size:18px;padding-bottom:5px;"><a href="http://hogwartsww123.proboards.com/board/269/ads">Want Ads</a></label>
<div style="font-size:18px;padding-bottom:3px;">Adoptables<br>
<div style="font-size:10px;">*Indicates account is already made. Ask Admin for more info.</div>
</div>
<div style="font-size:12px;height:100px;overflow:auto;padding:5px;text-align:justify;">
$[plugin.settings.adoptables]
</div>

<div style="font-size:18px;padding-bottom:3px;">Canons</div>
<div style="font-size:12px;height:100px;overflow:auto;padding:5px;text-align:justify;">
$[plugin.settings.canons]
</div>

</div>
<div id="my_tabbie">Tab Name</div>
</div>


Another could be made for the right side but I don't want to mess with that until I know where the plugin things like plot, adoptables, canons, weather, season are coming from, the side bar plugin or something else.

[Pheobe Black]

AH YES! THATS IT! I tried to make it work similar to that, but i guess i was putting stuff in the wrong spot! THANK YOU TUMBLEWEED!!!!! And yes, the stuff that you had in bold was apart of that particular plugin. I have 2 seperate ones for the right and left to make it easier on my co-admin. But thank you so so so so much!!!

[Tumbleweed]

Oct 30, 2016 15:21:13 GMT -8 Pheobe Black said:

AH YES! THATS IT! I tried to make it work similar to that, but i guess i was putting stuff in the wrong spot! THANK YOU TUMBLEWEED!!!!! And yes, the stuff that you had in bold was apart of that particular plugin. I have 2 seperate ones for the right and left to make it easier on my co-admin. But thank you so so so so much!!!

Good deal, I see it working on your test site but it is cut off a bit (too low down) but maybe you are still fiddling with things. So re-reading your post that has the coding you provided, I think I misunderstood and just need clarification. I gave you, as you and I know, a left sided slider but you never did want a right sided slide out but just to put your info from the side bar on the right, into a slider, correct? In other words, in my last post I was thinking you needed a right slider too but I think I just misunderstood.

[Pheobe Black]

Yeah, I just needed a left b/c the way we had it originally was that the whole wrapper and side bars were in a 1500px div, and a few people said that their screen resolutions were too small to see the right side. I'm still fiddling with it, but eventually I'll get it set so that it works on my smaller monitor that I hook up to my computer to test things on. But thank you again!!! it makes it a million times easier on me coding wise too for that particular plugin, since I only have to worry about putting things into a single section rather than how I have been doing it since we converted to v5 way back when hahaha.