Get the Visible Height of a Div with Jquery

Get the visible height of a div with jQuery

Here is a quick and dirty concept. It basically compares the offset().top of the element to the top of the window, and the offset().top + height() to the bottom of the window:

function getVisible() {
  var $el = $('#foo'),
    scrollTop = $(this).scrollTop(),
    scrollBot = scrollTop + $(this).height(),
    elTop = $el.offset().top,
    elBottom = elTop + $el.outerHeight(),
    visibleTop = elTop < scrollTop ? scrollTop : elTop,
    visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
  $('#notification').text(`Visible height of div: ${visibleBottom - visibleTop}px`);
}

$(window).on('scroll resize', getVisible).trigger('scroll');

html,
body {
  margin: 100px 0;
}

#foo {
  height: 1000px;
  background-color: #C00;
  width: 200px;
  margin: 0 auto;
}

#notification {
  position: fixed;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="foo"></div>
<div id="notification"></div>

Getting height of a div with display:none using height() method of jquery

jQuery.height() and .width() do return the computed style of your element, not its actual height and width.

That an element has its display set to none will only change the fact that relative units can't be calculated, so you'd get % values returned as percentage.

Other than that, there is no difference, since it's only the computed styles and not the actual size of your element.

Now jQuery will try its best to convert that percent value to an actual px number, that is, it will return the computed size of the parent per the ratio set, but this, only to one level depth.

console.log( 'display-none $height', $('#display-none').height() );console.log( 'display-block $height', $('#display-block').height() );console.log( 'display-none-deep $height', $('#display-none-deep').height() );console.log( 'display-none $width', $('#display-none').width() );console.log( 'display-block $width', $('#display-block').width() );console.log( 'display-none computed height', getComputedStyle($('#display-none')[0] ).height );console.log( 'display-block computed height', getComputedStyle($('#display-block')[0] ).height );console.log( 'display-block real height', $('#display-block')[0].getBoundingClientRect().height );

div[id^="display"] {   height: 50%;  width: 200px;  transform-origin: top left;  transform: scale(1.5,1.5); /* won't change anything for computed values */}#display-none {  display: none;}body{ height: 100vh;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display-none">  <div id="display-none-deep"></div>  hidden</div><div id="display-block">visible</div>

Get height of non-overflowed portion of div

As basic algorithm this could work:

var offset = 0;
var node = document.getElementById("inner");
while (node.offsetParent && node.offsetParent.id != "wrapper")
{
    offset += node.offsetTop;
    node = node.offsetParent;
}
var visible = node.offsetHeight - offset;

But if you're doing these kinds of things, maybe you already use jQuery, which might be of service with its .height() and .offset() functions:

$("#wrapper").height()-
$("#inner").offset()['top']+
$("#wrapper").offset()['top'];  

jQuery get the rendered height of an element?

It should just be

$('#someDiv').height();

with jQuery. This retrieves the height of the first item in the wrapped set as a number.

Trying to use

.style.height

only works if you have set the property in the first place. Not very useful!

Get height of div with no height set in css

jQuery .height will return you the height of the element. It doesn't need CSS definition as it determines the computed height.

DEMO

You can use .height(), .innerHeight() or outerHeight() based on what you need.

.height() - returns the height of element excludes padding, border and margin.

.innerHeight() - returns the height of element includes padding but excludes border and margin.

.outerHeight() - returns the height of the div including border but excludes margin.

.outerHeight(true) - returns the height of the div including margin.

Check below code snippet for live demo. :)

$(function() {  var $heightTest = $('#heightTest');  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; "></div>

Find visible height of div element while scrolling

Try

var $win = $(window);
var $footer = $("#footer");
$(window).scroll(function(){
    var windowHeight = $win.height();
    var footerTop = $footer.offset().top - $win.scrollTop();
    var visibleHeight = Math.min(windowHeight, footerTop) - 80;
    console.log(windowHeight +", " + footerTop + ", " + visibleHeight);
});

Here is the updated jsfiddle.

---

The logic is simple.

1. Using window's height before footer showing.
2. Using footer's top after footer became visible.
3. [1] or [2] - header's height = your answer.

Jquery getting a hidden element's height

You can show the element get the height and then hide it, visually you will not see any difference.

var height = $('elementSelector').show().height();
$('elementSelector').hide();
if(height != <<HeightToCompare>>){
    //Code here
}
//Finally make it visible
$('elementSelector').show();

Demo

How to get height of a div with overflow hidden?

Use scrollHeight instead (a DOM element property):

$(selector)[0].scrollHeight

so in your example:

var height= $("#container")[0].scrollHeight;

or (as Vohuman points out):

var height= $("#container").prop("scrollHeight");

---

Related Topics