Ensure certain elements on a page display in matching heights throughout.

There are some new CSS tricks coming out that will allow for this to be done natively, but until then, here’s a way to make sure that all elements in a page, say gallery thumbnails or excerpts from posts, all display their full texts and are all sized the same.  Without using this fix after page load, some elements may display taller than others, and if these elements are floating in the page, they may definitely not display in a nice even grid as intended.same-height-of-elements-in-pageWith a few lines of jQuery (make sure you load the newest version via CDN) you just simply assign the elements you want to have the same height with the same unique class, like “same-height-group-1” or something short you can remember.  Then, change out the “.class-to-resize” in the script below with the actual class you assigned the elements.  From now on, after a page loads, all the elements assigned that same class will all have the same height, and you will never have to worry about those “sticky” floating blocks that ruin the whole look of your page.

Aaron Belchamber has written 243 articles

One thought on “Ensure certain elements on a page display in matching heights throughout.

  1. Aaron Belchamber says:

    check checkbox with specific value ( using jQuery )

    To check/uncheck checkbox with specific value using jQuery.

    To check checkbox with id lead with “chk_hobby_” and has value = 7 :
    ?
    1

    $(“#data-form input[id^=’chk_hobby_’][value=7]”).prop(‘checked’,true);

    To uncheck checkbox with id lead with “chk_hobby_” and has value = 2 :
    ?
    1

    $(“#data-form input[id^=’chk_hobby_’][value=2]”).prop(‘checked’,false);

    HTML Sample :
    ?
    1
    2
    3
    4
    5

    Hobby
    Swimming
    Watching Movie
    Bowling

Leave a Reply

Your email address will not be published. Required fields are marked *