I would like to make an HTML element fullscreen (a div), and have the pointer remain hidden.
This would seem straightforward (set cursor:none on the div when it becomes fullscreen), but it is not working correctly across browsers.
The snippet below works fine for Firefox, but in chrome 56/ Mac OSX, the mouse pointer reappears after some time (usually within 1-60 seconds).
Is there a reliable cross-browser way to hide the mouse pointer while fullscreen?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fullscreen mouse pointer</title>
<style>
.is-fullscreen {
cursor: none;
width: 100%;
height: 100%;;
background-color: white;
}
</style>
</head>
<body>
<div id="gofull">
FULLSCREEN AREA
</div>
<button onclick="makeFS()">Make fullscreen</button>
<script>
// Button to make a div fullscreen and add relevant style in that case
function makeFS() {
// Get FS element, add class, and go fullscreen
var el = document.getElementById("gofull");
el.classList.add('is-fullscreen');
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
console.log('Your browser does not appear to support fullscreen rendering.');
}
}
</script>
</body>
</html>
Other notes
I have tried setting cursor:none on a different element than what gets made fullscreen (such as a child div), but this also did not help.
The pointer lock API seems like it would be massive overkill, and we'd rather not have to request an additional user permission for what seems like it should be simple to do in HTML/CSS.
Browser bug references
Only relevant browser bugs seemed video-related. This happens without video- just a static unchanging div.
Chrome fullscreen API bugs
Chrome browser fullscreen bugs
Compared FF 51 and Chrome 56 on Mac OS X.
1) The cursor can be any image you want it to be, using the declaration:
cursor: url([URI]), auto;
2) In base-64 encoding, a transparent single-pixel gif has the following Data URI:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
Putting these two together, we can turn the cursor into a transparent single-pixel gif when it hovers over any given element:
Working Example:
div {
width: 100px;
height: 100px;
background-color: rgb(255,0,0);
cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), auto;
}
<div></div>
Related
I have a div with display:none as style attribute value. In css, a background image url is set for this div. I simply don't want the request for the image to be fired until the div is visible later through some JS code. In Firefox , the network tab shows that the request is not issued which is as expected. But in Chrome developer tools I found that the request for the image is actually fired after the DOMContentLoaded event. What could be the possible reason of different behaviors with hidden elements in these two different browsers ?
Markup:
<html>
<head>
<title></title>
<style type="text/css">
.remoteAudioSoundButton{
background: url("http://ourserverurl/images/image_lady.png");
width: 200px;
height: 200px;
border: 2px black;
}
</style>
</head>
<body >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton' style="display:none"></div>
<script type="text/javascript">
window.onload = function(){
console.log("inside onload");
};
</script>
</body>
</html>
Screenshots:
Chrome:
Firefox:
Why not add the background to a specific class? This way the image will only be loaded when the specific class is added to the element.
$(function(){
$('button').click(function() {
$('.remoteAudioSoundButton').toggleClass('visible');
});
});
.remoteAudioSoundButton{
display: none;
width: 200px;
height: 200px;
border: 2px black;
}
.visible {
background: url("http://ourserverurl/images/image_lady.png");
display: block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='remoteAudioSoundButton'></div>
<button>Toggle Class</button>
Here is documentation of different browser behavior:
http://justinmarsan.com/hidden-elements-and-http-requests/
Which says:
Chrome and Safari (WebKit)
WebKit downloads the file every time except when a background is
applied through a non-matching media-query. Firefox
Firefox won’t download the image called with background image if the
styles are hidden but they will still download assets from img tags.
Opera
Like Firefox does, Opera won’t load useless background-images.
Internet Explorer
IE, like WebKit will download background-images even if they have
display: none;
So to answer the question of why:
A quick argument for either side:
Firefox - Don't load until the content is visible:
No reason to load something not being viewed, improve page load time.
Webkit - Load the image on pageload: So, perhaps JavaScript decides to make the element visible later, the transition might be choppy if the image is not preloaded, and any other number of arguments for preloading images.
And a brief discussion of the topic:
http://robertnyman.com/2010/03/11/do-hidden-elements-load-background-images/
Browsers may load images that are related to elements that have display:none; set.
I have worked around this before by using a technique like this snippet:
document.getElementById('showKitty').addEventListener('click', function() {
var kitty = document.getElementById('kitty');
kitty.src = "https://placekitten.com/g/200/300";
kitty.classList.toggle('hidden');
});
.hidden {
display:none;
}
<h1>What Can JavaScript Do?</h1>
<img id="kitty" class="hidden">
<button id="showKitty">Show kitten</button>
On Android browser, when I click an element which handler replaces (part of) the page contents, any new element that is beneath the exact spot where I clicked is considered in hover state even though I released the click.
Note that only the hover CSS state is concerned, focus or active don't exhibit this behaviour.
Here is some minimal example code that reproduces my issue:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function toButton() {
document.getElementById("body").innerHTML =
'<input type="button" onclick="toLink()" value="Click me!">';
}
function toLink() {
document.getElementById("body").innerHTML =
'Click me!';
}
</script>
<style type="text/css">
body * { font-size: 400%; }
input { color: black; }
input:hover { color: red; }
a { color: blue; }
a:hover { color: red; }
</style>
</head>
<body id="body">
<script type="text/javascript">toButton();</script>
</body></html>
And some screenshots to make it easier to understand:
The 2. Hovering is perfectly normal, but as you can see 3. After click believes the link is still being hovered, when in reality it is not and should display as 4. Expected.
Note that if the button's text is made wider (eg. Click on my very left side to trigger the problem), clicking on Click on will trigger the problem while clicking on very left side to trigger the problem will not.
Is there a way to force the browser to recompute the hover state, or otherwise cancel it? If possible it should not modify a specific element (ie. the link, in my example) but act on a global level so that every element of the page is protected from that bug (I have lots of elements that are impacted, and adding handlers to every single one would be a real pain so I really need a page-wide solution).
Despite my example not using it in order to isolate the problem, I actually use jQuery so solutions using it are welcome.
I am testing this on Samsung Galaxy Note 10.1 / Android 4.1, if that's important.
For those of you who don't know, native full screen is where your browser takes up your entire computer screen, like in this example. I have made a full screen JavaScript application that runs, but by default Chrome and Firefox open into native full screen differently.
Firefox stretches the object so that it takes up the entire screen(height 100%, width 100%) while Chrome puts the object in front of a black background with its natural proportions.
I would like Firefox to act like the full screen on Chrome. I feel that this is solved with a simple CSS change but I don't know CSS all that well.
This is what I've tried so far:
<!DOCTYPE html>
<html>
<head>
<style>
.fsElement:-webkit-full-screen {
//this is the CSS for Chrome's fullscreen page
}
.fsElement:-moz-full-screen {
//this is the CSS for Firefox's fullscreen page
}
</style>
</head>
<body>
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="fsElement" height="375" width="500" src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" id="kittenPic"></img>
<br />
<button onclick="goFullscreen('kittenPic'); return false">Click Me To Go Fullscreen!</button>
</body>
</html>
Thanks in advance!
This is from the MDN: Using full screen mode
Presentation differences
It's worth noting a key difference here between the Gecko and WebKit
implementations at this time: Gecko automatically adds CSS rules to
the element to stretch it to fill the screen: "width: 100%; height:
100%". WebKit doesn't do this; instead, it centers the fullscreen
element at the same size in a screen that's otherwise black. To get
the same fullscreen behavior in WebKit, you need to add your own
"width: 100%; height: 100%;" CSS rules to the element yourself:
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
On the other hand, if you're trying to emulate WebKit's behavior on
Gecko, you need to place the element you want to present inside
another element, which you'll make fullscreen instead, and use CSS
rules to adjust the inner element to match the appearance you want.
A working example on jsfiddle (edit). Most of the CSS is for centering the element, adapted from this SO answer, you can shed out most of the CSS and two layers of div if you don't need centering.
Ok, I am using JavaScript to control an image swap so that when someone clicks on the image, it changes to a "lit" version of the image. The code to do this within the link tag is onclick="changeto('wdl')" and I added onmouseover="changeto('wdl')" to the link so when you hover over it, it lights up as well.
Now, where the problem comes in, naturally, is when I added onmouseout="changeto('wdd')" which is the unlit version of the image. What happens here of course is when I hover over it, it lights up, when I move the cursor away it changes to the non lit version. But when you click on it it changes the image to the lit version as it should, but because of the onmouseout command, it changes to the unlit version.
What I want is to be able to hover on the image and have it light up. If you click it and move the mouse away it stays lit, but if you don't click it and move the mouse away it stays on the "off" image.
Any help appreciated, I am stumped here. I was going to try to use some sort of if (!this) type of thing, but I honestly just don't know.
I see two solutions:
1. Declare separate CSS class for onclick event that is defined below wdd (or uses !important.
2. Use a flag variable which is set to true in onclick and then tested in onmouseout:
onclick="changeto('wdl');flag=true;"
onmouseout="if (!flag) changeto('wdd')"
Here is a simple example with CSS and Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<style>
#whl {
background: #e0e0ff;
line-height: 150px;
text-align: center;
width: 150px;
}
#wdl {
background: #e0ffe0;
line-height: 150px;
text-align: center;
width: 150px;
}
#whl:hover {
background: #ffcccc;
}
#wdl:hover {
background: #ffcccc;
}
#whl.selected {
background: #ffcccc;
}
#wdl.selected {
background: #ffcccc;
}
</style>
<script>
function doClick(el) {
document.getElementById("whl").className = document.getElementById("whl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
document.getElementById("wdl").className = document.getElementById("wdl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
el.className += "selected";
}
</script>
</head>
<body>
<div id="whl" onclick="doClick(this);">WHL</div>
<div id="wdl" onclick="doClick(this);">WDL</div>
</body>
</html>
It works with colours and in your case you will have to replace colours with background images (in the CSS).
You should use a combination of CSS and javascript. Look up css hover to achieve the mouseover function and do the click part from js
CSS Hover on w3schools http://www.w3schools.com/cssref/sel_hover.asp
My ultimate aim is to have an inline div on my page which horizontally scrolls natively (using -webkit-overflow-scrolling: touch) that also snaps.
I can achieve this without -webkit-overflow-scrolling because I have access to the ontouchend event, so I can calculate my snap when that happens, however, to achieve the best possible UX for this feature, I want to use native-like scrolling on this element.
The problem with using -webkit-overflow-scrolling is that using a flick/some force, the div will continue to scroll for a bit after you've taken your finger off (i.e. AFTER ontouchend has fired); which means my snap calculates before the scrolling is finished.
Having spent a long time trying to find ways round, I have had no success yet.
In the entire page context, safari fires the onscroll event when a scroll is finished. My question is, is it possible to have this event fire within the context of an element? i.e. have onscroll fire inside <div id="slideShow">?
If not, is it possible to either
(a) Access velocity of a ontouchmove for example, so I could calculate when to run the snap?
or
(b) Emulate -webkit-overflow-scroll: touch (the elasticity and velocity effects).
NOTE: For the sake of example, using iPad w/ iOS5.
The scroll event gets fired on every scrolling container separately, and on iOS only after scrolling has stopped and is complete. You can simply listen for the scroll event on your container.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Touch Scrolling</title>
<style>
body {
font-size: 15em;
}
#outer {
height: 1200px;
width: 300px;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
#inner {
width: 600px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var list = document.getElementById("outer");
list.addEventListener("scroll", function(event) {
alert("Scroll has ended for element with ID '" + event.currentTarget.id + "'");
});
}, false);
</script>
</head>
<body>
<div id="outer">
<div id="inner">Some text. And more.</div>
</div>
</body>
</html>
You will see the alert only when you have scrolled the text horizontally, not when the out div has been scrolled.