I am developing a web system for training and the trainer can show the content by zooming with the css3 property that increases the size of the screen.
What I'm trying to achieve is a PowerPoint style presentation, which fills the screen. The problem is that my webpage can be a combination of HTML, Flash, image or audio, or even 4 at a time.
How can I accomplish this? One idea I have is to create an image of the contents of the webpage and attach it to a flash and put it in full screen. Is there a better solution or maybe some software or something?
Thanks in advance for the help.
EDIT
I know browser have the functionality to go full screen, but what I'm trying to do is take a part of the webpage (because in the page are the menu, toolbars, etc) that is in a div.
HTML5 Fullscreen API:
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen();
// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();
Also, check out this for making a presentation with HTML5:
http://slides.html5rocks.com/#landing-slide
It seems to me that it's best to let the user control this. F11 works in all browsers (that I know of) to toggle full-screen on and off.
HTH
Most browsers support pushing F11 to go into full screen mode....
Most web browsers have a full screen mode - hit F11 on a Windows machine with either Internet Explorer or Firefox and they will go full screen. Hit escape to exit full screen.
You may also want to conside using S5 ( http://meyerweb.com/eric/tools/s5/ ) to make HTML based presentations.
Good luck!
https://www.w3schools.com/howto/howto_js_fullscreen.asp
This use element.requestFullscreen() method
Related
I am using Wordpress with a responsive theme. When I display the content on a mobile device the theme is displayed properly with a regular browser.
When switching into the broswers 'Desktop mode' the responsive theme behaves little bit strange. I guess this is due to the used screensize. Is there a way to display the used CSS media query?
In sense of when CSS says media min-width: 1024px can I see somewhere which screensize CSS is using? Or does there exist a simple page where to test it?
Or even better: How to detect if the browser request a 'Desktop version' of a site and use it for CSS?
I Googled but didn't find any help how to detect it but didn't come up with helpful hints.
window.innerWidth is what you're looking for. Plug it into your dev console and you'll get the exact width after scaling in pixels.
You can use the inspector-tab from the developer tools inside the browsers to view the css-rules an element currently uses.
You can also see and set the size of the browser viewport with the help of the developer tools. Most browsers have a set of presets to simulate specific mobile-screens. This is very helpful for testing and debuging responsive rules/styles.
In styles panel of dev-tool you can search for it.
You can also use show-hide media-queries option.
Is there a way to display the used CSS media query?
I think what you're looking for can be found in your browser's dev tools. In the screenshot below, I tried resizing this exact same page and inspect it using Chrome dev tools. Under elements tab and styles you can see if your media query is being triggered. Please see the screenshot below...
can I see somewhere which screensize CSS is using?
Your browser dev tool will most likely have a feature that displays the current size of your browser window. In the case of Google Chrome, you can see the current size of your browser at the top right corner of your screen while you resize. Please note that the size will only display if the dev tools is currently open and you're resizing the window. Please see the screenshot below...
P.S.
ADDITIONAL:
If you want to have more like a javascript solution, you might want to check out this library. https://github.com/ryanve/actual
Based on the description, it "Determine actual CSS media query breakpoints via JavaScript". Please note that I have not personally used the library myself so I can't really say that it works.
You might also want to check this article that discusses how to detect a media query using Javascript - http://zerosixthree.se/detecting-media-queries-with-javascript/
Hope this helps! :D
the easiest solution is to use 'Window Resizer' (2.6.4) chrome extension
it will give you a popup window that will allow you to resize the view port to any of the standard sizes (xs, sm, md, lg etc.)
open the website in your computer browser and reduce the size of the browser like this example and right click on the center of the page and click inspect then you will be able to see all css style of the website when the website is small
I have a video element that’s working beautifully with the standard controls in Safari (OS X 10.11 - El Capitan). I have play / pause, the scrubber, captions, and even AirPlay. …but there’s no full screen button. I swear I’ve seen that button on the normal controls before. The WebKit blog even has a screenshot with the button in an unrelated article (backdrop-filter is rad though, check it out).
Is this seriously not standard functionality?
I’ve added fullscreen to the video and source tags and even fullscreen="fullscreen" for good measure. The controls tag is working (I see the controls after all).
iOS’ controls are visually different and include the full screen button.
I’ve been hunting around and the most popular thing I can find is this super old StackOverflow article that basically says I need to use Javascript. That doesn't seem right. I feel like I’m taking crazy pills!
I suppose this could explain why so many sites roll their own controls using the JS hooks but it seems like a lot of work for expected functionality.
I realize I’m just asking for a ding in my pitiful reputation but I hope I’ve just missed something obvious.
Thank you in advance for your help / downvotes. :)
I was in a panic over the problem until I discovered that a <video> contained in a "popup window" instead of a regular window/tab is will cause the <video> tag to drop the fullscreen button in its controls.
My "page preview" happened to be launched in a pop-up window, and having maximized that, it took me a while to eliminate various factors before concluding that it was a popup vs. normal window/tab issue.
The behaviour that I experienced was in Chrome. I haven't tried it with other browsers.
Additionally: Also, note that within IFRAME also behaves the same way, dropping the fullscreen button, too (from the comments).
I figured this out, it was at least half stupidity.
Heading
I had the video element set to use max-width: 100% so it would fill the container on the page. I didn't think that would have any effect on the video's ability to go full screen.
No Metadata
The video didn't have any metadata to preload in the first place. I used an app to add a title to the file.
Does the fullscreen toggle button show up when you start playing the video?
According to Apple's documentation:
The webkitSupportsFullscreen property is not valid until the movie metadata has loaded. You can detect when the metadata is loaded by installing an event listener for the loadedmetadata event.
It seems there is some support in the video file that needs to be checked for before fullscreen support is enabled in the controls.
When viewing an HTML5 video on both Chrome and Safari, the fullscreen toggle button doesn't appear until the video has started playing.
EDIT: you might be able to get around this behavior by adding preload="metadata" to your video element.
I'm coding a fully responsive cross-browser site. I've already coded portrait mode and what I did to inspect changes and modify the my CSS file was to scale my Chrome Browser up to a point where I saw the same thing on my browser and on my iOS simulator. In that way I could work out every change and edit my CSS file. I now need to do the same on landscape mode, but I can't find a way to use an inspector that would simulate landscape mode.
I have Chrome, Firefox, Safari and IE and I'm open to any tool that would enable me to inspect the webpage simulating landscape mode not only regular tablets and phones but also Retina-supported devices.
Here is a really cool plugin.
http://lab.maltewassermann.com/viewport-resizer/
You can use it on any browser. Drag the "Click or Bookmark" button to your bookmark bar, then click it on any page you want to change the view size for.
Here is the image of the button you want to drag to your bookmark bar:
Here is an image of the toolbar that it adds.
My favorite tool to use for this is http://www.browserstack.com/. This isn't free but well worth it.
A third option is Adobe Edge Inspect. You can display the page right on the device but inspect the elements through you laptop or desktop computer. This option is free but you need to create an Adobe ID.
I'm working on putting together a liquid style-sheet and it works wonderful. One thing that I've noticed is that my browser window in Chrome won't resize below 400px it just gets stuck there and in FF as I scale down it it just stops at around 400px and then pops a horizontal scroll bar.
When I open the site on my phone it looks perfect at around 320px, so I know it does scale lower than 400px.
I was curious if anyone knew if this was a browser/desktop thing or if I should be looking at something other than my CSS. I don't have any min-width declarations so i'm not sure what could be causing this.
Again on desktop it scales down to a min-width of about 400px and stops, but when I open it up on my phone it scales to the size of the phone screen which is roughly 320px... curious why at the very least it won't scale down to the 320px on desktop.
-edit-
Also I'm not sure if this matters but Opera allows it to scale down to pretty much nothing... So it works with Opera and not in Chrome or FF... any ideas?
Chrome cannot resize horizontally below 400px (OS X) or 218px (Windows) but I have a really simple solution to the problem:
Dock the web inspector to the right instead of to the bottom
Resize the inspector panel - you can now make the browser area really small (down to 0px)
Update: Chrome now allows you to arrange the inspector windows vertically when docked to the right! This really improves the layout.
The HTML and CSS panels fit really well and you even open a small console panel too.
This has allowed me to completely move from Firefox/Firebug to Chrome.
If you want to go a step further look at the web inspector settings (cog icon, bottom-right), and goto the user agent tab. You can set the screen resolution to whatever you like here and even quickly toggle between portrait and landscape.
UPDATE: Here is another really cool tool I've come across. http://lab.maltewassermann.com/viewport-resizer/
this may be because of the addons you installed on your browser. remove or hide all addon icons from the tool bar and try re size. when there are addons browser only resize the address bar and keeps the addons visible.
Update: 7/14/2013
With the latest chrome version, now you can re-size the address bar and it will hide the addons automatically.
I was stumped as well but ended up with a simple solution. I just created a HTML file with a link to open a new window:
Open!
This new window has nothing but the address bar and Chrome lets me freely resize this down to 111x80.
nayan9's solution works great, and can be put into a bookmark without having to create a html file. In Chrome, create a new bookmark with URL:
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
And give it a name of "Open Small Window" or something similar. This will allow you to easily open windows without size restrictions within chrome. Note that just copying this into your address bar won't work - chrome strips the "javascript:" out.
In case you want to reduce your screen width to emulate different devices (and why else would you want to do this?):
Chrome now has an Emulation section in its inspector, activated by clicking the little phone icon in the top menubar (between the magnifying glass and Elements):
Emulation mode allows you to set the viewport size to all common mobile screen sizes, among other nice features, like emulating touch, geolocation and even accelerometer input:
Adding to what nayan9 and drinkdecaf said, you can just throw document.URL into the call to window.open to see the page you're currently viewing in the 320 window. You might want to add some more to the width if you're expecting a scrollbar.
javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
I am lazy, to make it even easier, let the bookmarklet ask the user for sizes :-D
javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()
in chrome the icons of your addons in the top right corner cause the problem
-> resize the adress-bar (where you type the urls) to maximum width (drag the bar at the right edge to the right)
or disable the icons
The DevTools in Chrome have moved on substantially from when most of these answers were posted. The best way to address this issue now is to use the emulators that are built into Chrome.
To use the emulators open DevTools (press F12) and then click on the following icon to toggle the Device Toolbar:
This will then allow you to emulate whichever mobile device or viewport size you want to.
I found a quick workaround for this.
Just install the Responsive Web Design Add-on to Chrome, and it will open a separate window without the address bar and tabs, which can be scaled down to 10 px or less.
Link here: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related
I've been experiencing similar issues and just found a good work around. Open up your chrome devtools and in the top left, there's a little screen and ipad icon. Click that and it opens a mobile view of your page. You can set it to predefined devices or a custom resolution. Pretty nifty actually.
Another easy solution is to click Strg+Shift+N to enter Incognito Mode. There you can resize your Browser window as you like.
I like this tool because it lets you switch quickly and also switches between portrait/horizontal easily for mobile sizes. It also allows you to make a personalized bookmark let, so if you design for obscure resolutions frequently, you can save them and use them.
I had to use one of these tools because even with the above answer I couldn't get my window to scale to 320 properly, this tool seems to be a faster solution overall.
http://lab.maltewassermann.com/viewport-resizer/
I'm always running into this issue with pinned tabs. Chrome will not resize below a horizontal width of eight visible pinned tabs if there are any! Just detach the tab that you want to resize to solve this ...
For a web developer, in order to test the responsiveness of their website in mobile or tablet whose size is less than 500px or minimum width then use developer tools to test in small screens.
For testing, go to developer tools and press ctrl+shift+M or click the device icon at the top left of the developer tools screen to toggle device mode. If the device icon is in blue colour, then you can test your website responsiveness by changing the browser window.
This is my first contribution to the Stack Overflow community, and it is my effort to give back to all you wonderful people who have made internet such a powerful tool.
Now to answer:
Safari, has this cool feature.
You need to activate safari developer option in preferences.
Screenshot of setting up preferences in Safari to activate developer menu
Once activated you can access bunch of very powerful developer tools.
One of this tool is Viewport adjustment which can used to test your website responsive layout.
To activate responsive lay out testing, one can use the shortcut Command+Ctrl+R
to activate safari view port adjustment option.
This will give you enough control to test your website on various view port sizes.
Screen shot of how your browser window will look once responsive layout test option is activated.
Link to how to activate developer menu in safari:
https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
A lot of smart phones scale the page to fit into their screen size using zooming. Your minimum page width is probably 400px. Without any example code, I think that's all that can be said.
so I have a site that's not nearly done yet (eklinik), and its breaking on the iPad (iOS in general actually)... Things like the footer doesn't stay fixed, there's extra padding to the right, a div that's supposed to be a 100% width/height isn't, and so on so forth...
Now, I'm not asking someone else to clean up my mess (despite how nice of a thing that would be), but I am asking how can I start troubleshooting the website on the iPad...? For desktop browsers, I can always bring up the dev tools and see what's breaking where...
I do not own a mac based system, I do have an iPad though... The Dev console in the iPad is only looking for JS errors (mostly) and doesn't show anything...
Any suggestions will help... Thanks...
PS. The site is only going to run on the latest browsers:
Chrome 12+
Firefox 4+
Opera - 11+
IE 9+ (barely)
Safari 5+
If you do feel generous, and do want to point out mistakes (optional) I might have made, along with possible solutions (optionally optional), then feel free to drop me a line - abhishek#live.com.my... :-)
The question's old, but a good solution for this has come up:
Adobe Shadow
I've had quite a few clients recently that wanted their sites to be "mobile compatible" and the best solution for checking code/css on iPad is Firebug Lite:
http://getfirebug.com/firebuglite
I believe you can upload and include the javascript in your site and then automatically turn it on using a simple attribute in the html tag ( see their docs for more info).
You can also install the bookmarklet in your iPad bookmarks using this method here:
http://osxdaily.com/2011/12/02/run-firebug-on-ipad-or-iphone/
I use it using the bookmarklet method and it works. Unfortunately it is a little hard to navigate, because it doesn't handle the touch controls very well (it has trouble distinguishing between a 'hover' and a 'click), but it's better than nothing.
Regarding your actual problem, it sounds similar to an issue I recently had on one of my sites. Did you set your viewport tag? if your site is normally 960px wide, and you have a div that is using width:100%, it will look wrong on the iPad because the window on the iPad is technically only like 600px wide. So the browser thinks width:100% is 600px instead of 960px or larger. If you set the viewport to 960px, then iPad Safari says, "oh, my browser window should be 960px (instead of 600px)," and resizes accordingly.
Hope that helps!
I use weinre to test on mobile devices, not just iPads, and it works wonders.
If you carefully test in your PC with chrome and safari as well until you get consistent results I would expect iPad or Android tablet to render "nearly" the same...
About javascript errors you should of course avoid and fix them, are you using jQuery or any other intrinsically cross browser js framework? if not, you should! :)