Determine actual viewing size in browser - javascript

I am trying to determine the actual viewPORT size of the current browser window. I've tried:
window.innerHeight/innerWidth
document.documentElement.clientHeight/clientWidth
document.body.clientHeight/clientWidth
All return the full page size and NOT the viewing area.
What I'm trying to ultimately achieve is forcing a popup menu to appear on screen (in the viewport). Right now when it is shown, it might show below the scroll and the users are not happy with that. I know the x,y of where they've clicked. I just need to compare that to the size of the viewing area (with the size of the popup) to see if it will go offscreen.
It should be noted that the page is showing in an IFRAME, so if I need to go up one level to get the correct value, I can do that.

window.innerHeight/innerWidth
That unequivocally does give you viewport size (in this case, the size inside your iframe), but it isn't available on IE.
document.documentElement.clientHeight/clientWidth
That gives you viewport size, when the browser is in Standards mode. Typically used as fallback for IE.
document.body.clientHeight/clientWidth
That gives you viewport height in Quirks mode. You don't want to be in Quirks mode. Check the <!DOCTYPE of your document.
I just need to compare that to the size of the viewing area
Then you'll also have to look at the document.documentElement.scrollTop/scrollLeft.

Try
document.getElementById("").offsetWidth
Fill the above code with different element ID's, try using the body tag, or a wrapper div.

Apparently by going to the parent document, I was able to get the correct value.
Thanks!

Related

Any way to do page breaks with javascript (print media)?

Browser support for page-break-inside: avoid is poor. There are lots of scenarios where it's not applied. In my case it's a nested flexbox with flex-wrap.
Is there any way to add a page break using javascript?
I can detect if the browser is in print mode with onbeforeprint event in FF, or window.watchMedia on Chrome, but what next?
I guess I need to find out what's the printed page size in pixels, so I can determine the position where to insert the page break. But window.screen.availHeight returns the same value and window.print.availHeight does not exist :(
Assuming this is possible somehow, how do I do the page break then?
You can try a calculation, A4 has a certain proportion between width and height, so simply said if your print css makes the html/body 900px width. The height for each print page can be calculated by using the A4 proportions.
So you can add a print css file that changes the layout so that the content that needs to be on the next page has a margin top.

How to fit a webpage to different screen sizes without disturbing its original width?

I was flirting with an idea of making a bookmark app which might let users bookmark only a section of a page like in this image. They will click twice on the page to mark two horizontal lines. Area between these lines will be highlighted to show the selected portion of the page.
I will be saving the y-coordinates of the two lines. That's it.
But what if:
The user opens the bookmark in a bigger or smaller screen afterwards. The webpage will re-size to fit the new width and some of the elements will definitely change their position. Then the coordinates will mismatch and wont show the original selected area.
The page content on the url changes later on.
The webpage is responsive. Then the mobile view will be completely different. It might not contain some of the elements from the original normal monitor screen.
Solution for problem 2 can be that we save a permanent copy of the page and then set coordinates on it. I have figured out this part of saving the webpage to a single html file which looks very much like the original.
And for 1 and 3 points I am thinking if it can be possible to somehow fix the width of the webpage to show against the screen width. i.e. just stretch or shrink the original page width according to the screen width. Is there a way to do this? I did some experimentation with viewport meta tag but it didn't work.
Do you guys have any idea? Anything else according to you that can go wrong? Any extra add-on?

Is there a way to see what's outside main browser window?

I have some objects that I need to place outside of the main window then move them with CSS3 transition effect inside the window. I want to be sure if these objects are in their special positions visually. Here is a screenshot of how I think it could look like:
White rectangle represents browser window and the area filled with gray color is the 'outside' area that contains some objects I work with.
You could try to see what's outside with Firefox Developer Toolbar.
Right click on any element in Firefox and choose "Inspect Element (Q)"
Than select the 3D-view. It's a small button in the top right corner of the panel.
With this, you'll be able to explore the layers of your site, as well as stuff that is not in the normal viewing context.
You can use Screenfly. This allows yo to set any screen size you desire. You could set a huge screen size to see if your text is in right position.

Changing css based on browser zoom

Upon a quick google search of how to calculate the browser resolution with javascript You get a fair amount of useful links on how to change the width (for example) of an element by calculating the screen width (with screen.width) then from there it is simple math to determine what you want the elements width to be. COOL However, that calculates the screen resolution, not the browsers current resolution if the browser is zoomed in, which is unfortunate. Sure you can set a constant width to a parent div and then the element wont be effected by a zoom at all. BUT is there a way to determine the total resolution of the view port left in a browser AFTER a zoom in or out has occured, rather than just the initial resolution? I cant seem to find anything...
Do you mean something like what that user was looking for?
Find real height of any DOM element when browser zoomed
Try to follow it.

is it possible to print the contents of a div on an A4 using its whole width?

I want to print the contents of a div(a table containing info) using jquery. I was wondering if it's possible to resize the table in order to use the whole A4s width.
Thanks a lot
Do you mean you want to use a bleed to print right up to the edge of the page, or to simply have your navigation and other elements disappear so the width can take up the whole printing area (but still have page margins)?
I don't believe browsers support full bleed printing.
However, if you just want to use the full area with margins, most browsers should auto-size to the largest element on the page. So, use a print stylesheet.
For testing, Firebug can conveniently show the print view in the browser, or you can simply remove the media="print"
Hide other elements and make the div take up the full width of the viewport
Make sure to use width:auto; on that for best results. Since paper and screen are very different proportions, you don't want the browser mistakenly sizing-down your text because both are defined in pixels and it thinks you want it to preserve proportions.

Categories