Related onclick go full screen and How to implement exact full-screen in javascript?.
Facebook has recently added the high resolution image view feature:
When I clicked it, my browser goes full screen mode:
This is native browser full screen similar to F11.
I would like to implement this feature for a local web app that will only be used internally, thus no random user being irritated by the full screen effect.
Does anybody know how to do this?
Or alternatively where I can get code to implement this, with explanation how it works?
this is a new API offered by HTML5 so only few browsers support it at the moment...
you can check MDN for some basic explanation and examples
EDIT: worth to mention > difference between Gecko and WebKit: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%"
EDIT 2: supporting browsers are only Firefox (since 10) and Chrome (I think very early not quite sure when they fully supported it)... as it is experimental you need the vendor prefixes...
EDIT 3: link to "living " spec
EDIT 4: regarding IE support: 11/15/2011 Ted Johnson from IEBlog says that the IE10 team has not yet decided whether to implement the FullScreen API. He notes however that, “Windows 8 Metro style Internet Explorer is always full screen … and as before, F11 enters full screen mode in desktop versions of IE.”
EDIT 5: can I use - another nice table showing that in latest Safari available as well... whether Opera supports it in Version 12 is still unknown
There is a new HTML5 Full Screen API.
Here is a demo site of it.
http://html5-demos.appspot.com/static/fullscreen.html
Related
I realize this may be a dumb question because I am returning to web dev after some time anyway, so please don't be shy to enlighten me! To me it seems that the art of css hacks (like back in the day to sniff out old IE browsers) could be used to fill the gap between the new-ish #supports queries and old browsers that do not support these features. Potential to save yourself and your site from alot of javascript? Even aid in dropping javascript altogether in small projects. Is anyone aware of any projects like this? It is also possible I have failed to search with proper keywords...
Yes, you can do this with the next commands:
The all following examples are valid:
#supports not (not (transform-origin: 2px)) - for test browser on non-support
or
#supports (display: grid) - for test browser on support
or
#supports (display: grid) and (not (display: inline-grid)). - for test both
See MDN for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/#supports
Is it possible to force window to switch between normal and full-screen mode by JavaScript (no jQuery)..?
I know how to open a new window in full-screen, but that is not what I need.
There's now a proper fullscreen API (first proposed by Mozilla and later released as a W3C proposal) has been implemented by Webkit (Safari 5.1+/Chrome 15+) and Firefox (10+). A brief history and usage examples here. Note that IE10 will allegedly not support the API.
You could try the experimental FullScreen API.
Using full-screen mode on MDN
W3c Fullscreen Living Spec
Browser Support
If you are not satisfied with the browser support, there is one more option: display a message to the user about how F11 switches to Fullscreen mode. Used this as a fallback option in a recent webapp I worked on, and the feedback was satisfactory.
When I'm testing my website on a normal notebook, I have no problem with my website but when I'm testing this website on a Netbook (mini laptop) it has a strange behaviour.
You can see the website here:
http://www.benskesblog.com/projects/frontend/project/index.htm
(it works on IE9 and other modern browsers).
When I try it on my netbook the images aren't displayed completely. When I scroll I see another part of the images. Very strang. I've tested it on another netbook (and on other browsers) and I have the same problem. You can see it here:
http://img259.imageshack.us/img259/5168/titel1.jpg
http://img683.imageshack.us/img683/374/titel2k.jpg
Does someone now what's going on?
Thanks!
For starters, IE9 isn't "modern" - it's "bleeding edge".
Also, your page doesn't work at all in IE6 - which is arguably the most common browser out there.
So you've really got two questions you need to ask:
1) What is the minimum browser I'll support (for example, IE9+FF7+Safari5 #1024x768 truecolor resolution)?
2) How will I degrade gracefully for users who don't support my minimum requirements?
I have witnessed how Internet Explorer 8 (IE8) is in Windows XP and how it is in Windows Vista/7. Quite strangely, IE8 seems to be acting like IE7 for certain aspects of CSS and JavaScript (maybe for other elements too). Am I the one who is seeing things? Otherwise, if this is true why is this happening and what are the major differences in IE8 for Windows XP and IE8 for Windows Vista/7?
Make sure that your IE8 that's acting like IE7 hasn't been flipped into "Compatibility Mode". There's a switch on the UI that lets the user flip it into a "behave kind-of like IE7" setting. I just found this out today and it really pissed me off. (I knew that IE8 could do that, but I didn't know it was under user control!)
Here's a trick: take a page that you know should put it into IE8 standards mode, bring it up in your weird-acting browser, and then launch the developer tools and see what it says the page mode is at the top of that window.
The difference between IE8 on XP vs. Vista vs. Windows 7 should be minimal.
The majority of the differences are with the chrome (e.g. the styling of the scrollbars or the arrow on a drop down list).
That said, IE8 does have something called Compatibility Mode that when turned on, causes IE8 to render content as if it were IE7. It's the broken page icon at the right of the address bar. When depressed (grayish), it is turned on, and the site is rendering in "IE7 Mode".
Since you have to have at least 2 machines to have made the comparison in the original question, you may want to verify they are both viewing sites in the same mode.
Finally, the visual quality of the site may be different if one of the machines is setup with "Clear Type" turned on. (its a matter of personal taste, but essentially with it turned on, Windows attempts to anti-alias text to "smooth it out" at the sub-pixel level) This is both a Windows setting and an IE setting (both can be changed independently) you may want to confirm that both machines are setup the way you like.
Sorry, I am unsure how I can add comment yet, so I am doing this as an answer.
IE8 will render HTML with compatibility mode when it comes from the intranet zone.
I guess what I happen is that, in Vista/7 intranet mode is turn off by default. But it is on in XP. So the browsers could be running in IE8 mode in vista/7 but IE7 mode in XP.
See Controlling Default Rendering section in the following URL.
http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
Also take a look at the Specifying Document Compatibility Modes section to see if you can force the page to run in IE8 mode, it might help to solve your problem.
The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?
Is there a browser emulator (or equivalent tool) to assist testing?
Opera has an option to view pages as through a mobile device. I've found it useful in the past.
I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.
This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.
I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.
One example:
The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.
I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.
The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.
In a few years, hopefully the only rendering differences will be the screen size limits of the phones.
You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.
Just google it.
It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.
Some browser emulators that I know of:
Openwave.
Nokia tools
There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.
DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.
BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.