When playing html5 video in picture in picture mode it will remember its last position where it played last time
Is there a way to force the picture in picture window to appear at some specific position?
CSS pseudo-class ":picture-in-picture" does not have any effect , is this working?
found only this example
https://developer.mozilla.org/en-US/docs/Web/CSS/:picture-in-picture
and it is not very clear with todo with it. My Idea tells that ":picture-in-picture" is "Unknown pseudo selector"
the issue we are facing is that the mouse cursor disappears when a user is using the app in a safari on MAC. The app UI is in flex 4actionscript running in the flash player.
So whenever the cursor hovers over an HDividedBox draggable divider the cursor changes and on returning to the advanced data grid it disappears.
We thought of replacing that with a custom cursor written in javascript, which would have been worked, but we also have an iframe embedded in the flash movie.
The custom javascript cursor listens for mousemove in the parent div holding the swf and updates its position however the JS script is not usable as the user hovers over an iframe and it does not bubble up the mouse move event.
Looking for an alternate solution now.
at the website I'm working on euroworker.no, I have a ton of CSS rollovers, that only load when rolled over, is there a way to force load these onLoad so that they don't flash when rolled over the first time? It makes the site look broken. I could use a <body onLoad...> but am not sure how to implement it.
Thanks.
Sure, just use image sprites. In short, this means you put both states of an image (default and hover) in one image file. Upon hover, you then shift the background-position of the element in question.
Does css hover work on mobile devices? I have a css hover class which works fine on a regular web browser, but doesn't work on mobile browsers.
The :hover pseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointing and selecting/activating. Usually on mobile devices with a touch interface you don't have the former, only the latter. Also some pen interfaces only allow activating, not pointing.
The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e. g., a pen device).
—W3C: CSS 2.1: Selectors, dynamic pseudo-classes
So, to answer your question: It depends on the device but likely no. And don't rely on it. With touch-screen devices quickly gaining in popularity you'll lose the entirety of pointing-only events.
Sigh. It seems like no-one answering this question actually tried it on a real device. In many cases it does work. The first click acts as a hover.
Some more info here: http://designshack.net/articles/css/are-hover-events-extinct/
What does the questioner mean by "Does css hover work on mobile devices?"?
He obviously doesn't mean it literally, because there is no such thing as hover on mobile devices so it cannot work.
If he means "On mobile devices if I tap on an object with a hover style does anything happen?" the answer is Yes, but what happens varies with the device/browser.
Specifically on iPhone/Safari and Android the response is as if you have written an OnClick() event handler with the style change in it, and this persists until you tap on another object. On Windows phone the style change occurs while your finger is pressed down on the phone and then reverts when you release it.
You can check your device at the test site I set up at davidleader.net/mobiledemo.html.
Not unless the device can detect when someone is hovering their finger over the screen, about to tap. :)
It depends upon the browser used in the mobile device. Refer to Quirks Mode for mobile devices and see if your browser / platform will implement it.
From my own experience, it works fine on my iphone4, whatever is the browser (safari or chrome), but does not works properly on my nexus10 with chrome...
I used :hover to implement menu. When I say "it works", I mean that the first touch behaves like an hover on a desktop, and a second touch will behaves like a click.
When I say "it does not work", I mean that a touch behaves like a click directly...
I would say no, as you do not hover in a mobile interface. You can just press, if on touch screen. Otherwise you just move through links.
won't do its magic on touchscreen devices, but it does work on mobiles where the user navigates by using some arrow keys (or on amazon kindle)
also works for blackberry storm 1 devices as they have touch, and click events due to their suedo-tactile screens.
Yes, it has. if you don't believe, try it.
i) Write Hover Css on Codepen or other stack which you had Account.
ii) Save your work. [it easy to see if you add 'border-bottom: 1px dotted black']
iii) Open it on your Mobile, Tablet or whatever you want to prove. [which your pen save, mind is CodePen]
As result, you'll get the answer. Don't believe the theory much, just practice and prove it.
:hover works with the android default browser, but it is really tricky (for the user) to trigger the hover without triggering a click at the same time.
I would like to change the hotspot of a mouse pointer, which we've changed the icon using a .cur file, to be in the bottom right of the image, rather then the top left.
Pretty much like an inverted arrow cursor, the designers/boss have come up with a nice design which almost requires this.
Is it possible to change the hotspot of a mouse cursor on a web page?
I have not tested it, got it from developer.mozilla.org:
Support for the CSS3 syntax for cursor values got added in Gecko 1.8beta3; it therefore works in Firefox 1.5. It allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image. An example of the CSS3 syntax is:
cursor: url(foo.png) 4 12, auto;
Link to CCS3 cursor
It's not possible, and I'm glad - I think you'd only frustrate your users with this.
Edit: I was wrong - I didn't think this was possible - I still don't think you should do it though.
You can't. And as most people here I'd tell you to not do it even if you could...
However, I could imagine something like this for very specific cases like the page of some artist, or for a game cursor, or a sort of 3D-like map with the cursor pointing down. Now if you really need a special cursor for a media oriented site, as opposed to an information site, I'd hide the cursor, with a blank cursor file and use some Javascript to attach a floating image over the cursor so it "looks like" the hot spot is someplace else.
Of course your sites usability and compatibility will go way down, but the solution above is if you really need to take the creative liberty, and your users are open minded to this sort of stuff.