The draggable attribute seems to have no effect in browsers on touch devices.
<div draggable="true">Draggable Box</div>
https://jsfiddle.net/41z5uz4t/
With a mouse, I can drag this element around. If I try to drag it around on my touch screen (Windows 10, Chrome), regular touch events, such as navigating back, seem to take precedence. I've tried holding it, then dragging. This doesn't work either.
Is there a polyfill for fixing this behavior in Chrome? Am I supposed to be doing something different?
Draggable attribute is "experimental technology" it is currently not supported on any of the major mobile browsers.
If you wnat to make an Drag'n'Drop UI you should use some JS library for that, like, greensock nice library and Touchpunch with jQuery UI and there are much more just search on the web.
I'll just make that clear the draggable attribute is not supported today by the major mobile browsers.
EDIT:
Seems that it is bug in Chrome with the touch screen devices like yours I found a solution that maybe could help you:
Go to chrome://flags and change the "Enable Touch Events" setting from "Automatic" to "Enable". The current version of Chrome apparently does not detect the touch capabilities of Windows 10.
found here.
Still, if that is an experimental attribute you better use an js library for that action.
You can use jQuery to achieve this effect. Here is a guide on how to do that:
http://touchpunch.furf.com/
Put this code before the line with the draggable object:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
And put this after the line with the draggable object:
<script>$('#draggablebox').draggable();</script>, assuming the div has the id draggablebox.
Related
I was wondering if it is possible to hide the toolbar when in full screen using CSS. I've tried searching StackOverflow for some answer but sadly with no success.
Basically, go from this:
Too this:
No, you cannot affect the host application interface using CSS. There is a Javascript solution, however.
document.documentElement.webkitRequestFullScreen(); Be aware that you should also track keyboard actions like ESC, and provide a button for users to exit this experience as well.
Here's the documentation from Mozilla. Also according to the Can I Use database, Desktop Safari has only partial support and iOS Safari has NO support so how well this works will vary based on the browser.
I should point out that this isn't really the same as Kiosk mode. Kiosk mode can be used to block access from other applications/websites. This DOES NOT do that.
I've tried the traditional methods and it works as a webpage in Chrome, but not when I'm using the page as a packaged app.
I'm just doing this example from W3 for testing purposes since it's very simple.
http://www.w3schools.com/html/html5_draganddrop.asp
I was able to get this to work by utilizing the -webkit-user-drag CSS property on the element (in my case an image). This allowed the dragging in the app window itself.
img {
-webkit-user-drag: auto;
}
I then put event listeners for all the other javascript functions (inline javascript not allowed in Chrome Apps) that can be seen at the w3 link in the description.
Now the drag and drop acts like it does on a regular webpage.
this is not supported in Chrome Android, see in caniuse: http://caniuse.com/#search=drag
I need to hide the full screen button of the video tag in HTML5.
Is there any way to achieve it ?
Thanks.
I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure.
Simple webkit browser (chrome on windows) specific solution
The following solution is webkit specific
video::-webkit-media-controls-fullscreen-button {
display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
Here is the fiddle for it.
Warning:
This will not work on browsers who have a rendering engine other than webkit e.g. Firefox or Internet Explorer, or obsolete versions of Opera that had Blink/Presto.
This may not work with implementations of webkit browsers in Operating systems other than windows e.g. Safari on macOS.
Update:
After multiple readers complained that the aforementioned solution did not work for certain browsers, I'm updating the answer.
Taking care of Vendor specific implementations:
The above solution is -webkit- browser specific and was tested in Chrome on Windows.
The implementation of shadow DOM hasn't been standardized, and therefore, may vary from one browser vendor to another.
Almost all browsers today have great developer tools, but some features are intentionally locked, but can be opened with a little effort, for instance, in Firefox most such configurations can be accessed in the about:config page.
Developers are advised to unlock the shadow DOM features in their browser.
Then, they can inspect the <video> component
How to enable shadow DOM selection in Chrome
Go to Chrome > Developer Tools > Settings (gear icon)
Under Elements look for Show user agent shadow DOM option
Check (select) the box
You'll be able to inspect the underlying shadow DOM
Observe their respective styling
You will notice that they're similar to pseudo class selectors
Some unsolicited free advise for Hiding the full screen button of the video tag in HTML5
Finding the solution can be as easy as writing CSS with pseudo class selectors
But like every other CSS, it might require a lot of trial-n-error
And you might undergo a lot of frustration to make it work
But always remember, it's worth it.
Additionally, as #paulitto suggests, DOM methods can be implemented after removing controls attribute from <video> element. Refer this tutorial for more.
You need just to write this code in your css:
video::-webkit-media-controls-fullscreen-button {
display: none;
}
And the fulscreen button will hide
You can disable the fullscreen button using the controlsList="nofullscreen" attribute
Supported Browsers: Chrome, Edge, Edge Beta. It doesn't work with Firefox.
Refer the fiddle
Attribute values:
controlsList="nodownload nofullscreen noremoteplayback"
You must have controls attribute in <video> tag to get the features of controlsList.
Reference Page
I think you are not able to do that without hiding all the controls.
You can use its dom methods to implement your own controls and design them to look exactly the same as built in controls
Or you can also use external html5 video plugins to implement this
You can write your custom code for controls
eg. For changing video time use below code
document.getElementsByTagName('video')[0].currentTime=10;
Below link provides all necessary examples to do manual controls on video with javascript
HTML5 Video Events and API
I'm working on a search page and <datatag> tag seems to be a great addition. Unfortunately I can't make it work in Chrome (it works in Firefox) and most of my users use Chrome.
Does anyone know what is the Chrome way of auto-completing a search box?
Datalst landed in Chrome Canary
So it will probably work in Chrome 20.
JQuery UI Autocomplete plugin, easy to use, and very much effective :) visit JQuery UI Autocomplete
If the <datalist> element isn't supported in the browser yet (which it appears is not the case for the current Chrome), then you will need to use one of the myriad of JavaScript/jQuery based autocomplete polyfills, like jQuery UI Autocomplete.
Is there an equivalent to -webkit-tap-highlight-color for Windows Phone 7 (Mango)? I'm writing a mobile site, and I'd like it to display the same way across all browsers, if possible.
I've tried tap-highlight-color and -ms-tap-highlight-color, neither worked.
I know this is late to answer, but I have an update.
The answer is still no, unfortunately.
However, IE10 on WP8 allows:
<meta name="msapplication-tap-highlight" content="no"/>
You can only disable the tap color, and it seems that you cannot customize the color.
Unfortunately, there is no such equivalent Microsoft propritary extension at this time for WP7. If you take a look at the Microsoft list of attributes, you will see an absence of anything even touch related.
On the JavaScript side, the IE blog just about that IE 10 will specify the pressure of a touch. This might be the closest that we can get for the time being. For now, if you really wanted to do it with JavaScript you would have to keep track of the time that the mouse was down (what a pain). The events you will need are MouseDown, MouseMove, and MouseUp.
Recommendation: If I were you I would go with progressive enhancement and not support it for WP7 at this time. If it's a critical part of your app though, you may have to play around a bit with JavaScript to see if you can get something workable.
You can disable tap highlight in IE 10 on specific element with CSS
-ms-touch-action: none;
In windows phone 8.1 the meta tag did not worked (PhoneGap App).
<meta name="msapplication-tap-highlight" content="no"/>
But this in the CSS file worked for me
body{
-ms-user-select: none
}
The (-webkit-)tap-highlight property is only supported in Safari on iOS (iPhone/iPad) and other browsers that use webkit.
If you're really desperate to display the tap highlight color you could use CSS' :focus selector which is the closest solution to your problem or try to achieve the same behavior with javascript (jQuery).