Develop Reference

How to getBoundingClientRect from a hidden element? (doesn't work on IE)

I've found a way to getBoundingClientRect from a hidden element: Make its display style to initial so the browser can calculate properly. Then hide instantly the element so it never shows up to the user.
But it doesn't work on IE. It always returns 0.
How can I make this work on IE?
var element = document.querySelector('#foo');
console.log('Element is hidden', element.getBoundingClientRect());
element.style.display = 'initial';
console.log('Element shows for little time', element.getBoundingClientRect());
element.style.display = 'none';
<div id="foo" style="display: none;">Guess my size, I'm hidden !</div>

Sadly, IE doesn't support initial value (mdn). So the assignment does nothing, and the element remains hidden, that's why you get 0 as a resulting height.
But even if it did, it wouldn't have worked the way you expected: display: initial sets the universal initial value for display for all the affected elements - that's inline both for divs and spans. Here's little proof-of-concept of this behaviour.
Instead you have to cache the original value of display by your own code before hiding it. Actually, that's exactly what jQuery and other popular frameworks do with their implementation of .hide():
The matched elements will be hidden immediately, with no animation.
This is roughly equivalent to calling .css( "display", "none" ),
except that the value of the display property is saved in jQuery's
data cache so that display can later be restored to its initial value.
If an element has a display value of inline and is hidden then shown,
it will once again be displayed inline.

This might answer the question indirectly - another option if you need to getBoundingClientRect() for a hidden element is to hide it in a different way (other than display:none). Setting color and/or background-color to transparent, for example.

How to find a function that triggers every second?

http://nylbcsbc.org/t.html
Using dev tools, I was trying to modify a tag's property, as shown in the picture below:
I was trying to remove the whole style attribute of the video tag, but whenever I remove it, it will come back.
I guess this is due to some javascript function that is being executed repeatedly. My question is, how do I find this function and turn it off, so that I can modify the attributes as I do in other normal pages?

To find the function that changes element's attribute:
Assuming you are using google-chrome: right click on the node in Elements panel, in the opened context menu select Break on... -> Attribute Modification; When it breaks, use call stack window to find the cause.
UPDATE:
If you can't control the code, like in your case with jwplayer, instead of trying to remove style attribute, try to override each CSS rule defined there with his initial value:
<style type="text/css">
video {
-webkit-transform: initial!important;
transform: initial!important;
width: initial!important;
height: initial!important;
}
</style>

Dynamically hiding elements in a list without the hidden elements occupying empty space on the page

I need to hide elements based on what a user does. if he presses "a only", I can say something like
for(i=0;i<document.getElementsByClassName("b").length;i++){
document.getElementsByClassName("b")[i].style.visibility="hidden";
}
but this will leave empty spaces between elements in the list (the invisible elements still occupy space), which looks bad, is there a better way this can be done.

try style.display="none"
Using visibilty="hidden", the elements will still take up their calculated space on the page.
You may also consider using jQUery. It makes tasks like these incredibly simple.

Yep. You are setting the visibility CSS property to hidden. This stops the element from being displayed, but it still occupies space.
You want to set the display property to be none. This removes it from being displayed, and stops it occupying space - effectively removing it from the document, at least as far as displaying it is concerned.
for(i=0;i<document.getElementsByClassName("b").length;i++){
document.getElementsByClassName("b")[i].style.display = "none";
}

Use display: none instead of visiblity: hidden. The visibility property only hides the element; the display property actually removes the element from the layout.

For visibility:hidden, the javascript parser will parse the elements css properties and hides, it actually exist on dom, but user cannot see.
For display: none, when javascript parser finds the element with display, it just ignore the element and it move ahead. So you have to user display: none;

Difference betweet style.visibility and style.display [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What is the difference between visibility:hidden and display:none
I am looking at examples to hide/show div tags using JavaScript.
In some examples, they use visibility and in some display.
e.g.
document.getElementById("divhotel").style.visibility = "hidden";
vs
document.getElementById("divhotel").style.display = "none";
What is the difference between the two?

When you set visibility to hidden, the element is not shown but still takes up the same space on the page.
When you get display to none, the element is neither shown nor does it take up any space on the page.
More often than not I find myself using display, but it depends on what your scenario demands.

visibility is how the element is rendered, the block where it exists is still laid out regardless of the value. Items might be pushed around because of that. display is how it is rendered to the page: block is div type elements, with a full box models; none element isn't rendered to the page at all; inline is an inline element such as a span or anchor tag.

Ah, beloved Google.
"style.visiblity makes the element visible or hidden, it is still rendered and takes up space on the page even if you can't see it. If you set style.display to "none" the markup is not processed and does not take up space on the page."

Javascript clientHeight and alternatives

I am currently trying to modify a Javascript function that "slides in" a <div>. The script as it is requires you to define the height of the div, so it is mostly useless in dynamically filled <div>s. I found some text on the clientHeight property in javascript, but it would appear that it doesn't support <div>s with display set to none (which is the method used to slide the div in). That makes sense, as the height of that div in the client window is nothing.
Basically I was wondering what other methods you all know of, or if there's a way to get around the clientHeight = 0 when display: none.
Thanks!
Oh, and here's the function I'm using:
function getDivHeight(objName) {
return boxHeight = document.getElementById(objName).clientHeight;
}

A simple solution is to set it's visibility to "hidden" and it's display to "block" and measure it. However, some modern browsers will manage to update the page layout during this short time and you will get a nasty flicker. The easiest way to overcome this is to place the element in an absolutely positioned container with overflow set to "hidden".

I've had luck cloning the element, moving it offscreen, then displaying it to get the client height:
var original = document.getElementById(some_id);
var new_item = original.cloneNode(true);
document.body.appendChild(new_item); // item already hidden, so it won't show yet.
// you may wish to validate it is hidden first
new_item.style.position = "absolute";
new_item.style.left = "-1000px";
new_item.style.display = "block";
var height = new_item.clientHeight;
EDIT: Looking through the jQuery code, they do exactly what Tsvetomir Tsonev suggests. jQuery temporarily sets the style to "display: block; position: absolute; visibility: none", and then measures the height, swapping the properties back after the measurement.
So, it looks like you're stuck with having to do something hackish, whether it's cloning the node or risking having it flicker in some browsers... I like Tsvetomir's suggestion better than my initial hack as it, at least, doesn't involve cloning a node into the DOM that you don't need. Either way, the element must not be set to "display: none" in order to measure it's height. Isn't the DOM wonderful? :-)
EDIT 2: Also worth noting that, after jQuery gathers the height, it adds allowances for padding, margin and border sizes, so you may need to as well.

Yes, an element that is not displayed on the page has no dimensions.
It kind of makes sense. Consider an element that has been created and filled with a bunch of text, but not yet added to the document tree. How high is it? Depends on font-size. How big is font-size? Depends where in the document that div is inserted; its parent font-size would inherit through.
Similarly for an element with “display: none”. It's not rendered, so it has no dimensions. Couldn't we ask “how high would this be if it were ‘display: block’”? Turns out no, because if it were displayed, that in itself could change the dimensions of its parent block, and then the dimension of displayed elements would be inconsistent with the dimensions of non-displayed elements!
The typical solution is to unset “display: none”, measure the height of the element, and then immediately re-set “display: none”. The browser won't redraw in the middle of a bit of JavaScript, so you won't see a flicker on the page.

I nkow you guys solved this a long time ago but I thought I should share this since it quite tricky to get the height of a hidden div tag.
heres what I did after reading your post,
I placed the div i want to slide inside a 1px height div with overflow set to hidden.
you dont even need to set the display of the inner div to none since it is already there and if you use offsetHeight it should return the proper height for all browsers and you can use that height to slide your div up an down.
PEACE!!!

In IE you could try scrollHeight, but I'm not sure if it will work or if it is cross browser.