add/remove class depending on element height on the fly

Question

I have an element that needs to change height depending on the height of its child p tag:

<div id="eventpg" class="bg-pink linkbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</p>
</div>

I've achived the desired change by adding a class if the paragraph is over a certain height:

var divheight = $("#eventpg p").height();
if ( divheight > 173) {
    $("#eventpg").addClass("height535");
}

Which adds this class this class:

. height535{height:535px;}

This works fine in most instances but if the user rotates their device from portrait to landscape the added class still remains and the page has to be reloaded to remove it.

How do I achieve the height change 'on the fly' as it were? So if the browser window changes causing the paragraph to change height the container changes to reflect this?

Thanks

Wrap your statement in a function, then fire that function on window.resize. — James, Sep 14 '16 at 14:55
You’ll need a handler function for the relevant events (resize and orientationchange), and in there perform your check again. (Whether using fixed heights is a good solution at all, depends. For example if the user changes the font-size, this might easily break.) — CBroe, Sep 14 '16 at 14:55

score 1 · Answer 1 · answered Sep 14 '16 at 14:56

1

You should be able to run the function on load and resize:

$(window).on('load resize', function() {
   var divheight = $("#eventpg p").height();
   if ( divheight > 173) {
       $("#eventpg").addClass("height535");
   }
})'

answered Sep 14 '16 at 14:56

Derek Story

9,518
1
24
34

1

Load event doesn't fired in `.on()` – Mohammad Sep 14 '16 at 14:59
It does. Its just binding events together: http://stackoverflow.com/questions/15665231/run-jquery-function-on-window-events-load-resize-and-scroll – Derek Story Sep 14 '16 at 15:00
1

That seems to be a jsfiddle issue. See codepen: http://codepen.io/anon/pen/jrqqvm – Derek Story Sep 14 '16 at 15:05
Thanks for your help Derek Story. – bigdave Sep 14 '16 at 15:10
1

@Mohammad The reason it didn't work for you is because jsfiddle automatically wraps everything in an onload event. You can tell it not to wrap in the javascript options. Works here: https://jsfiddle.net/f28v37cy/1/ – Derek Story Sep 14 '16 at 15:10

The One and Only ChemistryBlob · Answer 2 · 2016-09-14T15:03:54.590

0

You can listen for a resize event, adding or removing the class as necessary:

var heightThreshold = 173; // controlling the height globally may be easier

$(window).resize(function () {

    var el        = $("#eventpg"),
        divheight = el.find("p").height();

    if ( divheight > heightThreshold ) {
        el.addClass("height535");
    } else {
        el.removeClass("height535");
    }

});

or do something similar with e.g. jQuery Mobile's orientationchange event - see here

edited Sep 14 '16 at 15:03

answered Sep 14 '16 at 14:56

The One and Only ChemistryBlob

7,864
10
36
69

Thanks for your help The One and Only ChemistryBlob. – bigdave Sep 14 '16 at 15:10
No prob...glad I could help out – The One and Only ChemistryBlob Sep 14 '16 at 15:11

score 0 · Answer 3 · answered Sep 14 '16 at 15:09

Thanks for your help guys. using a combo of The One and Only ChemistryBlob's and Derek Story's answers, the follwoing has worked successfully:

$(window).on('load resize', function() {
    var divheight = $("#eventpg p").height();
    if ( divheight > 173) {
        $("#eventpg").addClass("height535");
    } else {
        $("#eventpg").removeClass("height535");
    }
});

add/remove class depending on element height on the fly

3 Answers3