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
Related
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.
I'm developing a Chrome App, and it talks to some hardware and displays some information to the user. I want it to have two windows, and some control over the z-order of them.
Starting with the content
The main one (I call it the "main" window) is always open, although it can be minimized. It's fairly large (left half of a laptop to mid-size desktop screen-ish), and displays some fairly technical information (which isn't really important here).
The user can press a button and open another window (the "meter" window) which is small (on the order of 100px by 100px) and boils down the information to a 'do stuff' button, and a meter that ranges from 0 to 100.
The desired behavior
What I want is for the meter window to always be on top of the main window. That's the only special behavior that I want from the meter window with regards to z-order.
Something that isn't what I want
What I don't want is for the meter window to be always on top of everything. This is what I get with Chrome's alwaysOnTop.
One possibility that leads to another problem.
Here's another question which is almost kinda the same as mine but in a different framework (Adobe AIR) and actually not that similar at all. But it does give me the idea to make the meter window topmost if and only if there are no other windows covering either window. That might not work exactly the way I want, but it would be close(r).
Unfortunately, that would require me to try to be aware of all the other windows in the system which would be fairly intrusive, and I'm not aware of a way to do that anyways.
You can fake this somewhat by listening to onBoundsChanged of the main window, and then toggling alwaysOnTop for the meter window on and then off again.
firstWindow.onBoundsChanged.addListener(function() {
secondWindow.setAlwaysOnTop(true);
secondWindow.setAlwaysOnTop(false);
});
This isn't a perfect solution and might not work on all environments. Another approach would be to do something like the windows sample, which forces the second window to stay on the right of the first window.
firstWindow.onBoundsChanged.addListener(function() {
var bounds = firstWindow.outerBounds;
secondWindow.outerBounds.left = bounds.left + bounds.width + 5;
});
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.
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)
Let me start off by saying I really like Superfish (& jQuery). Unfortunately, this - apparently? - does not offer cross-frame support out of the box.
Situation: extranet website, consisting of 2 frames, divided horizontally. The top frame (the smallest one) contains a menu. When hovering over this menu, the "drop down" content gets displayed in the bottom frame (over the other elements there, of course). Here's an example (and actually, the solution we're using today): http://javascript.cooldev.com/scripts/coolmenu/demos/frames/
So does anyone know a way to build a clean (using standard HTML/CSS and as little as JS as possible) solution? Any help would be appreciated! :)
I guess the armies will take on the »ditch your frames« thing, so I won't. I'm assuming you have informed yourself of frameless alternatives and have come to the conclusion that you need frames (for whatever [absurd] reason).
The short story is: you cannot break out of a frame, same as you can't break out of a window. All content is contained within the frame / window - there is no way to have content bleed through.
That said, you have two options left.
Your parent document happens to be a regular document containing two iframes, and all documents are served from the same host (SOP). In this case your menu-frame can create elements in the parent-frame that actually overlap the iframes themselves. So you could position an element within the parent-frame to appear below the corresponding element of the menu-frame, while having it z-indexed over the content-frame
Your parent-frame is a frameset-document and thus doesn't take any content other than frames. You're shit out of luck. The only thing you can do is have your menu-frame do the same trick described in (1), but append the menu-elements to the content-frame.
Either option sucks. If you have the option, ditch your frames. Any dumb server-side language (php, ruby, python, …) allows you to extract often re-used components (like a navigation) into seperate files and link them in every other document you've got. SSI might be an option, too.
If the only reason you're using a frame is to keep the menus attached to the top of the window, then you can simply use position: fixed in the CSS.
Building a drop-down menu system that crosses frames is like building a normal drop-down menu system (mouse over the menu "head", show the menu "body"; mouse out of the head, hide the body; etc.), except:
Since elements cannot actually cross frame boundaries, the best you can do is to have the head in one frame and the body in the other (like COOLjsMenu).
To coordinate the two halves, you can either (depending on the situation) have one frame directly manipulate the other frame's elements, or pass messages between frames and have each frame manage its own elements.
So the extra complication is how to manage the two halves:
If both frames come from the same origin, then JavaScript from one frame can directly manipulate the other frame's elements. (Since you are using COOLjsMenu, I would assume this is the case for your extranet.)
If frames come from different origins, then they cannot manipulate each other's elements, though you may still be able to pass messages between frames:
If you only need to support "modern" browsers (Firefox 3+, Chrome, Safari 4+, IE 8+, Opera 9.5+), then you can use window.postMessage().
If you need to support older browsers (namely IE 6-7), you can use easyXDM (which also uses window.postMessage() if available in the user's browser).
In this case, you will need JavaScript in each frame to manipulate its own elements and communicate with the other frame.
Actually building a cross-frame drop-down menu system is left as an exercise for the reader :-)
You could just use a pure-CSS menu (like http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/). I'm not sure exactly why the navigation is in a different frame, but this will give you the functionality and flexibility to move the drop down lists up or down (by adjusting the padding/margin/top properties in CSS) to fit to the bottom of the frame.
The ideal solution would be to NOT use frames. Instead, you should ideally have your menu setup with a fixed position. The correct CSS for your menu element would be:
position:fixed
You may have to make some other tweaks, such as setting the z-index of your menu to be greater than the rest of your document. If you used fixed positioning, you might be able to get away with using NO javascript. Here are a few examples of menus that use fixed positioning:
Collection of 21 fixed position menus -- For example, the Face Works menu does pretty much the same thing as your menu without using frames.
CSS Floating Menu
CSS: fixed menus
You should note that a frame cannot access content outside of itself. There is no CSS/JavaScript that will let your top frame gain access to the contents of your bottom frame. It would be a security flaw to allow for this to happen. If you really need to use frames then stick with something similar to your current solution.
I hate to play devil's advocate, but you can break out of frames, because at my work we have a JavaScript menu that does just that. It's a very old library but it does do it. You can see the grey frameborders quite clearly and the menu is breaking out of the top frame and appearing over three other frames.
We've used drop down menus with cross frame support before without a too much of a problem. One way to do it is with allwebmenus, a powerful javascript menu builder with lots of really great features, and includes cross frame support out of the box: http://www.likno.com/examples.html?example=crossframe
This page explains how likno does it: http://www.likno.com/drop-down-css-menu/compilepropertiescrossframe.htm.
Deluxe menu also does a similar thing:
http://deluxe-menu.com/data-samples/cross-frame-horizontal-1-sample.htm
and is cheaper if you only want to do it on a single website, but more expensive for multiple sites.