I tried to get the window viewport width. when i use document.documentElement.clientHeight(or)window.innerWidth i can get exactly what i need. If i logged In at minimize mode,then if i maximize the window the viewport width will not be resized.I got the viewport width when it is minimized. how can i slove it?
I also tried to use document.body.clientHeight.But here also i got problem.The viewport size is larger than my viewport,because of statusbar.Then i subtract the statusbar size,then i got the viewport size.If i have anotherbar in my window again i got the same problem.
Exactly what i need is how can get the end user viewport size?Please help me?
Thanks in advance
from the jQuery docs:
http://api.jquery.com/height/
http://api.jquery.com/width/
$(window).width(); // returns width of browser viewport
$(window).height(); // returns height of browser viewport
Try:
$myviewport.getHeight();
$myviewport.getWidth();
Where myviewport is the viewport OBJECT. You can also use:
Ext.getCmp('myviewport').getHeight();
Ext.getCmp('myviewport').getWidth();
Where 'myviewport' is the ID of the viewport object.
Use
.getHeight(true);
.getWidth(true);
To get the height/width minus padding, margins, borders etc.
As a consequence of the proliferation of different browsers' ideas about this, it's a surprisingly tricky thing to get right. David Mark (author of My Library) is particularly strong in this area and has written an article on the subject: http://www.cinsoft.net/viewport.asp
Related
I've made an example on paint
This might be overthinking this but I'm trying to have a div that always keeps its aspect ratio (9:16) and that is showing entirely on screen whatever the windows size. I tried searching for "div keep aspect ratio" but in these cases the div doesn't resize with the window. I thought using javascript to check when the height of the window is greater than its width (and vice versa) and change the css but I don't know if it's possible to run a javascript function upon resizing the page. Also, all my content is in this container and I just want black bars to fill the rest.
Thanks for helping.
There are lots of ways to do that.
use javascript resize function:
window.onresize = function() {
// resize your div according to window size
};
use Jquery resize function:
$(window).resize(function(){
// resize your div according to window size
});
use css #media https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media all and (min-height:640px) and (max-height:960px){
// resize your div according to window size
}
Goal: Site that fits any screen size and orientation fluidly without scroll. I've got the ridiculous math problem packing part worked out with a different layouts per media query, in SassMeister:
http://sassmeister.com/gist/8f9954aa8973b97f43c8
Only way I could do it is with calc based on vh and vw for the sizing of all divs. Both calc and viewport units are an issue for safari 5, Opera mini, IE8.
Without access to vh, vw, calc, any polyfill would be failing to fit screen exactly without scroll.
So... I'm new to this, and don't throw tomatoes, but is it possible (and not insane) to use javascript to:
1) retrieve the vh and vw values upon load and resize (this part I know can be done with viewport, verge, etc)
2) replace all the css calc functions with the same inside javascript
3) output the resulting div sizes to the stylesheet
Help greatly appreciated, but I realize this would mean javascript is responsible for the entire layout and that's frowned upon. I just can't see how else to do it. If there's a solid practical reason the concept is doomed, or another approach, I'd like to know about that too.
Thank you.
I can answer that part about the javascript replacing vw and vh. in my code they didnt work so I had to come up with and alternative. here it is:
first, I set an onload function for the body tag.
<body onload="screenSize()">
then I had the javascript:
<script type="text/javascript">
function screenSize(){var screenSize=screen.width;
document.body.style.fontSize=screenSize+"px"}
</script>
what this does, is that it sets the base font to the amount of pixels in the width of the screen. when you declare a font size, you can use the % measurement rather than vw. the reason you can do this is because you set the size to the entire screen, so 1% means that the font-size is 1 percent of the screen, or 1vw. I'm not sure if this works instead of vh as well, but this made my code responsive to different screens and I did not use a single media query. hope this helps.
EDIT: I'm sorry,I misread. in order to get the vw value, you would use the previous script and then add this script:
var screenSize = screen.width;
var elemSize=window.getComputedStyle(document.getElementById("yourElement"))
var elemSize=parseInt(elemSize.fontSize)
var vwValue= (elemSize*100)/screenSize
the variable vwValue is the size of vw on the element. I'm sure that if you're adjusting, you can just set the script as
yourElement.style.fontSize=yourVwAmount+"vw"
Im trying to get pagesection to fill the browserheight. I´ve tried to apply a 100 height to all elements, but it´s not working. It works good if I set a heigh: 100vh, but It´s not the way I want to take, so I wonder what Im doing wrong?
Site: Svenssonsbild.se/Konsthandel Second and third menu are anchorlinks to the spagesections.
Setting height:100% means 100% of the height of the parent element so you need to specify the height of the parent for it to work.
If you want to set your element to 100% of the height of the browser, you need to make sure all the parent elements up to the <body> tag have a percent height.
Setting the element's CSS height to 100vh is the intended way to do exactly what you're trying to do. 100vh specifies that the element should always be the full height of the viewport, so unless you've got some other requirement that you haven't described, that's what you should be doing -- you'll need to explain why "that's not the way I want to take" if there's more to your question.
Depending on your content it might be a good idea to set the min-height property instead of the height property since the content might need more space than the available viewport size offers. Or you can just evaluate the section's height and compare it to the viewport height. Using jQuery the following might work:
$('section').each(function(){
var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
$(this).css('height', height + 'px');
});
You might need to adjust the selector to fit your needs.
I need to be able to store the current height and width of a div at any point in time.
Currently I am using div.style.height/width which works fine when the styling is applied inline.
The problem is that this returns for example 600px and not 600.
Is there a better way to do this? If not, whats the best way to get just the number 600?
My updated code looks like this:
var div = document.getElementById('container');
div.scrollLeft = contentdim.cx*scalar - parseInt(div.style.width)/2;
div.scrollTop = contentdim.cy*scalar - parseInt(div.style.height)/2;
Which works fine in FF. For some reason scrollTop is messing up in Chrome though..
Note: This is a function which is called onscroll for the div.
try div.offsetHeight || div.clientHeight
parseInt(div.style.height) is more generic than div.style.height.replace("px","")
However div.style.offsetHeight might be better because it does not rely on style being explicitly set (but you have to render the div before you can read the value)
div.style.height.replace("px","")
With jQuery, a bit more elegant, you can do it as well: http://api.jquery.com/height/
$("div").height()
//returns just the integer
To summarize the above:
document.getElementById('yourElement').style.height
CSS height if it has been set in a stylesheet. Will not include padding, margin, etc. If it is not set, you may wind up with values like auto.
document.getElementById('yourElement').offsetHeight
Height of the HTMLElement as rendered in the browser, including padding, scrollbars etc. (The total offset this Element's height consumes). Note that this often can be equivalent to clientHeight but that is not guaranteed.
Here is how offsetHeight is defined on Mozilla Developer Center. Note that there are a few differences with clientHeight, namely clientHeight does not include rendered scrollbars; offsetHeight will generally give you the maximum value.
Use jQuery:
height()
width()
I'm unable to get the height of a page in javascript when the page is larger than the screen.
I thought this would get me the right height:
$(document).height();
but that only gets the height of the screen, same as:
$('body').height();
same as:
document.offsetHeight;
For some reason all these examples only return the height of the screen. Can somebody help?
Using jQuery (which you did specify), $(document).height() will return exactly what you're asking for.
To clarify the usage of the height() method:
$('.someElement').height(); // returns the calculated pixel height of the element(s)
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
I suspect, that if $(document).height() is not working for you, something is wrong. You may be:
Calling it too early. Like, before the DOM is ready
Have some uncleared floats that are not causing some block level elements to expand to their real height. Thus messing up height calculations.
Have something critical absolutely positioned. Absolutely positioned elements do not contribute towards height calculations of their parent elements.
If you're cool with using jQuery, what about getting the body or html height? like:
var winHeight = $('body').height();
I was looking for this and landed up here. Without Jquery, you can get this with plain JS also. Below works:
console.log(document.body.clientHeight,document.body.scrollHeight,document.body.offsetHeight)
Do note the below link to clarify which to use:
Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
I think you need to add window.pageYOffset (the amount the page has been scrolled, in pixels).
http://www.quirksmode.org/dom/w3c_cssom.html
Not sure about JQuery. But this link, might help you to understand various properties and how they behave in different modes in different browsers.
http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html