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; }
Related
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.
I have noticed some unexpected (by me anyway) behavior when the following css is used:
body, html{height:100%; overflow-x:hidden}
When the page has more height than the screen, vertical scrollbars appear as expected and the scroll event is detectable on the body element (rather than the window). The trouble is that the window.pageOffsetY property is no longer reflecting the scrolled position. This is also affecting the pageY property of mouse events.
I have set up a fiddle http://jsfiddle.net/kevmc/n2sJB/ where you can see this in action.
Only when both body and html tags have the above styles does the problem arise. I know the simple answer is don't use those styles, but I am trying to write a javascript component that I can use on many sites where I do not always have control over the stylesheet.
So my question is how can I measure the scroll position when the above styles are in place?
As you have set height:100% for both html and body elements, body become scrollable (not html/window as it was before), so you should check scroll offset of body element: jQuery('body').scrollTop(); or try solution without jQuery from Engineer
I've used $('body').height($('body').height() + 1);.
I'm working on a wordpress site that has a bunch of plugins...my suspicions point to some script within the theme, but I have a particular element that has it's height set to a fixed pixel size. This is fine except for when trying to add dynamic content. If I set the height to auto, it gets set back to a specified height.
So it seems to me that some javascript is setting the height of this element (maybe with a mutation event). Is there a way in Chrome's web developer tools to see what script is setting the height (or any css) of an element?
I doesn't seem that breakpoints really help me here as the elements tab doesn't seem to update as I step through.
Any thoughts on debugging this one?
If it's done with javascript, it either applies an inline css or a class. so you could find that with chromes developer tool (press F12).
Well, I never did find what was setting the height of the div, but using a $(window).load and then setting the height to 'auto' fixed the problem.
I have a site that is a fixed width, within the content area I am displaying a log viewer.
The log viewer is hard to read as it is confined by the fixed width of the site and the log lines are quite long.
What I want to do is above the log viewer have a button that says "Expand", when clicked the log viewer's width would grow to be just slightly less than the size of the viewport.
The rest of the site would still remaine fixed width but the log viewer would be as wide as the screen.
I've drawn an image of what I want to achieve here:
http://imgup.co.nz/3940
I have tried setting "position: absolute; left: 20px" (As well as setting the width) but this causes the footer of my site to move up to be under the log viewer (As the log viewer is no longer increasing the height of the content area).
I'm not sure what to do, it should all be css related I believe.
Any help would be much appreciated!
Try this: http://jsfiddle.net/h4C2p/
EDIT: Sorry, that won't work for different widths. Here is one that works:http://jsfiddle.net/h4C2p/1/
if you don't mind setting a height for the content area, set it for the parent of the element of wherever you show the log.
or, don't wrap everything in one tag. ie. have separate header, content, footer, that normally have the same width and are centered, but when you click expand, the content.. expands
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.