it it possible to resize the browser window width to fit 2 monitors through JavaScript ?
Let's say we have 2 monitors with same resolutions : 1280x760.
is it possible to expand the width of the browser to fit 2 monitor? that 1280 X 1280.
thanks.
Firstly: Don't do this! Your users will hate you for it.
Secondly, there are a number of possible configurations possible for users who have more than one monitor.
Some users will have them set to be treated as a single extra-large display; others will have them working more independantly of each other. A colleague of mine has a display-splitter hardware which means that although he has two monitors, the PC only sees one, so when he maximizes his windows, they cover both screens. My set up on the other hand is different; when I maximize, the window expands to fill a single monitor.
Some users will even have different monitor sizes and different resolutions betweeen their monitors. I know one person who has one monitor in landscape mode, and the other rotated 90 degrees in portrait mode.
A lot of these things will make it phyically impossible to have a window that is maximized across all monitors, so even if you could make it work for some users, it wouldn't work for everyone.
Assuming you do manage to get the browser window stretched across both monitors, you now have the problem of working out how to layout your page without your text and graphics being split by the edges of the monitors. Your browser won't know where the monitor edges are, so you could easily end up with important parts of your page content being broken in half which could make your site virtually unreadable.
Even if you know in advance exactly what the user's screen resolution is going to be, you still have this problem because you don't know what the user's browser window looks like. They may have the history or bookmarks side-panels open. Their desktop settings may be different too; they may have their Windows taskbar aligned on the side of the screen rather than the bottom. None of these things are in your control, and will affect the screen space available to your browser, which in turn means you can't predict where the edges of the monitors will be even in an environment where you know the screen resolution.
In short, I don't believe it's possible, and I don't believe it's desirable. I strongly recommend not doing it.
To quote from David Flanagan, "Javascript, The Definitive Guide" (5th edition), Section 14.4.3:
"The Window object defines methods that move and resize a window. Using these methods is typically considered very poor form: the user should have exclusive control of the size and position of all windows on her desktop. Modern browsers typically have an option to prevent JavaScript from moving and resizing windows, and you shuld expect this option to be on in a sizable percentage of browsers" (emphasis added)
Related
The problem: I'm working hard to implement a responsive UI in my app. But the keyboard IME on Android squishes my entire page layout into a frame that's about 96 pixels high when in landscape orientation. Typically this means that the input control being edited is not visible in the space above the IME. And one cannot edit a value that's not visible in Chromium. I'm assuming iOS has the same problem.
Setting a minimum height for the page helps. But the Chromium scroll-into-view implementation is not robust enough to keep up with some of the more complex page rewrites that are triggered by a change in window size in my app.
Ideally, I'd like to run the keyboard IME in "extract" mode, where the page is entirely hidden, and only the value being edited is displayed in the space above the IME. But as far as I can tell, there's no way to do that, even in Android native apps. Chromium never runs the keyboard IME in "extract" mode, even in landscape orientation.
The solution I'm current implementing: simulate "extract" IME mode by perform editing of values in a full-screen dialog that contains nothing but a single dedicated <input>.
The question is: how should I detect when to use this solution. it's easy enough to check the browser's navigator.userAgent. The Mozilla foundation recommends checking for /Mobi|Android/ (although I've seen solutions that have 40 or 50 patterns). But I'm wondering whether there's a feature-driven way to check for this instead -- something more along the lines of if ("geolocation" in navigator) ....
But as far as I can tell, there are no features related to whether and how a keyboard IME will change the layout of a page. If there are, I'd like to know. The "feature" I'm looking for is something along the lines of "Will this browser lay out my entire page in a frame that's 96 pixels high (in landscape) whenever an input control gets focus". But "does this browser uses a keyboard IME" would be satisfactory.
Any ideas appreciated.
The problem is self explanatory.
The context is as follows, I'm trying to open three windows using window.open(), on my three monitors. It does not accept negative values, and for that I need an alternative way to locate each window to a screen. I would like this to work on IE11.
https://developer.mozilla.org/en-US/docs/Web/API/Window/moveTo hasnt been of great help.
Edit:
window.moveTo works on windows opened using the window.open() method, but they only move the opened window within the screen( 0,0 to 1920*1024 in my case)
You can try to refer this explanation given by Mike Burr may help to understand the logic behind it.
Depending on how your video driver handles multiple monitors (as 2
logical screens or 1 logical screen), this will cause the moveto(0,0)
method to place the window on whatever logical screen the window is
on. In my experience, most video drivers manipulate multiple monitors
as separate logical screens (typically leaving the Windows task bar
across the left monitor), thus leading to the behavior that you
described. I have seen some Nvidia cards and drivers that stretch the
taskbar across both monitors (and would possibly allow the
moveto(0,0) to move the window to the left monitor because both
screens are being manipulated as a single logical screen). Hope this
helps.
Reference:
javascript moveTo(0,0): strange behavior in multiple monitor environment
What I'd like to do, if it's technically possible, is leverage JavaScript (frameworks such as jQuery are totally fine, too), to determine what percentage of an inactive browser window might still be in view.
For example, in the image below, imagine I'm working on a project for CNN.com. In this scenario, I know I can use window.onfocus and window.onblur to determine whether the window marked as Background window is in focus or not.
[![enter image description here][1]][1]
However, I'm interested in measuring what percentage of the viewport/page for the Background window is visible to the end user, and/or what percentage of the page for the Background window is not visible. Or, an alternative approach could also be to simply determine whether an element (by ID) is in view on the Background window or it's obstructed by any foreground windows.
After extensive Googling and Stack Overflow searching, I'm not finding a solution for what I'm trying to achieve. This could obviously be due to technical impossibility, but I wanted to ensure I've left no stone unturned in troubleshooting.
The use case here is that I'd like to be able to pause videos and animations, etc. when a given element is not visible on the page -- not just when the window is not active at the moment, since users can often have windows arranged side-by-side, and might want to watch a video while multi-tasking. even though the window might be active at a given moment. Conversely, if a window is covered up, the desire here (for business purposes) is to pause the video, so we are not serving videos (or video ads) when a player is out of view.
We have a web based LOB application and currently we are shrinking the content of the app when it goes onto a smaller resolution browser i.e. IPad, using the viewport. using javascript:
document.querySelector("meta[name=viewport]").setAttribute(
'content',
'width=device-width, initial-scale=0.8');
This works fine asthecially but it seems to produce a performance hit when the browser has to scale everything down, especially with our kendo controls (the grid takes a massive hit).
Just wondering if anyone can advice a better was to scale down the viewport without hitting any performance issues?
I'd be surprised if you're getting a performance hit from scaling the page since that happens on the GPU and is expected to be very fast.
Additionally, your viewport descriptor as-is wont scale the page unless you have content that's explicitly wider than your layout size (for example, a very wide image). The browser will automatically zoom out to show all the content on load so your best bet is to pick a good layout width for your page (e.g. width=1200) and not set an initial-scale. width=device-width will attempt to lay your page out into the size of the device's screen, which is not what you want if you're trying to scale your page down.
This question already has answers here:
How to make the window full screen with Javascript (stretching all over the screen)
(22 answers)
Closed 6 years ago.
Hy all,
I need a javascript code, that when my site loads, automatically load it into full screen mode, as if i was pressing F11, and i have my reasons to do that..So anyone knows the right code to do that?
I also need to prevent the user from changing the screen size of the page
There is a full screen API, but it is currently an early draft and browser support is very weak.
Foisting full screen mode on anyone who visits your site is one of the more hostile things you can do as a web author. You should seek an alternative design that solves whatever problem you have without doing that.
Unfortunately, there is no perfect way to get the browser to come up in full screen mode. However, you can use the screen object to determine the screen size, and set your window size appropiately. The useful screen properties are availWidth and availHeight or width and height. You can then use those to set the window object properties, either innerWidth and innerHeight or outerWidth and outerHeight. I suggest you play around with retrieving and setting these properties. Also, different browsers behave slightly differently, so, if possible, I suggest you try your code on IE (which (surprise!) is the least standard), Firefox, Safari, and Chrome.
I know the "purists" will tell you forcing a certain window size is not a good thing to do. But in some cases it is appropriate. I have written an application related to the card game bridge, and, if the browser comes up too small, the card images are unreadable. So, the first time a user accessses my web page, I make it as large as I can. Most people leave it that size. But, if they reduce the size, I store the dimensions in a cookie, and the next time they go to my page, it remembers how big to make the page. I have received many compliments on using this approach.