Get image height in IE of display:none image? - javascript

I have images who are set to display:none. I am using javascript (document.getElementById('elem').height) to get the height/width of these images.
This works in other browsers, but IE reports the height to be 0 (presumably due to the fact that its display is set to none - because when I remove the display:none, the height is reported correctly). I tried wrapping the images in a div and setting the div's display to none instead of the images - but this didn't work either.
What is the typical work around for this?

If you are interested in the size of the image itself, apart from any styles or attributes set in the html, you can measure a new Image with the same src.
It doesn't add anything to the document's html or stylesheets, or even to document.images.length if you are only testing included images.
var im=new Image();
im.src=element.src;
return [im.src, im.width, im.height];

you could use visibility: hidden;, maybe in combination with position:absolute too prevent "flickering" which you will remove after reading out the height.

Try this:
Position it offscreen
set it to display:block
get its height
set it back to display:none
re-position it back where it was

display:none; elements are defined as not having any display properties, so height and width shouldn't be used while it's in this state.
You could try setting it to visibility:hidden;, which would retain height and width. The downside of this is that visibility doesn't affect it's position in the page flow, so it will also retain the space it takes up in the layout. You could counter-act that by setting the position to either absolute or fixed to take it out of the context flow. You may also want to set the z-index to a negative value to ensure it gets hidden behind the rest of the page elements, otherwise it might block other elements from being clicked, etc, even though it would be invisible.

Related

Get reliably the height of an hidden element

The problem context
I need to resolve the height of the content of an iframe after loading it (in order to adapt the height of the iframe element itself). The problem is that the iframe could be in a hidden state (one of its containers/parents set to display:none), when the loading is done.
I can't find a way to get the correct height of the iframe content as long as I don't display it. Using jQuery.height() returns 0 on Firefox.
An example demo here:
https://codepen.io/anon/pen/gKBQeP?editors=1111
(you'll notice how the height is reported differently in case you immediately click on the Tab3, where the iframe is, making that visible, or if you wait a couple of seconds after loading and then click on the Tab3)
Cannot write height on the element, right after displaying it.
Moreover, after making it visible again I still cannot get the real height of the content; it still returns 0 like it is hidden. I assume because the iframe-content is still in the process of getting rendered, even if the DOM tree of the iframe has been shown already.
If I setTimeout few milliseconds after making it visible then I can get the correct height (that doesn't make much sense to me....🤔).
I really don't like to set a timeout in order to read the content height.
What is a reliable, cross-browser, way to get the height of a hidden element, even when this is hidden (or in the process of becoming visible)?
My solution
At the moment I:
trigger the read/write of the height right after I know the element is visible again.
use setTimeout() to wait half-second (feels sluggish 😒) before reading/writing the height of the element.
Note (the actual question)
I am trying to find less hacky as possible solutions; so I want to avoid:
displaying (or cloning) the element quickly (taking care saving+restoring css properties, making them persistent and inline; or taking care of avoiding flickering in the page), to read the dimensions and quickly set it back to hidden (😖).
using setTimeout to wait the element dimensions being restored (and readable/writeable correctly) in order to work on them immediately after showing the element itself.
It's a bit hacky but rather than display:none (I assume that's how it's being hidden) you could set something like:
top: -10000px;
left: -10000px;
position: absolute;
It's "hidden" since it won't be visible, but you will still be able to get its height. Then after you get the height you can remove these styles to make it visible.

Z-Index not taking effect?

I'm trying to use a background image, with divs over the top of it. All the elements have position attributes and i've currently given the background image an opacity of 50% so that I can see behind it. The z-index of the div 'wrapper' is higher than the image but is still appearing behind. Also it's at the bottom of the page and I'd like it to appear at the top and have a height if 100%.
Here is an image of what i'm seeing currently:
As you can see the div is behind the image and can only be seen becuase of the image opacity.
Any help would be greaty appreciated, thank you.
It's because your #Page container has a z-index lower than the image, even though the wrapper has a z-index higher. The parent container's Z takes precedence.
Simply removing the z from your #Page will probably fix the issue (without having a fiddle to test that on, but pretty sure).
Additionally, you don't actually need z on all this stuff. You could take advantage of the normal stacking order of elements, with the elements lower down in the markup being stacked on top of earlier elements....
The z-index value of a child element only plays a role within the scope of its parent. In this case, #wrapper is inside of #Page and has a z-index of -1000 relative to #home-bg z-index of 2.

easyXDM adds mysterious extra height to iframe

I have to place the content of service provider in an iframe on parent website.
The height of the iframe content would dynamically change depending on user interaction.
Problem I face is that there is some extra height added to the iframe. I'm not sure where the height is coming from.
Any insight appreciated.
LINK TO PAGE
I don't believe this to be the fault of easyXDM.
It appears that the height being calculated is for the current width of the iframe. If you remove line 28 in your HTML file, you will see that the height is completely filled. (Or the following line) (Or you can leave the code as is, and disable the height style in your developer tools and see the result)
this.container.getElementsByTagName("iframe")[0].style.width = "500px";
Since it's hard to modify the code in the debugger, the next thing I would try is, setting the width to what you would like it to be prior to filling with content and a calculated height.
I had the same problem
When you do assign the height to the iframe element, don't assign it to all iframe. Because it affects iframes in the Ads and social media plugins.
So I did the following
$('#divID iframe').height(easyXDMmessage);
$('#divID iframe').width('100%');
In the case of empty iframes, I ran into an issue where if you set the height to 0px, the parent block element will still show at least one line of empty text. This is because iframes are actually inline elements, so their parent block will still show one line-height of text even if the iframe itself is zero height. Here's the simple fix:
iframe#my_iframe { display:block; }

Resizing to page width for print style sheet

So I've got a page that shows an image with some absolutely positioned text on top of it.
I want to write a print style sheet for it so that:
the image is resized to fit the width of the page
the text is repositioned and resized to maintain relative position and size with the image behind it
So I know I can do (1) with just max-width: 100%, but I'm not sure how to accomplish (2). I'm okay with using some javascript if necessary, but I wanted to know if there's a way to do this in pure CSS. If I do need to use javascript, what can I hook to check for the pixel width of the image in the printed page? Just use the calculated width as normal?
And yes, this question might be more appropriate for DocType, but I've yet to get any help over there.
My problem was that I had set overflow: auto in the main div, which was causing the contents to overflow the printed page.
To fix it, all I needed to do was set overflow: none.
The overflow: auto was what was making it print like
(source: github.com)
I think you could happily leave it to the printer driver if you trim off the whitespace around the images, and then replace the margins on-screen with css, and the remove it again in a print-media stylesheet. Buiding-in the page margins is going to cause problems.

using javascript find the height a div is going to take before it is rendered

I have a div which contains different amount of text at different moments (determined by what the server decides to send). I want to find the height this div would take if rendered. At the point when I want the height, the div is not being rendered (display:none). The display is to be set to 'block' later.
I have tried .offsetHeight and it works well after I set display:block for the div. However, I want the height at the time when display is set to 'none'. Any ideas?
You cannot determine the height until it's rendered. So with display: none;, it won't be possible.
A work around would be to set visibility:hidden; and change it to visible when you are done with your resizing
If you position the element absolute and do as RageZ says you can measure it. Then you could set the position back to static.

Categories