How can I apply the HTML5 full screen api to the body tag of a site by clicking a button and then a toggle button to return to browser screen?
I have been playing around but havent got very far.
thanks
I found that it's better to make the <html> element full screen, rather than the <body>, otherwise you lose the scroll bars.
<button onclick="document.documentElement.webkitRequestFullScreen()">Full screen</button>
Obviously you'll want to test for support and use mozRequestFullScreen() on Firefox.
Related
I am testing a free Bootstrap template, and I can't fix an issue that I've found with it: the Header element appears to be wider than the page content, and makes a scrollbar appear at the page, when viewed in a Mobile (400x283) viewport (in Chrome Developer Tools):
https://distracted-jepsen-8ac7db.netlify.app/
Template code: https://github.com/tonysepia/so-theme
I have gone through the following steps to investigate the problem:
Used the Element Selection tool in Developer tools to identify the exact element that is causing the page to grow wide:
The offender is within the <header> tag, as expected
However, none of the Styles that I disable in the Developer Console seem to be able to remove the scrollbar at the bottom of the page!
Questions: What is the next step in troubleshooting such problems, and how can I prevent the header from occupying this extra space and make it align with the page content, without breaking the Desktop view?
hi, i found the issue solution regarding the x axis scroll..its because testimonial slider's navigation buttons are outside the frame ...you can fix this using position:absolute;
One of the pages in my website is having an issue where the page is scrollable on x-position which results the content to be cutoff. Other pages on this website is fine except for this one. I've fiddled with the classes and margin but for some reason I can't get it right.
(Live preview on responsive mode [mobile phones]: http://hub.mymagic.my/idea/frontend/explore)
Need another eye for this. Any help is greatly appreciated.
using chrome's toggle device toolbar + inspect source code, i was able to trace this CSS line on frontend.css:
.cbp .cbp-item {
width: 350px;
...
...
...
}
It seems that this width is making the content to extend beyond the size of mobile browser thus making it appear to be scrollable. I guess you can play or override this value somewhere or replace it with max-width attribute.
I'm writing a javascript game and I'm having a bit of trouble trying to get my game work with the requestFullscreen feature. My game exists of a menu with a button (html5 button) to start the gameloop. But when I go in fullscreen, the menu goes to fullscreen, but the button that can start the gameloop, disappears. I was wondering if it's possible to still have html5 buttons on screen while being in canvas fullscreen mode.
Thanks in advance
Requesting full screen mode will make the element (and its children) full-screen. Anything else will be hidden.
As the canvas element can't have children you need to wrap it and the elements you want to see in a parent container, ie. a div element.
<div id="cover">
<canvas ... ></canvas>
<button ... >My button</button>
</div>
Now you can request full-screen mode on cover.
Note however: the full-screen API isn't final and do behave different from browser to browser. You may need to add specific CSS for each element for full-screen mode versus non-full-screen mode.
I have a strange problem, and I can't find the cause! I have the following webpage:
http://uk.translation-vocabulary.com/de-german
and the perceived width of the page is perhaps 300px greater than the width of the content. So a horizontal scrollbar is present even when the viewport is horizontally stretched to match the visible content.
I have been inspecting elements with Firebug, trying to find the culprit. No success so far.
This effect observed in Firefox, Safari, Chrome. Untested: IE.
Any help greatly appreciated!
Benjamin.
Two ways to diagnose the culprit.
Method A
Open the Chrome dev tools in the Elements tab.
Expand all elements under HTML by hovering over the triangle on the left, then Ctrl+Alt click (Windows) or Option click (Mac).
Hover your mouse over each element and see if it highlights inside the area on the webpage making it too wide.
Method B
Open the Chrome dev tools then hit Esc to open the console.
Paste in this code and hit Enter.
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
This will find all the elements in the page overhanging. Thanks to Chris Coyier https://css-tricks.com/findingfixing-unintended-body-overflow/
Your facebook button is causing this problem (removing the button makes the problem go away).
The facebook iframe has its width set to 575px via the style attribute, which is causing the page to be wider than 100%.
Note that you can add the CSS rule html,body{overflow-x: hidden;} to mask the problem, but instead, you should really fix that button.
If you go on to my website, lookaroundyou.net and click on USA (which is where there are more video's than anywhere else on the site), the websites layout changes completely.
Does anyone have an idea as to why this happens?
I don't want to visit your site if it's crashing Firefox, but if the problem is indeed due to more content causing a scrollbar to show up and thus changing your page width, one easy way to sort that is to always display a scrollbar (it will be disabled if there is not extra content below). In this way, the width of the page will be the same regardless of length.
<style type="text/css">
html { overflow-y: scroll; }
</style>
I'm sure there's some other non-standard setting with IE that will do the same; that's left as an exercise for you.
It's causing a scrollbar because there are more videos.
I'm using chrome and I don't see any difference other than the page shifts when the scrollbar on the right appears.....