Justin Tadlock

<p>The Sliding Panel plugin creates a new sidebar for your site that allows you to add widgets.  These widgets appear within a responsive sliding panel at the top of your site on the front end.</p>
<h3>Features</h3>
<ul>
<li>It’s a jQuery-powered sliding panel.  That’s a feature in-and-of itself, right?</li>
<li>Uses widgets, so you can add pretty much anything you can add to any other sidebar.</li>
<li>Uses the WordPress-packaged jQuery.</li>
<li>Will automatically display with any correctly-coded theme.</li>
<li>Supports HTML5 and Schema.org microdata.</li>
<li>It’s responsive, so it’ll look good on any device.</li>
</ul>
<h3>Professional Support</h3>
<p>If you need professional plugin support from me, the plugin author, you can access the support forums at <a href="http://themehybrid.com/support" rel="nofollow ugc">Theme Hybrid</a>, which is a professional WordPress help/support site where I handle support for all my plugins and themes for a community of 40,000+ users (and growing).</p>
<h3>Plugin Development</h3>
<p>If you’re a theme author, plugin author, or just a code hobbyist, you can follow the development of this plugin on it’s <a href="https://github.com/justintadlock/sliding-panel" rel="nofollow ugc">GitHub repository</a>.</p>
<h3>Donations</h3>
<p>Yes, I do accept donations.  If you want to buy me a beer or whatever, you can do so from my <a href="http://themehybrid.com/donate" rel="nofollow ugc">donations page</a>.  I appreciate all donations, no matter the size.  Further development of this plugin is not contingent on donations, but they are always a nice incentive.</p>


Sliding Panel

Adds a responsive sliding panel to the top of your WordPress-powered site.

damiarita

<p>Sometimes we want to display to boxes side by side and they have to look the same. CSS doesn’t always help.</p>
<p>This plugin will use jQuery to detect the boxes you want and force them all to have the same size. The size is uses is the size of the tallest box.</p>
<p>If you have a some parts of your content that need to have the same height, simply wrap them with the <code>[sameheight/]</code> shortcode like this:<br />
    [sameheight]<br />
      This is a short text<br />
    [/sameheight]<br />
    [sameheight]<br />
      This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text<br />
    [/sameheight]</p>
<p>When the html renders on your screen, both parts content parts will look equally height. This is very useful if they are floating next to each other and they have a background.</p>
<h4>What if I have different sizes in the same page?</h4>
<p>You can group shortcodes like this:<br />
    [sameheight group=”1″]<br />
      This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text<br />
    [/sameheight]<br />
    [sameheight group=”1″]<br />
      This is a short text<br />
    [/sameheight]<br />
    [sameheight group=”2″]<br />
      This is another short text<br />
    [/sameheight]<br />
    [sameheight group=”2″]<br />
      This text is long, but not quite as long as the previous one. So, I don’t want these to parts to look as long. But they should still look the same.<br />
    [/sameheight]</p>
<h4>What if I have a responsive site and I only want the same height to apply in wide-screen, side-by-side configurations?</h4>
<p>You can add a breakpoint like this.<br />
    [sameheight breakpoint=”xs” ] (You could even use no breakpoint at all)<br />
      This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text<br />
    [/sameheight]<br />
    [sameheight breakpoint=”xs” ] (You could even use no breakpoint at all)<br />
      This text always has to use the same height than the previous one.<br />
    [/sameheight]<br />
    [sameheight breakpoint=”md”]<br />
        This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text<br />
    [/sameheight]<br />
    [sameheight breakpoint=”md”]<br />
      This text only has to use the same height when it is next to the previous, but not when it is underneath on smarphones.<br />
    [/sameheight]</p>
<p>You have these breakpoints (those familiar with bootstrap know them):</p>
<ul>
<li>“xs” forces same height for all window widths (extra small window – smartphone). Alternatively, you can use no breakpoint</li>
<li>“sm” forces same height for window widths > 768px (small window – small tablet)</li>
<li>“md” forces same height for window widths > 992px (medium window – table or small desktop)</li>
<li>“lg” forces same height for window widths > 1200px (large window – desktop)</li>
</ul>
<p>Names and widths are based on bootstrap.</p>
<p>Please, note that shortcodes with different “breakpoint” will be in different groups regardless of the “group” setting. You can still use “group” to separate to groups with the same “breakpoint”.</p>
<h4>I have some styles in CSS for my classes. How can I apply classes to the content?</h4>
<p>Easy:<br />
    [sameheight additional_classes=”my-class1 my-classA”]<br />
      This is a short text<br />
    [/sameheight additional_classes=”my-class2 my-classB”]<br />
    [sameheight]<br />
      This is a very, very, very, very, very, very long text<br />
    [/sameheight]</p>
<h4>Can I use all the possibilities together?</h4>
<p>Sure:<br />
    [sameheight group=”1″ breakpoint=”md” additional_classes=”my-class1 my-classA” /] will work.</p>
<h4>Do I need to use the shortcode?</h4>
<p>No! If you are editing your html, you can put the right properties in it. That’s all tha shortcode does. Make sure you add the class ‘same-height’. If you use a break point, add it with a hyphen (-) like this: ‘same-height-xs’, ‘same-height-sm’, ‘same-height-md’, or ‘same-height-lg’. The Javascript is looking for those classes to identify the html elements it has to work on.<br />
If you are grouping boxes, use the ‘same-height-group’ property. Like <code><div class="same-height" same-height-group="1" ></code></p>


Same Height

The plugin is going to put an extra JS file on your  page which will find all the entities that were wrapped with the shortcode and force them to be as heigh as the heighest



Does exactly what it says

Force different parts of your content to the same height. Very useful if you want to present to boxes side by side. Responsive and bootstrap-friendly.

Sliding Panel vs Same Height