I am trying to get the minimum height of the div scroll thumb in javascript,
It looks like there is a minimum height that the browsers do not pass.
in chrome it is 16 px.
i need a formula to get it for all browsers
i am able to get the height if greater or equal to the minimum
Can you help?
https://i.stack.imgur.com/A0NhD.png
Note that it's really dependent on the browser and often the browser uses native OS widgets, and DPI settings. On mobile devices the scrollbar is usually hidden entirely.
Whichever "solution" you'll find, you shouldn't trust it to work everywhere. Even if you'd cover all cases now, it most likely breaks tomorrow.
Related
I'm trying to set the minimum height of some element to the minimum width of another. That minimum width of some element is given using some calc formula in less, and that formula might change later on. I tried setting the min-height to the min-width using JQuery, but it simply inserted the calc equation that didn't give the same output because 20% of the width is not 20% of the height. I was looking at css width: calc(100% -100px); alternative using jquery, but the solutions for that equation requre knowing what the formula was in the jquery, and I want to write my code such that it works no matter how much you change the calc formula in the less.
Example: http://jsfiddle.net/n6DAu/2116/
$(element).width() returns the width in pixels
$(element).css('min-width') returns the equation
Seems to be browser-specific to me. Chrome reports min-width as the calculation, and in the developer tools DOM inspector, it's also reported as the calculation.
Firebug, on the other hand, reports it as the value in pixels, both in the javascript and in the DOM inspector (using your fiddle). Firefox's built in dom inspector also reports it as the pixel size, not the calculation.
I didn't bother testing in IE.
So my answer would be - Possibly - you can't do it. (or at least you can't do it in a generic reliably cross-browser way) The value of min-width is going to change anyway, based on the enclosing element, so it may be something you'd just have to calculate on the fly, since you can find out how wide the enclosing element is at any given point in time.
In my HTML i have a <div> (call it the panel) with fixed width that contains some text; that text is set to font-size: 25px; line-height: 25px; in the accompanying CSS. It so happens that the text ends up as 36 lines.
Given that all margins, paddings and borders are zero, you'd expect the height of the panel to be 36 * 25px = 900px, and that is in fact what i find in Firefox, using the DOM's getBoundingClientRect() method.
However, in Google Chrome i get different figures; it would appear the panel is only 892.7999877929688px high while lines are 24.799999660915798px high. Dividing those two numbers still gives 36 though. It looks like there is a scaling ratio between nominal pixels as set in the CSS and real pixels as reported by getBoundingClientRect(); in my case, this is 1.0080645299120465 nominal per real pixels.
One more piece of evidence comes from Chromium running inside an nwjs app where i initially observed the discrepancy. During my tests, it showed consistently a different ratio from the one in Chrome. Now, at some point during my tests, the pixels reported by Chromium suddenly jumped to the integer values as reported in Firefox; i'm not sure what i did to make this happen.
It could be expected that the fractional ratios are in some way linked to page zoom; after all, at very small sizes, Chrome and Chromium reflow the text (and sometimes do it wrong). And indeed, varying the zoom in Chrome leads to different ratios, and making Chrome zoom in to the max will make the ratio flat out at 1. Still, my Chromium app is not zoomed in to the max and still has a fractional ratio. an integer pixels ratio in the test but a fractional value in the real app.
For all i presently know, all i can do to obtain the ratio so i can make sound, consistent box size measuring with JavaScript is to set up a box of known size and measure it.
I'm still wondering what the source of the observed behavior is. Are there any reports of it? Is it an intentional or an emergent behavior of the renderer? Was it ever discussed by the devs? Is there an API to obtain the ratio?
I've put some code on a gist at https://gist.github.com/loveencounterflow/d8c20b9021d2ab3f573a to simplify testing.
Some fonts cant be rendered at the exact size u ask for, and fonts had properties that affect indirectly to the real size reported. If you want same behavior everywere, maybe u have to import your own font to achieve similar rendering cross browsing. I had a similar problem while working on IE and Chrome.
I'm trying to detect, in a future-proof and device-independent way, when the address bar in the iPhone browser is showing. This is the toolbar that is shown at the top in order to display the URL. It can be hidden by calling:
window.scrollTo(0, 0)
What I'd like to do, is detect when it's being show (thus reducing the available viewing space) and set a timer to hide it again a second or so later. Any more frequent than that and it'll be quite annoying since users won't be able to get to the address bar.
I've tried checking window.pageYOffset, unfortunately, this returns zero if any part of the url bar is visible.
I don't want to hard code any dimensions on the iPhone and check those against the current viewport size. It's too fragile.
Anyone know a solution here?
The window.innerHeight property is what you're looking for. This is the height of the actual content on the screen. It's significantly less when the toolbar at the top is visible, because there's less room for the content. There is a slight problem that I can't seem to figure out on my iPhone 4 - window.innerHeight sometimes returns 3 pixels less at certain scroll positions of the screen.
I've set up an example for you that does more or less what you asked, it should at least get you started:
http://jsfiddle.net/rUSEb/show/light (test it out on your iphone).
Does $('#idOfLememt').outerHeight(); yield same result for all browsers? Any thing different for IE7?
Just go to http://api.jquery.com/outerHeight/ with the different browsers you want to test and see for yourself (on Mac OS X so can't check IE for you). It looks like the DOM in the demo has all possible styles that would affect this included.
Most of the time you can rely on jQuery to do it's thing and give you consistent results across browsers, that's one of it's main reasons for being after all.
Edit: Of course this won't be the case if the browser messes up with something else, for example if your container isn't fixed height and IE renders something inside your container with a different height for whatever reason then the result would be different. You are however pretty much guaranteed to always get the same result as the amount of pixels used on screen.
Like SLaks said it should work fine.
There is one downfall you might run into though if you aren't explicitly setting margins and padding in your CSS. outerHeight() will include padding and border always and if includeMargin is true than it will also include margins. With some padding/margin discrepancies across browsers... ahem... IE... you may get different calculations unless you've explicitly set the border, padding and margin on the element in question.
It should work fine. (Unless you have other layout issues)
I am looking to create a fullsize window using javascript but I am having difficulties trying to take the actual size of the window into account. I can get the resolution of the desktop but if I set the windows width and height to that value, it is not 100% correct as it does not seem to be taking into account the size of the border for the browser application itself. How can I calculate my target width and height to take the browsers application border into account?
So basically you want to mimic the effect of hitting F11? Check out [old dead link]
I want to warn you that it's a usability nightmare. Try to think of a better way to execute your design without going full screen. Messing with the user's system settings is a HUGE no-no, and changing browser dimensions/resizing windows definitely falls under that category.
To find out the windows height and width you can use the following:
window.innerHeight/Width -> All browsers but not IE
document.body.clientHeight/Width -> All browsers
document.documentElement.clientHeight/Width -> All browsers
More info here: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow