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.
Related
My following app has a list of winners. It all works great on the desktop, but as soon as I resize to the mobile size, The winners don't seem to be clickable anymore.
https://religious-freedom.herokuapp.com/
I think some part of the css is not working very well.
I was my first big app, so all the codes are a little messy.
Can someone give me an insight on what is causing it?
Thanks
Your link elements are being covered by other div elements. I added the clearfix class to the following div and it "uncovered" your links.
<div class="silver col-lg-4 col-md-4 clearfix"...
See http://getbootstrap.com/css/#helper-classes-clearfix for more about clearfix class. It is common to add
It is very helpful to use the browser devtools to examine your page. As you mouse over elements in the devtools window pane it will show where your divs are positioned and if they may be unintentionally overlapping with other content.
I know why now. Check your html, the link is not properly included in your picture. If you move the pointer, it only works when you click the anchor tag not the image. So change your code, make sure it works for img clicking.
<a href="http://religiousfreedomandbusiness.org/global-awards/don-larson.html" target="_top">
<img src="http://s3.amazonaws.com/assets.my-bucket/candidates/avatars/000/000/006/medium/Don-Larson.jpg?1470198723">
<img src="../images/silver.png" class="medalsilver">
</a>
I'm working on jQuery mobile. I have an overlay which pops out on tap of a button in the header. The overlay appears close to the button.
<div data-role="header" data-position="fixed" data-theme="a" data-tap-toggle="false">
<h1>Photos</h1>
<a href="#photomenu" data-icon="gear" data-iconpos="notext"
data-rel="popup" data-transition="slidedown"></a>
</div>
But on orientation change the overlay appears at the center.
How to retain the position of the overlay on orientation change? Any help is appreciated.
By default, popups open centered vertically and horizontally over the thing you clicked (the origin) which is good for popups used as tooltips or menus. The framework also applies some basic collision detection rules to ensure that the popup will appear on-screen so the ultimate position may not always be centered over the origin.
For situations like a dialog or lightbox where the popup should appear centered within the window instead of over the origin, add the data-position-to attribute to the link and specify a value of window.
It's also possible to specify any valid selector as the value of position-to in addition to origin and window. For example, if you add data-position-to="#myElement" the popup will be positioned over the element with the id myElement.
Position to window
<div data-role="popup" id="positionWindow">
<p>I am positioned to the window.</p>
</div>
I have also made you a live jsfiddle example: http://jsfiddle.net/Gajotres/8xCYB/
I have a video element in an HTML5 document. There is a control panel div that slides out dynamically to partially cover the video element.
This works fine in Firefox and IE9. However, in Google Chrome, any part of any link that lies over the Video element, is not clickable. The pointer doesn't change when you mouseover the link, and clicking the link has no effect.
The problem is fixed if I set the Video element to not display controls. But oddly, if the Video element starts with controls enabled, and then I remove the Controls attribute dynamically, the links are unclickable. I've tried using both jQuery and regular JavaScript.
At present, I don't need the controls to be shown, so my page is ok. But I'd like to understand the problem better (plus, if somebody else has the same problem, perhaps this post will help them?). Does naybody know, is there some difference to how Chrome handles the video element, compared to IE9 and FF?
I've added z-index to both overlapping elements in your code, and it works for me ok. For example, CSS for first div is changed to:
div.first {
left: 0;
top: 0;
z-index: 255;
}
And first video is changed to:
<video controls style="z-index:0">
I can click the link inside the first div, including that part floating over video element.
I am wondering it its possible to have a flash file contained in a <div> that covers the entire screen. I have already done that but my question is...
Can you still have the flash content in the <div> and have it transparent and use the html buttons below the <div>?
I would like to keep the flash layer active all the time but how can I use the buttons below? I can't even copy or highlight text.
Thanks for your time.
If the div covers the whole screen are the buttons below the screen and no longer visible or did you place the buttons so they are not below the div but are fixed in place at the bottom of the screen? In which case you should be able to give them a higher z-index than the div containing the flash. That way they are on top of the flash div and should be clickable.
<div id="flash" style="z-index:1;">
<div id="buttons" style="position:fixed; bottom:0px; z-index:4;">
You can also make the flash div clickable to show/hide the buttons that you've placed with fixed position in case the flash really does take up the whole screen. No need to make the flash transparent.
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.