How to trigger a show or hide operation based on div size when the browser is resized

Question

I am designing a summary container for the author page in a book publishing website. Some authors have more summary content while others have less content. I want to enable/ disable show more/less button dynamically when the height of the div container crosses a cutoff height(180px). So, it turns out to control the height of the div container dynamically (180px and original height). I need a piece of code which works perfectly in all browsers.

I have got a code implemented here:

http://jsfiddle.net/rraagghhu/9dgs6432/3/

HTML :

<div class = "container">
<div class="info-wrapper">
<div class="info">
Chetan Bhagat is the author of six blockbuster books.These include five novels—Five Point Someone (2004), One Night @ the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009), 
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release. 
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info@chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (@chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage).
</div>
<a href="#" class="more">(more)</a>
<a href="#" class="less">(less)</a>
</div>

<div class = "footer"> THIS IS FOOTER </div>
</div>

CSS:

.container{
    background-color: yellow;
 }
.footer{
    background-color: yellow;
 }
 .info-wrapper {
    height: auto;
    position: relative;
    width: auto;
    padding: 0 0 2.5em 0; 
    background-color: red;
 } 
 .info {

    max-height: 180px;
    height: auto;
    width: auto;
    overflow: hidden;
    position: relative; 
    text-align: justify;
}
.info:after, .aftershadow {
    bottom: 0;
    width: auto;
    height: auto;
}

.info-wrapper a {
    left: 50%;
    position: relative;
    font: 700 .67em/1.25em Arial;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}
.less { height: auto; display: none; }
.more { display: none; } 

Jquery:

if($(".info")[0].scrollHeight > $(".info").height()) {
        $("a.more").show();
    }

    $("a.more").click(function(e){
        e.preventDefault();
        $(".info").css({"overflow": "visible"});
        $("a.less").show();
        $("a.more").hide();
        return false;
    });

    $("a.less").click(function(e){
        e.preventDefault();
        $(".info").css({"overflow": "hidden"});
        $("a.more").show();
        $("a.less").hide();
        return false;
    });

As you can see, the footer stays at the absolute position. If the more button is clicked, the (less) should come down, below that should come the footer. Is it possible to enable/disable the show more/less button dynamically when the browser is shrunk/expanded?

Answer 1

Yes you can enable and disable the buttons as the browser is resized.

You'll need to build your javascript like this:

// make your function re-usable
var buttonChecker = function() {
    // show / hide buttons logic here
}

// bind the function to the resize event (note, no parenthesis for calling the function here, it's just a reference passed in that is then called when the resize event is triggered)
$(window).on('resize', buttonChecker);

// call your function on page load so the buttons are correctly shown then (note, parenthesis are used, function is called
buttonChecker();

This way when the browser is resized the show / hide button functionality will be re-called.

PS - here is the OPs example fixed: http://jsfiddle.net/9dgs6432/20/ - note the contents of the buttonChecker() function and the logic to hide as well as show.

Answer 2

You don't need the overflow to ever be shown, instead just increase the max-height to 100%.

$("a.more").click(function(e){
    e.preventDefault();
    $(".info").css({"max-height": "100%"});
    $("a.less").show();
    $("a.more").hide();
    return false;
});

I also added in some padding so you can see the text a bit easier.

Updated fiddle

This is really another question, but using innerHeight instead of height you can detect if the text is overflowing with the padding on window resize:

$(window).resize(function(){
    if($(".info")[0].scrollHeight > $(".info").innerHeight()) {
        $("a.more").show();
    }
});

I also positioned the less/more button absolutely at the bottom of the info box to overlay any text that might extend into the padding:

.info-wrapper a {
        left: 0; bottom: 0;
        width: 100%;
        background: red;
        position: absolute;
        font: 700 .67em/1.25em Arial;
        text-align: center;
        text-decoration: underline;
        cursor: pointer;
        line-height: 20px;
}

Full code is in this fiddle

Answer 3

Set the max-height to 100% for show more and set the max-height to 180px when show less.

Updated JSFiddle

Answer 4

You are not removing the max-height from the CSS and that is what is causing the issue. You can do two things here:

1. Either you can set the max-height to 100%

2. or, you can set the max-height in another css class and add and remove that class to the info div dynamically

Create a css style:

.restrict{
    max-height: 180px;
}

On click of more:

$(".info").removeClass('restrict');

On click of less:

$(".info").addClass('restrict');

See my forked fiddle with the changes:

https://jsfiddle.net/jdnf5vka/4/