How do I get the height of a div container via jQuery?
I am developing a web page for the authors section for a book publishing site and am working on a show more / show less button. There are two media divs, one for the author's image (left) and their resume (right). I want to enable / disable the show more / show less button depending on the height of the pivot content. I want to enable the Show More / Less button only when the height of the pivot content is greater than the height of the fixed height image (180px).
Referrals: http://jsfiddle.net/thebabydino/U7Cyk/
NOTE. Media, media left and media body are bootstrap classes.
HTML code:
<div id = "author-page">
<div>
<h3>
Chetan Bhagat
</h3>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="http://img01.ibnlive.in/ibnlive/uploads/2014/10/chetan_bhagat_151110.jpg"/>
</div>
<div class = "media-body">
<div class="info-wrapper">
<a href="#" class="more">(more)</a>
<a href="#" class="less">(less)</a>
<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>
</div>
</div>
</div>
</div>
CSS:
.info-wrapper {
height: auto;
position: relative;
width: auto;
padding: 0 0 2.5em 0;
}
.info {
max-height: 180px;
height: auto;
width: auto;
overflow: scroll;
position: relative;
}
.info:after, .aftershadow {
bottom: 0;
width: auto;
height: auto;
}
.info-wrapper a {
left: 50%;
bottom: 1.5em;
height: 1.25em;
margin: -.1em 0 .35em -4.5em;
position: absolute;
font: 700 .67em/1.25em Arial;
text-align: center;
text-decoration: underline;
cursor: pointer;
}
.info-wrapper a:focus { outline: none; }
.info-wrapper .less { display: none; }
.info-wrapper .more:focus ~ .info,
.info-wrapper .more:active ~ .info {
max-height: none;
}
.info-wrapper .more:focus {
display: none;
}
.info-wrapper .more:focus + .less {
display: block;
}
+3
source to share
4 answers
Hide overflow and identify programmatically
if scrollHeight is higher than div height then make "larger" visible
var outerHeight = $(".info").outerHeight();
if($(".info")[0].scrollHeight > $(".info").height()) {
$("a.more").show();
}
$("a.more").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "visible"});
$(".info").css({"max-height": "inherit"});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden"});
$(".info").css({"max-height": outerHeight + "px"});
$("a.more").show();
$("a.less").hide();
return false;
});
here the outerHeight will reach your maximum height when the content overflows
For this you can put @media queries for different screen sizes and use max-height accordingly
Check it out http://jsfiddle.net/ZigmaEmpire/9dgs6432/11
+2
source to share
I asked others for this problem too and I got a solution. :-) Thank you for Nanang . And that's exactly what I wanted,
http://jsfiddle.net/rraagghhu/9dgs6432/15/
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", 'maxHeight': '100%'});
$("a.less").show();
$("a.more").hide();
return false;
});
$("a.less").click(function(e){
e.preventDefault();
$(".info").css({"overflow": "hidden", 'maxHeight': '180px'});
$("a.more").show();
$("a.less").hide();
return false;
});
$(window).resize(function() {
var hg = $('.info').height();
if (hg && hg >= 180) {
$('.info').css({ 'maxHeight': 180 });
$('a.more').show();
} else {
$('.info').css({ 'maxHeight': '100%' });
$('a.more').hide();
}
});
Now expand and erase the Result column in the JSFiddle and see what happens. Happy game. :-)
+1
source to share