Documentation › Equal Content and Sidebar Height

Equal Content and Sidebar Height

Something that has come up many times in support is how to get the height of your content area to match the height of your sidebar.  This tutorial will go over how to do that using jQuery.  Guy B came up with this solution in the forum and it works wonderfully.

Step One: Assign classes to your blocks

First things first, assuming you have a content block and then a widget block, open up the block options for each one and give each one a unique custom class.  I’m giving my widget block a custom class of main-sidebar and my content block a custom class of main-content.

Here’s what the custom class for my widget block looks like

block-custom-class

Step 2: Add the jQuery needed

Copy and paste the following script into WordPress » Headway » Options » Scripts/Analytics » Footer Scripts

headway-scripts

<script>
    (function ($) {
        var maxHeight = 0;

        $(".main-sidebar").each(function () {
            if ($(this).height() > maxHeight) {
                maxHeight = $(this).height();
            }
        });

        $(".main-content").height(maxHeight);
    })(jQuery);
</script>

Lastly, in that code where you see main-sidebar change that to the class you added for whichever block is going to have the largest/longest height.   In my example, this is the sidebar.

Where you see main-content, change that to the class you added to the block that will be the shorter block.

You could also use block IDs but they are harder to find (you need to use browser developer tools or extensions/addons like Firebug to do so).

Save your settings.

Done!

That was easy and relatively painless, right?

Caveat:  jQuery needs to be loaded on the page(s) you want to use this on.  If not, you will need to enqueue jQuery too.

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress