How to call show or hide operation based on div size when resizing browser

Question

I am creating a final container for an author page on a book publishing website. Some authors have more summary content, while others have less content. I want to enable / disable the display of the over / under button dynamically when the height of the div container crosses the cut height (180 pixels). Thus, dynamic control of the height of the container div (180px and the original height) is obtained. I need a piece of code that works great in all browsers.

I have the 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 [e-mail] 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 remains in absolute position. If you press the button more, then (less) should go down, below this should be the footer. Is it possible to enable / disable the dynamic show more / less button while reducing / expanding the browser?

Answer 1

Set max-height to 100% to show more, and set max-height to 180px when it shows less.

Updated JSFiddle

Answer 2

You do not need to show overflow , but simply increase 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 add-ons so you can see the text a little easier.

Updated fiddle

This is really a different question, but using innerHeight instead of height , you may find that the text is full in words when the window is resized:

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

I also positioned the smaller / larger button at the bottom of the info window to overlay any text that could be added in addition:

 .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; } 

The full code is in this fiddle

Answer 3

You are not removing the maximum height from CSS, and that is what causes the problem. Here you can do two things:

• You can either set max-height to 100%

• or you can set max-height in another css class and add and remove this class in dynamic info

Create a css style:

 .restrict{ max-height: 180px; } 

When clicked again:

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

When you press the less button:

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

See my forked fiddle with changes:

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

Answer 4

Yes, you can enable or disable the buttons when resizing the browser.

You will need to create your javascript as follows:

 // 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 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(); 

Thus, when the browser size is changed, the functionality of the show / hide button will be recalled.

PS - here is an example of OPs: http://jsfiddle.net/9dgs6432/20/ - pay attention to the contents of the buttonChecker() function and the logic to hide how and also the show.