I'm trying to set the height of a 'panel', so it fills the full width & height of the device. Previously this was okay, but now the site is running through an iFrame, the height is MASSIVE.
I'm using this code:
var windowHeight = $(window).height();
$('.panel-adjust').height(windowHeight);
Because it's inside the iFrame, it seems it's generating a big height due to the iFrame (Possibly the height of ALL the panels)
How can I fix this so it gets the actual viewport height, not the height of the iFrame? Bearing in mind this needs to be dynamic. The iFrame is on another site so I don't have much flexability over it.
I'm also trying to position an element to the bottom of the viewport / window. Normally doing this works:
position:fixed;
bottom: 0;
left: 0;
But now it's inside an iFrame, the fixed element is at the very bottom of the website (Not the window)
Any ideas?
Getting the height & width of the viewport on the Parent page (with the iFrame) then passing it to the iFrame and collecting it worked for me. Like #passionateCoder stated.
Related
If body is smaller than viewport, then the viewport size is returned.
What I am trying to do is resize a picture so that the body fits inside the viewport. I want to have one of those nice "above the fold" layouts where the user does not need to scroll. It breaks though when the screen is so large that the body is smaller than the viewport.
If body < viewport
then
document.body.scrollHeight (body) = document.documentElement.clientHeight (viewport)
The jQuery solution is to use $(document).height(), but it gives the larger of the viewport or the document.
How to get the height of the entire document with JavaScript offers solutions that fail here for the same reason.
How do I find the body height where the body height is less than the viewport height?
To prevent this trouble, you can use CSS Viewport variables to define your body height equal to the viewport! See above:
body {
height: 100vh;
}
In this case i am using the vh variable, that corresponds to the Viewport Height. Check the other options of viewport variables that your can use.
I need to adjust several elements in width and height in relation to window width. So I am using
window.onload = function() {
slideSizeUpdate();
};
$(window).resize(slideSizeUpdate);
to call my function.
After window resize everything is displayed correctly - but not onload. I guessed that this had something to do with the window-width-value.
So, I printed the width value of window and recognized that - onload - my window width had a value 'x' and when I resized for 1px left or right value 'x' of window width increased / decreased + / - 18px.
I assume that this causes the problems on my website onload. Does anybody know the reason for this and has anybody a solution how to fix it? That would be great!
EDIT
Its not that onload doesn't work at all. Its just the wrong values that it seems to get when it reads out the window width.
You can do like this:
$(window).on('load resize',function(){
slideSizeUpdate();
}).resize(); // trigger resize when page is loaded
Consider this scenario:
Some of the content is hidden via CSS. The resulting page is short and no horizontal scrollbar is required.
You calculate the window width on load event at which point scrollbars are not there.
You un-hide the content and now the page is tall and requires horizontal scrollbar.
The width of the window decreases by 17px (usual width of scrollbar) without you noticing.
If this is the case then one solution is to force the window horizontal scrollbar using CSS. You can use the following (although I recommend searching more on StackOverflow):
html {
overflow-y: scroll;
}
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;
I have an external script that is used on some sites
The script is trying to calculate the height of the whole HTML page (not just the visible part..)
everything is OK except one strange case - some sites use body { height:100% }. When the JavaScript is trying to calculate the height of the whole page it is returning only the visible height.
I used:
document.body.scrollHeight
tested on Chrome & Firefox
found the answere:
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
jQuery is not an option since other sites use my script and I cannot tell them to use jQuery
It really depends on what element you are trying to calculate the height.
If the html element is set to have a height of 100%, it will be the height of the browser window. Then the body may be higher than that because of some content, but the height of the html element won't change, it will remain the same.
So it really depends on which element in the page is causing the content to increasing the height. You should measure the height of that element then, but how can you know which element is it?
Check this example.
I have a page with a static header and footer which is displayed throughout the whole pages. I then have an iframe which is displayed between the header and footer. Currently, the iframe has a static height. I would like to adjust the height depending on the height of the inner page, since the iframe contains an application which must be displayed in an outer page.
Therefore, the outer page contains a header and a footer and between these the application (inside an iframe) is displayed. There are a lot of pages in this application and therefore I require to make the iframe to automatically adjust the height.
Apart from the iframe, I also need to adjust the height of the div where the iframe is being placed. Therefore, I have to adjust the height of the iframe itself and of the container div as well upon page change.
How can I achieve this?
Thanks in advance
function resizeContainer() {
var coordCont = getCoordinates($('#myContainer'));
var h = $(window).height() - coordCont.top - 18;
var minH = 800;
$('#myContainer').css({ height: h < minH ? minH : h, overflow: 'auto' });
};
get coordinates is a custom function of mine to get left/top/width/height/zIndex of an element. I also use minH as I don't want the content to be less then let's say 800. The same you can apply for the iFrame