I made a html5 video gallery that is going to be used as a kiosk. I now need it to be viewed in complete full screen mode with no tool bars, similar to when a flash site is in full screen. Is there a way to do this with javascript or jQuery? I was also thinking of calling it from a iframe inside a full screen flash site but dont know if this is possible. Any suggestions will help.
Thanks in advance.
At this time no there is not without having the user press f11. But there is an API in the works that is supposed to make this happen. https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI
Edit (Other options):
If you are wanting to work in kiosk mode then possibly John Kurlak's comment will help if you want to work in IE. Also, you can use add-ons such as https://addons.mozilla.org/en-US/firefox/addon/r-kiosk/?src=search. This way you can turn the browser into a kiosk and not worry about users getting back out.
I do not believe a website can force a page to go fullscreen. You can however have the browser start fullscreened and as long as you do not open a separate window it will remain fullscreened.
Could you not create it in a new window using window.open(), passing in fullscreen=true?
Related
I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.
I'm having a bit a of problem with a navigation not working as it should. If you view the following site on a non-mobile browser, you'll get an idea on how the navigation should function.
www.snottrocket.com
The problem is with mobile platforms. I've viewed this site on an android phone and iPad and it doesn't work as it does in a desktop browser. I do recall that it worked fine with the android before but it may be that the phone's browser has been updated or something.
I thought that maybe it had to do with URL masking but I'm not sure. Essentially, this site lives in a directory under another website and uses URL masking to display snottrocket.com in the url window. This is done with an iFrame but i'm not sure if it's the reason.
I'm assuming the other reason may be the JS code for the scrolling functionality.
Either way, i'm kind of stuck. Anyone want to take a crack at it and tell me what I'm missing or how to solve it?
Thanks in advance.
is there a javascript script that auto fullscreen mode the browser? example if you visit my site, the browser will auto fullscreen upon load..
Please, don't do this. You shouldn't resize the browser, that's the user's choice to make.
If I have my browser at a certain size, and your site is one of 20 tabs, why should the other 20 be resized?
If you're using window.open() to open a new window and want to specify a size, that's fine, but don't resize the browser. Most browsers actively block this, for a reason.
I looked into this once and like Nick said browsers do not allow you to control setting fullscreen for security reasons e.g. think malicious website recreating the toolbar to trick users. The closest you can get to it is explaining to the user in a ribbon or popup the first time they visit, how to get to fullscreen and letting them make the decision. Then the trick is check for the keypress on f11 assuming that's how you had the user do it.
The only place I wish it was allowed for the site to go fullscreen is webapps.
I want my users to be able to take a screenshot of the webpage (or me defining the size of the screenshot) and then allowing them to save it to their computer.
Does anyone know of a good JS lib that allows you to do this?
I know there are addons for the browser, but i wanted something pure JS so that the user can just click in a button and a "save as" link apears with a screenshot of what they are looking at.
Thanks for the help.
/fmsf
Browsers don't expose APIs that allow this to web pages, so there is no way to achieve this using plain JavaScript running in a page.
The only way to achieve this would be to have screen grabs prepared on the server, and a normal download link pointing to the appropriate one.
This can't be done in JavaScript. Taking screen shots outside the current document/domain is a potential security problem and is not possible. See my question about getting the pixel colour from the current mouse position for more background.
If you need to transmit the screen shots onto your server, look into external applications that interact with your web site. Open-source bug tracker Mantis for example has a screenshot application for Windows.
If the screenshot and the saving of the file are both to take place on the client computer, check out Fireshot for Firefox. It doesn't seem to offer any interaction capabilities with a pre-defined web site but may be the right tool for your users.
HTML2Canvas (http://html2canvas.hertzen.com/) recreates the rendered HTML into a canvas. And you can save the canvas as an image. That could do the trick, although it's not 100% accurate (and for good reasons - that would open security holes in browsers if that was possible, see https://stackoverflow.com/a/1936084/1333479).
I have a .swf file I am including in my html document. I'd like to be able to play it in full screen mode. (No browser showing).
Is it possible to do this using html / javascript or is this a component of the flash movie itself?
The ActionScript that initiates full-screen mode can be called only in response to a mouse click or keypress. If it is called in other situations, it will be ignored (in ActionScript 2.0) or throw an exception (in ActionScript 3.0).
http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
So you cannot do this using Javascript.
No, you can't. I understand that preventing people from making annoying auto-fullscreen movies and the like sounds good, but this is really crippling... You have a whole navigation bar (standard across the site) in HTML and then for this one flash component, there's one button that's not in the bar because... because other people might do something scurrilous with it? What's the real harm in a video taking full screen unprompted? Will a user lose files? Will the computer shut down? Sometimes I think Adobe's too paranoid for their own good...
I think you have to use SWFObject to control it from javascript.