Home Make things same height | Javascript | JQuery
There’s a Jquery plugin that I pull into every WordPress site I build because I work with graphic designers/UX designers, and they always present the same problem. Here’s my lovely design, and in it there’s a grid of posts, or a blog archive or something. And it looks lovely:
A lovely layout, yesterday… But sure once the client gets their hands on it, that first title on item one will be three lines long, and the whole thing will look bonkers
An unlovely layout So what’s the solution? You could use Flex or Grid in CSS, but my issue is almost always the varying title lengths. It’s something that clients really zone in on.
Anyway, the plugin I use for this is called Jquery Match Height – simply:
Download or CDN to the plugin and link it on your page after JQuery. If you are using wordpress, enqueue that sucker.
Give the elements you want to match a class. Let’s say “matchy”. So the titles in the blog posts will all be something like <h3 class=”title matchy”>This is the long title</h3>
Now, call the function after everything on the page loads – so, in your document ready (or in a script tag on your page right before </body>):
//my matchy function
function matchy(){
$(".matchy").matchHeight();
}
//document is ready (vanilla js):
document.addEventListener("DOMContentLoaded", function() {
//if "matchy" is on the page, run the function
if($('.matchy').length >0){
matchy();
}
});
At least it’s not your fault There you go. At least it will highlight to the designer or client, that the issue is clearly the difference in title lengths, and they might have a subsequent editing session to clean it up.
Hot bonus – why not use this a few times on the page for different elements, using different classes:
function matchy(){
$(".matchy").matchHeight();
$(".matchy_a").matchHeight();
$(".matchy_b").matchHeight();
$(".matchy_c").matchHeight();
$(".matchy_d").matchHeight();
}
Then when calling the function, change to:
if( ($('.matchy').length >0) || ($('.matchy_a').length >0) || ($('.matchy_b').length >0) || ($('.matchy_c').length >0) || ($('.matchy_d').length >0)) {
matchy();
}
Post navigation
Need rapid website development:
For smaller projects at high speed
Adding script tag embed to Gatsby component
Read More
Get more than 100 queries in GraphQL (I felt stupid)
Read More
Animate on Scroll (AOS) into Nuxt js
Read More
WordPress Super-admin hack
Read More
Add content or ACF field under thumbnail/image gallery in Woocommerce
Read More
Tags
Categories
Is it urgent?
Donate to Cork Simon
