The firefox add-on I am working on is best viewed in fullscreen mode. (I am not creating a new window, but I insert a transparent div on the body of the current page and display some pictures.) Is there a way to toggle the fullscreen mode or f11 key with javascript?
Thanks in advance,
According to https://developer.mozilla.org/en/DOM/window.fullScreen, you should be able to just do window.fullScreen = true; (provided that your script is running in the browser window, not some other window, in which case you may have to jump through a couple hoops to get a reference to the main browser window)
This property indicates whether the
window is displayed in full screen
mode or not. It is only reliable in
Gecko 1.9 (Firefox 3) and later, see
the Notes below. With chrome
privileges, the property is
read-write.
Related
I have a simple JS script including:
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
FF 21.0 opens it to the full size of the browser window.
Chrome and Opera correctly open it to the specified width and height.
Is this a known bug in FF? Is there some way around it?
You need to remove the space between height and width in your third argument.
See strWindowFeatures # MDN
Update:
As Pointy says, this doesn't seem to be the case (and from some testing it certainly doesn't affect me in FF 24). However, quoting from Firefox's tab preferences and settings page:
If you have chosen to open pages in new tabs, Firefox will ignore this option and will open a new window from a link if the page author specified that the new window should have a specific size, because some pages can only be displayed correctly at a specific size.
So this must have been changed from FF 21 til now. How are you triggering the window.open? I know some browsers differentiate based on event source, meaning you get different results on triggering it in Javascript vs. from a user-initiated event.
Voila! Pointy had the answer.
I hadn't noticed that the window was opening in a new tab.
I unchecked the browser open-in-a-new-tab option, and now I get the properly-sized window.
Thank You!
I have a working implementation of full screen working for Safari, Firefox, and Google Chrome. From what I have read it should work for ie with google chrome frame but when I click the full screen button I created nothing happens. Any ideas? Is it not yet supported?
$('#enable_fullscreen').click ->
calculate_presentation_font_size(height)
if docElm.requestFullscreen
docElm.requestFullscreen()
else if docElm.mozRequestFullScreen
docElm.mozRequestFullScreen()
else if docElm.webkitRequestFullScreen
docElm.webkitRequestFullScreen()
Putting an alert in the "webkitRequestFullScreen" if statement shows that it does go to this condition in chrome frame but docElem.webkitrequestFullScreen() is undefined.
I've build it and made it work from this examples.
https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode
The only things I can see missing from your code for the webkit condition is the parameter "Element.ALLOW_KEYBOARD_INPUT" to the webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
Unfortunately the main problem of chrome frame is the communication with the IE window that literally behave like a difficult child ;-)
For IE you can open a popup window in fullscreen mode by directly calling document.location.href for the source it will open the current page your are on
window.open(document.location.href, 'myAppfullscreen', 'fullscreen=1');
I have a JavaScript to re-size all my popup windows:
function resize()
{
window.resizeTo(240,230);
}
But now it is not resizing in Mozilla Firefox, but it was doing earlier, also
or if the popup window is opened in a new tab, it is not resizing, also in some browsers it is not also. Is there any piece of JavaScript code which works in all scenarios and all browsers?
Firefox comes with a preference for user to allow/disallow resizing of
window using Javascript. It's in Tools - Options - Content - Enable
Javascript -> [Advanced].
I am not sure if resizing is disabled by default, but you might want
to check your own Firefox installation first.
If it's disabled by default, then unfortunately there is nothing you
could do to resize the window after it has been opened. An ugly
workaround would be to open itself once again using window.open() with
the preferred size though.
Source: timdream (here)
I'll also add that:
You can't be assured that any browser will let you control the size of
windows you create. You can't even be sure you'll get a window at all
- people can instruct their browsers to open all new windows as browser tabs
Source: Pointy (same source as timdream)
This is source code for exit from fullscreen mode:
var cancelFullScreen = document.webkitCancelFullScreen || document.mozCancelFullScreen;
cancelFullScreen.call(document);
it's works correctly when i enter fullscreen using function startFullScreen, but don't work after pressing F11 key - browser won't exit fullscreen mode. Browsers Chrome 18 and Firefox 12. Why it's happens? Is it bug, security restriction or some other? Is it possible to fix it?
F11 and requestFullScreen are the different things in browsers. requestFullScreen requires permissions from users while pressing F11 is not.
Also as you may see they have different interface. For example opening window in fullscreen mode (using JS) in Google Chrome don't tell user that he can go out pressing F11 while native fullscreen do.
Your example makes no sense, because you can only request full screen on an element, not on a document. The API also requires you to cancel full screen on the element on which you requested full screen. The Gecko API also tells you the element that it thinks is in full screen mode, i.e. the one that you need to cancel full screen on. If you press F11 to enter full screen, this element remains null, because you cannot cancel it.
I am working on a Flash app that is 900x700 pixels. When viewed in misc. browsers at 1024x768, the browser chrome causes robs too much of the vertical space and the app appears in a window with a vertical scrollbar. Unacceptable.
The flash app will be launched via a link emailed to the viewers.
I'd like to avoid resizing the flash app and am wondering if there's a way to do the following via javascript, with no clicks involved:
maximize the current browser window
remove current window address bar and tabs / switch browser to full screen view (equivalent to pressing F11).
An alternative would be to resize the flash app vertically to match the browser canvas height to avoid scrolling. This may cause the app to become unreadable, so not the best approach in my case.
Thank you!
UPDATE: Seems that browser resizing and autoswitch to full screen won't work and neither will the flash app auto resize. What is the best approach then? And, some users may have browsers with toolbars or open a small browser window.
The only idea I have is to use javascript and display a message to users with small browser windows to pres F11 manually. The audience is executes and some may not even know what an F11 means...
There is no way to maximize the browser window to full screen with JavaScript. While this is unfortunate for your genuine requirement, it is considered a security restriction.
Sources:
Stack Overflow - To view the silverlight app in fullscreen mode(F11)
SitePoint Forums - Trigger F11 using javascript
Webmaster World - F11 Fullscreen using Javascript
The window size can be altered by using:
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
To answer the question in the comment you made to your own post. Yes. You can have a button whose click handler does this
stage.displayState = StageDisplayState.FULL_SCREEN;
You can use JavaScript to open a new window (using window.open) and control the window that is opened (no address bar, etc). You can also control the size of the window (you can't maximize it, but you can get the users screen size, and set the window that same size).
Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provide events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements. These APIs may present you with a more acceptable solution for those browsers.
See this hacks.mozilla.org blog post for details.