Develop Reference

Force a maximized window on user's machine?

Tech using: JS, jQuery, CSS3, HTML5, and Anguler(4+).
User's system is usually a Windows machine running 2 monitors.
Is there a way to programmatically force maximized window on the user's machine and one further force it across multiple monitors?
The only thing that is coming to my mind is somehow grabs the user's monitor size or monitors size.
The users (a certain set of people) for this Web App - want it to take up the entire screen views.

It's user's responsibility to resize browser window to the appropriate size. A regular window (not a pop-up that was opened with window.open, as another answer explains) cannot be controlled by a website because a website doesn't own this window - there may be other tabs in this window that are equal in rights.
The users (a certain set of people) for this Web App - want it to take up the entire screen views.
A desktop application (Electron or NW.js) may be considered to provide required UX for for this set of people. In its most simple form it can be just a wrapper for a website with necessary usability improvements.

You cannot resize a main windows, only for dynamic created windows
Only if you created it with window.open
:You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than one tab.
If you have used window.open , you can always try this :
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
it might works depends on browser but as a personal experience , forcing user to resize is not always good

Is there a way to control browser size and position across multiple displays / monitors?

Preface
First of all, I am very well aware that webapps should not fiddle with window size or position. Been through a lot of similar SO questions and forum posts.
But this is a special case, where the browser is just a platform to run an app on several specific machines in a controlled environment.
Task
The app should manage windows across several displays. (up to 5)
What I've tried until now
Searched for methods for gaining information about the host system display information, but the window.screen object only reports properties of the display the window is currently on (or considered to be on, if it is halfway on one)
Tried window.moveTo and window.open with flags "left=123,top=123" but they are always limited to the current display
Tried window.resize and window.open with flags "height=123,width=123" but just as with the moveTo they are limited to the current display.
Question
What could I do to make my application use (without manual window positioning) all the available space in a multi display environment?
Scenario
Think of it like I have two projectors correctly aligned, and would like to make it possible for:
each project to project different things (each projector projecting its own browser window)
project an app seamlessly across both projectors (possibly fullscreen)
There could/should be a window running the master window layout logic
Note
I can use any flags, app or kiosk mode, as again: we deploy the app to the target environment.
The browser options are Chrome(preferred), Chromium, and Firefox on a Windows platform (because of the special video card we will be using for 5 displays).
Fallback solution
Manually stretch a window across available displays and run the apps in iframes within this master window.
Drawback: A single process is running everything, so should an app break within a frame it breaks everything.
Afterword
Also a solution to this question would be a great help as well: Windows / Chrome / ATI / Browser fullscreen across multiple monitors

Go with a chrome/firefox extension that has access to window/tabs specific APIs.
Either embed your whole application in the extension or communicate with the extension through messages (chrome, there's an equivalent on firefox).
Support in Chrome is experimental.

You can use window.moveTo(-1000,100) to move a pop up to a second monitor in IE if you check the permission "allow script-initiated windows without size or position constraints" under Internet Options/Security/custom level.
If you only have a single monitor connected, it will move the window to the edge of the primary display. I have not found a way to do it in Chrome though, it doesn't appear to have the same security option.

Try using the chrome.windows API to interact with browser windows. You can use this API to create, modify, and rearrange windows in the browser.
https://developer.chrome.com/extensions/windows
It even works with nightwatch.

Another possible solution is to use the win32 to size & position the window.
As seen in the solution of question: Chrome Packaged App and Dual Monitors (no code there, this is just for reference)

I don't think it's possible.
Browser really limit JavaScript in its permissions for security reasons.
Maybe you can manually(in JavaScript of course) set the x and y position far outside of the screen so it appears on another screen but that's not a neat way to do it.
As far as I can think of, you have two options:
Create different pages for every screen and open them separately every time.
Create all the windows with a button and make the user drag them to the corresponding screen. When the user clicks the button open the window in full screen/kiosk mode and load the content. However I don't know what will happen if you activate another screen while your in fullscreenmode somewhere. It might invalidate and close the fullscreenmode.
This is the only way you can have distinct windows in your browsers as far as I know.

Javascript/Jquery to run function when browser width change?

I'm creating a mobile website, but right now client insist on using an original website which is non responsive. That means I will be having two website under the same domain.
Now what I need to do is compare user screen size when loading the webpage and redirect them to the right website.
I can resolve this using javascript below:
if($(window).width() <= 760){
document.location = "https://maps.google.com.my/";
alert('mobile ver');//goto mobile version
}
but there is another problem, what if the person is browsing the website using
1.smaller screen(computer screen) at first then later decide to maximize the browser screen?
or
switch from portrait view to landscape view, (which has a longer width...)
Is there a function that could trigger every time the browser width change?

you need to call to your function inside resize event
$(window).resize(function() {
//call to your function and check the window width
});

I think you should consider having a single website that uses media queries -- as mentioned in #mattytommo's comment -- to alter layout based on the screen width. I've developed a few websites now that have just one site for mobile, tablets, and desktops using media queries. It's occasionally awkward, but it saves having to have two different sites and thus double the maintenance burden.

Is it viable to use actual browser windows for detached panels in a web application?

I'm planning an application and I'm wondering if it would be possible to use actual windows (window.open) for pop-out style panels as an alternative to using the "virtual" sort of windows made using absolutely positioned elements. This would have the advantage of being detachable from the browser window so that users could take advantage of the additional screen space provided by multiple monitors.
But I'm unsure how well it would work. Some points:
Would it be possible to keep the opened windows on top of the main application window, so that the detached panels wouldn't disappear behind the application itself
Would it even be possible to open multiple windows from the same application, or would automatic browser security perhaps limit you to one?
What about compatibility with the myriad of browser alternatives?
To summarize, would the advantage of additional screen space outweigh the disadvantages of using browser windows?

Do not use popup windows. They will usually be blocked. It is far easier to give the user a link and ask them (as if giving instructions) to right-click and open-in-new-window, than it is to do a popup and ask the user to manually unblock it. (Even that is bad practice.)
Would it be possible to keep the opened windows on top of the main application window, so that the detached panels wouldn't disappear behind the application itself
Probably not
Probably not.
Would it even be possible to open multiple windows from the same application, or would automatic browser security perhaps limit you to one?
window.open('http://www.google.com', 'win1'), window.open('http://www.google.com', 'win2')
What about compatibility with the myriad of browser alternatives?
Terrible, especially with popup-blockers, though it might work if your users only use one browser.
To summarize, would the advantage of additional screen space outweigh the disadvantages of using browser windows?
I do not think this is a summary of the previous question. Multiple monitors seems to be a useful but rare use-case. I do not know of a website which requires multiple monitors. If you are making some sort of "monitor" (like the security monitor kind) or information-display kind of software, it might be worthwhile, but other websites make do with just 1 window which can be as large or small as the user wants.
That said, it is possible to use popup windows. Gmail for example uses them to create chat windows, which you can later "pop back in". It is not a required feature however, and more than one can quickly get unwieldy.

I would strongly suggest you avoid window.open as many browsers and plugins will stop them. What you need are dialog boxes. See the following links for example of the jQuery UI one.
http://jqueryui.com/demos/dialog/
You can find many other solution online that works without or with other libraries.
You can have as much as you like and can virtually do anything you would do in another window the advantage is that is that it will be much easier to handle communication between the dialog box and the main page that it would be using popup windows.

Javascript within page to open fullscreen

I have a htm page that I need to update so that when it is opening it will open at fullscreen. What is the code that I need to place within this page to do so?

Most browsers don't support opening windows in fullscreen. I suggest you only use the document size you are given.

This is not possible.

Don't do this. Firefox doesn't implement this because people just don't like it. You should assume users have their browser the size they want for a reason.

You can't (and shouldn't) force fullscreen, but you can (though probably shouldn't) use Javascript to maximize the window size:
window.outerWidth = screen.availWidth;
window.outerHeight = screen.availHeight;
But as previous people have stated, resizing a user's window is likely going to annoy him.
If fullscreen is really important for your application, you might consider giving the user instructions to switch to this mode manually. You COULD use Javascript to customize these instructions to a users' browser/OS.