Case:
I was searching the web for re-sizing the iframe based on its content (iframe and the page hosting are from the same domain). What I found as the possible working solution is to call a function of parent window from iframe sending the size to set height for the iframe. That is simple to implement.
Problem:
The problem now is that the page loading inside iframe is AJAX intensive and is dependent on user's interaction on the page. The height can increase or decrease relative to user's actions (note that height only changes on user interaction and not randomly or automatically). Now I want to trigger a function when the height of "body" (of page inside iframe) changes the height. This would help me to re-size the iframe every time the height changes inside it.
Possible Solutions:
I tried using
jQuery(document).ready(function(){
document.body.watch("clientHeight", function(property, oldHeight, newHeight) {
alert('New Height: ' + newHeight);
});
});
but the function never triggers. Even I get it to work, from what I found on internet, it does not work on IE. I want a solution that at-least works for IE8.
Another possible solution was to watch the user's interaction on the events that could cause the change of height. But that would be really inefficient as there are a-lot of such events that could cause height changes.
So what is the best way to go around it?
Regards
Jehanzeb
Related
I am designing an interactive web game that takes place entirely in the browser. It uses html5, and everything (including the elements) is part of the game world. Since this is the case, I need some pretty strict control over the positioning of my elements, scroll position, zooming, etc.
One particular level requires that an element be placed off screen (just outside the viewport) so that the user must scroll the page to find it. Unfortunately, after scrolling, the page seems to record the new width of the page including the originally unseen element. When the page is refreshed, the zoom level is adjusted to fit the entire screen with the hidden element into the viewport. This gives away the puzzle and ruins the level.
I know that browsers store information like scroll position so that when a user revisits the page they can pick up right where they left off. This is great for some things, but bad for my purposes. Is there a way to prevent this caching behavior of my browsers? Is there a way to get or set the zoom level of a page using JavaScript?
Currently I am using the code below to reset the scroll position right before the user leaves the page. It works pretty well, but the user can see the page scroll right before leaving.
window.addEventListener("beforeunload",function(event_){
window.scrollTo(0,0);
/* What I would love is if there were a way to do this: */
// window.zoomTo(1.0);
/* But I'm sure that's asking for too much. */
});
I managed to fix my problem by keeping the hidden element out of the html flow all together by setting its css position property to fixed. I simulate page scrolling by changing the elements style.left value with some custom touch event handlers. The page has no need to resize or zoom with the addition of the off screen element because fixed position elements do not effect layout.
This doesn't answer my question about resetting the zoom level, however, and I would still appreciate any insight anyone may have.
I am trying to get height of a div, after window.resize method, so that the element has its new height, but before display the output to the user, so I could change height of another div.
What I know already and not so tempted to use in this case
Use percentages for setting height of another div
Use fixed heights
Use CSS instead
use clientHeight
use innerheight
so back to question
Is there any event in JS or JQuery which could get me state where document is re sized but not displayed to user yet on the screen.
$(window).resize(WindowResizeNow);
You can use $(window).resize().
When you change the DOM in JS function, DOM is updated immediately, but a page is rendered after the function has been executed.
This might not be obvious in case of some events, which fire several times per second (like resize and scroll, keydown etc.), but user might keep them as a single event.
If multiple handler calls cause troubles, they can be omitted by using a debouncer.
Can I use some sort of JS script to take advantage of the size control here in the url
<iframe id="myIframe" src="https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&width=1280&height=1280&secure=true&key=0202f0ddb5a3458aabf520e5ab790ab9&"
to dynamically force the size of the iframe content to match the user's browser window?
This will combine the solution to my original question with a secondary solution to provide the perfect fix for my problem here.
(My goal here is actually to place this Twitch feed as a background to my webpage - resizing the actual content of the iframe is actually a very unusual but additional treat here, because of the way Twitch's url works!)
To be clear, I'm very early in my learning of JS, and looking for a beginner solution to take the browser window size to dynamically control the parameters in this url to control the size of the content in this iframe.
width=1280&height=1280&
are the key lines here. I need to make these measurements follow the viewport size instead of being static. What method is best to do this?
I don't know if I get your question right but changing the width and height parameters of your iframe can be done by this (used jquery for getting height and width of window cross browser)
$(document).ready(function() {
var iframe = $("#myIframe");
iframe.attr("width",$(window).width());
iframe.attr("height",$(window).height());
});
Is it possible to use an iframe with a fixed width (.ex. 75%) and a dynamic height? Want I want to achieve is that when the page that is loaded into the iframe, it will not be wider than I have specified, but the lenght needs to be according to the page its content. Is it a page with 5 lines text, the frame will be just big enough to display these 5 lines. Are we loading a large document with 1000 lines, the Iframe height will be automatically adjusted.
Prerequisites:
The url in the frame is on a different domain from the parent.
The code should work on mobile phone browsers too.
Let's try to avoid jQuery if possible. (to make the above faster)
I know you'd like to avoid it, but it really shouldn't slow you down so much that it'd be a burden on your site. I've done far crazier things with jquery and it's handled it like a champ. When talking "dynamic" it's usually a safe bet that you will need to touch some javascript at some point :P
$(selector)[0].scrollHeight
As for making it dynamic? You could setup an interval to adjust the height.
Something like this:
function setHeight(selector){
var contentHeight = $(selector)[0].scrollHeight;
$('#iframe-id').attr('height', contentHeight);
}
Then you either load it on page load or you wrap it in a setInterval.
If it's just the jquery thing and you don't mind javascript, then this site could help you
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/
IFrame height can be manipulated using the page rendering code, or JavaScript...but there is no way for the iframe to dynamically resize based on content.
The link in mplungjan's comment takes you to a really good post about this subject.
There is a link at the bottom. Pretty much what happens, is when the page gets opened, it loads entirely on the right side of the screen. Then when it finishes loading every single element, it moves to the center which is it's actual position.
I believe the problem is caused by javascript, since the site works perfectly fine without it. It doesn't seem to matter what javascript is included, if I leave just 1 of them, the whole thing comes back.
Could really use the help. Also the site right now is about 500 pages big, so I'm really hoping for a solution which can fix this with just a few steps.
Thanks.
Here is the link to the page so you can get css/code: http://bit.ly/3EyoWu
Its definitely javascript. I think the banners on your site are loaded at the very end, which leaves the browser making incorrect guesses about the dimensions of the content until the page is loaded.
Try enclosing your javascript code inside fixed width (and height) divs or tables. You can easily determine the width (and height) required by javascript generated code by inspecting your page after its loaded. If its the banners, they are almost always predefined size.
Edit 1 ----
I got it. The specified cell widths for your table are narrower, the browser therefore is unable to calculate the page layout until the page is rendered completely. A column with width 110px has a banner having width = 120px.
Edit 2 ----
Try specifying widths for all-but-one column. That is, if you have three columns in the suspect table, specify the width for two, and let the browser decide the width for the third. Furthermore, the banners seem to occupy a width of 125px instead of 120px, probably because of unnecessary white space around them. I suggest that you revise the column widths appropriately (and parent table's width if necessary).
This might almost qualify as a 'flash of unstyled content' (FOUC) except that the browser doesn't first render a page in an unstyled format.
Instead, you see styled content before the Javascript is able to add the finishing touches.
You might get some further hints by searching for 'flash of unstyled content'.