CODEWITHSUNDEEP
javascriptjqueryhtml
user2504767
user2504767

Reputation:

How to calculate the size / the space between the top of current display resolution and the bottom position of a td element in HTML DOM?

How can i calculate with JQuery Framework or Java Script the the size / the space between the top of current display resolution and the bottom position of a td element in HTML DOM?

A have a flexible display resolution a a specific html tag in my html DOM (in the current case a "td" tag).

Now it is important for my to calculate the size from top of the current display resolution to the htmls element.

How can i calculate this?

Upvotes: 1

Views: 142

Answers (2)

rjreed
rjreed

Reputation: 236

How about using .getBoundingClientRect?

var div = document.getElementById('test'),
  rect = div.getBoundingClientRect();
console.log(rect.bottom);

JS Fiddle Demo Using a Table

In the demo I'm just printing out the bottom position inside the td elements. If you need to re-set it on window resize, you could just use a simple event listener that kicks off the function (i.e. window.addEventListener('resize', someFunction)...).

Beware, though - don't use client rect or offset functions more than you have to (not tied to frequent events and such) - they are expensive functions for your layout.

Upvotes: 1

ghosty89
ghosty89

Reputation: 86

maybe something like this?

var elementOffset = $('#element').offset().top+$('#element').height();

offset().top is the distance in px between the top of the window and the top of an element. In your case you want the distance between the top of the window and the bottom of an element, so you have to add the height of that element to the offset().top.

Upvotes: 0

Related Questions