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.
Related
I am using sketch.js to have a simple sketch board for a mobile app. It is just supposed to fill the full screen through setting width and height to a 100%, but after I click into the "sketch board" it adjusts itself to a smaller size. How do I set the canvas to full screen in this case? This is my example http://jsfiddle.net/66UJ9/
<canvas id='mysketch' style="height:100%; width:100%; border: 1px solid black; "></canvas>
CSS's height attribute will not refer to the height as the percentage of window, which is what you're expecting. The MDN states:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto
There is no containing block in your Fiddle, and it is not absolutely positioned, therefore it defaults to auto. But you can set the <canvas>'s height to the browser window with JS like so:
// Set the <canvas> height to the window's height
$('canvas').css('height', $(window).height());
You may need to adjust this a little depending on how your real page looks. (JSFiddle is adding some padding which throws it off.)
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.
I am trying to get the height of a <section> to match that of the viewport on each page re-load. The <section> height then needs to remain at that height, even if the user re-sizes the window viewport.
i.e the viewport is height: 450px, then the is set to 450px. When the viewport is increased to 465px then the remains at 450px.
Thanks,
Simply use:
$('section').height(function(){
return $(window).height();
});
JS Fiddle demo.
Or, more simply, use:
$('section').height($(window).height());
JS Fiddle demo.
This will explicitly set the height to the height of the viewport, or at least to the height of the window; and, so long as you don't bind to the resize event on the viewport, it shouldn't be changed.
I have a div. I've set the width of the div to auto. I want this div to be a square, so I've set the height of the div to 100%. Now if I set the width of the div to 100% it wouldn't be a square as most screens are rectangle, so I thought I could get the current height of the div in pixels and set the width as the height in landscape mode, and do the opposite in portrait mode, but I have no idea about how to go about this. Please assist me for the same. I'm using HTML and JavaScript
Without any extension like jQuery:
var div = document.getElementById("myDiv");
var height = div.clientHeight;
div.style.width = height + 'px';
I don't think JavaScript is necessary for that; if you are doing mobile/tablet design you could use media queries to change the width and height of your div; and if you want it to be square you could set the width and height to be the same with CSS. Experiment with percentages until you find which values produce equal width and height in web developer or firebug.
I get the width of the browser using the following line:
$(document).width()
and then I set the element to this width.
But in IE, the horizontal scrollbar appears (width is larger than the browser size - I think this is because it counts the width of vertical scrollbar). I use the html 4.0 transition doctype. What should I do?
Try the clientWidth property, like so:
$('body').attr('clientWidth')
From the Mozilla Developer Center:
clientWidth is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.
From MSDN:
Retrieves the width of the object including padding, but not including margin, border, or scroll bar.
It shouldn't count the scrollbar. Does your element have margin or border? That would be added to the width of the element and affect the horizontal scrolling. Just try subtracting from the $(document).width() value.
You can use $(window).width(), which doesn't include the scrollbar. However, that's the window width not the document width. The document can be a lot wider than the window in horizontal scrollbar situations. If your page will never get wide enough for a horizontal scrollbar, this may be fine for you.
Getting the scrollbar-less document width in IE (Quirksmode), regardless of the existence of a horizontal scrollbar, I know of no perfect solution. This is what I'm currently using:
var maxLikelyScrollbarWidth = 25; // It's 20px on my IE
var hscroll = $(document).width() > $(window).width() + maxLikelyScrollbarWidth;
var widthNoScrollbar = hscroll ? $(document).width() : $(window).width();
It's not perfect but does the job. There are edge cases though.