jQuery Snippet – setting height based on another div height
This still represents a tutorial rather then a snippet because I wanted to introduce you to a situation in real life. For example if you have an old client with whom you have a good relationship. I personally will skip creating PSD designs, when my old client would tell me:
Do you know the website something.com, I want the same kind!
In such a situation, certainly most of us would say cool! So we make a website ie HTML template. Next is converting html to eg. WordPress. We present the work to the client, and he says:
You know, I did say that I want the same, but can we change some colors?
This introductory story is very possible, it is also possible to encounter the same problem if you work for eg. beautification of existing websites, and the problem is as follows.
The problem
So, after the change of color in the template for wordpress problem is that if there is not enough content eg blog posts and background color occupies that space. I made a simple HTML markup that illustrates the problem (blue color after the last post).
Of course you can remodel HTML markup or fix this with CSS, but this is a jQuery snippet and we’ll do it with jQuery because it’s a much faster way and sometimes you just need more time. The next thing we need to do is to load jQuery and create custom.js file and include it also by adding in the head:
<head> <title>Website Title</title> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="Marko Dimitrijevic"> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="custom.js"></script> </head>
You can use the jQuery’s CDN like above or download it from here.
Solution
So the solution would be to measure the height of the element in which the posts are, compare it with the height of sidebar and add the difference in height to container of posts element. In order to determine which elements are open chrome developer tools and find them (See this video if you don’t know how to use it).
Posts container that we are going to measure is:
<div class="blog padding bg-white">
Sidebar container that we are going to measure is:
<aside class="padding bg-yellow">
Although we have a classes of elements in which we can hook, we are going to add to them more classes measureheight and strechheight for two reasons. Firstly, it is much easier for you to understand. Secondly, it is much better to have this specific classes in the code because when you or someone else opens the code after some time and see these classes, their special application will be immediately understandable. Now change these two elements in this way:
<div class="blog padding bg-white strechheight">
and
<aside class="padding bg-yellow measureheight">
Finally open custom.js file and add the following code:
jQuery(document).ready(function(){
if ( jQuery('.strechheight').length && jQuery('.strechheight').height() < jQuery('.measureheight').height() ) {
var rightHeight = jQuery('.measureheight').height();
var leftHeight = jQuery('.strechheight').height();
var heightToAdd = leftHeight + (rightHeight - leftHeight);
jQuery('.strechheight').css("height", heightToAdd );
}
});
This code is self-explanatory. First, we have an if statement with two conditions. Function is executed only if both conditions are fulfilled. The first condition is that element exists, a second condition is that its height is less than the height of sidebar. The next thing we do is to create a variables with values and adding new value to the height of the element with class strechheight. That’s it, you can see live preview of this jQuery snippet in action or download complete material.
Leave a Reply