Does anyone know of a way to make an 'fa-image' not draggable and not selectable, at the same time?
I have this surface displayed in 'fa-container-surface' and want to disable image selection because of scroll and drag and drop doesn't work if popup appear to save image.
<fa-image-surface fa-image-url="{{tile.image}}"
fa-size="[60, 40]"
class="hexagon-tile-img unselectable">
</fa-image-surface>
I tried to set this css :
.unselectable {
/* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
/* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
-webkit-user-select: none;
-ms-user-select: none; /* From IE10 only */
user-select: none; /* Not valid CSS yet, as of July 2012 */
-webkit-user-drag: none; /* Prevents dragging of images/divs etc */
user-drag: none;
}
But this doesn't work on chrome 38 webbrowser or Windows Phone 8.1 browser. Image disappear because of next error:
Syntax Error: Token 'unselectable' is an unexpected token at column 18 of the expression [hexagon-tile-img unselectable] starting at [unselectable]
In HTML, I know that we can set "unselectable='on'" or "draggable='false'" on 'img', but if I try to do it on 'fa-image-surface' attributes are not considered.
Does anyone have an idea to do it in famo.us/Angular project?
The only CSS class that's being applied to your hexagon-tile-img- try adding unselectable to the class attribute, just to test that it will work correctly on img elements.
In your stylesheet, you could try using .unselectable > img to basically apply the unelectable rules to the child img elements in your container.
Also, don't expect famo.us to work on IE at the moment as IE hasn't implemented preserve-3d, which is vital to applying 3d transforms to child elements.
Related
I have a label element which, along with its corresponding input type="file", also contains an img sandwiched between two span elements.
The input itself is declared as display:none, allowing the label to do the job of launching the File Upload box when any element inside it is clicked. This, of course, works swimmingly in every major browser except IE. In IE, clicking anywhere inside the label other than the img will launch the File Upload box, but clicking the img will not...
You can see this issue replicated by opening this fiddle in IE alongside any other browser.
Strangely, the issue can be isolated down to the presence of the form. For some reason when the form wrapper is removed the label functions correctly. I obviously can't use this as a solution though. Thoughts?
It is a known bug in IE you can see it in Microsoft Connect
To solve simply add pointer-events: none; to the <img>
It can cause some browsers to highlight the image when being clicked. To avoid that make the image unselectable.
The full solution is:
.selector-for-image {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
See updated JSFiddle
For a task, the product owner wants to disable most HTML elements from being highlighted via Ctrl-A. The way I'm doing this is to set
body {
-{$prefix}-user-select: none;
user-select: none;
}
div.element-to-select {
-{$prefix}-user-select: all;
user-select: all;
}
I've also made up a codepen at http://codepen.io/daredevil82/pen/zxPzbJ to demonstrate. In this example, when mouse focus is on the white area, a Ctrl-A press will have the Select text highlighted but the No Select text will remain un-highlighted in Firefox 35+ and Chrome, but both elements will not be selected in IE 11.
Is there a way around this behavior for IE?
The Working Draft User Interface for CSS3 defined user-select like this:
This property is not inherited, but it does affect children in the
same way that display: none does, it limits it. That is if an element
is user-select: none, it doesn't matter what the user-select value
is of its children, the element's contents or it's childrens contents
cannot be selected.
Firefox implemented -moz-user-select: none according to that draft; and also implemented -moz-user-select: -moz-none, which allowed selection to be re-enabled on sub-elements using -moz-user-select: text.
However, starting with Firefox 21, -moz-user-select: none behaves like -moz-user-select: -moz-none, due to Bug 816298:
Our -moz-user-select: none behaves as proposed in the css3-userint TR
but WebKit, IE, and Opera's -XXX-user-select: none behave like
-moz-user-select: -moz-none.
Not sure if the bug is wrong and IE also followed the proposed spec, or if IE changed the behavior later. But now IE seems to be the only major browser which follows it.
However, you can't rely on that draft. The User interface for CSS3 module has been superseded by CSS Basic User Interface Module Level 3 (CSS3 UI), which doesn't include user-select.
Therefore, since user-select is no longer standard, implementators won't probably change their implementations in order to have a common behavior among different browsers.
If you visit this page on iOS, you will not be able to select any text. This page doesn't contain any javascript or selection blocking code, actually if you open it on desktop browser everything will work.
I'm trying to implement EPUB3 reader on iOS and this page was generated with WYSIWYG EPUB3 editor.
So the problem is: How can I enable selection on this page without changing it visual layout?
And really important thing is: I'm hoping for solution which can be automated. So that I can preprocess this html files before opening in my reader.
Update: Selection starts working only when zoomed to about 400%.
Here is a cross-browser list of styles for non-selectable text:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
You can also set them to select text as well:
-webkit-touch-callout: default;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
The -webkit-touch-callout property allows you to dictate what does or doesn’t happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up.
The -khtml prefix predates the -webkit prefix and provides support for Safari 2.0-
The -moz prefix is defined twice with the value none and the value -moz-none on purpose. Using -moz-none rather than none prevents elements and sub-elements from being selectable. However some older browsers like Netscape won’t recognize moz-none so it’s still necessary to define none for them.
The -o prefix isn't supported but I have come across recommendations to include it for future proofing and it doesn't hurt unless minification is critical.
Non-prefixed property should be last in line.
The computed height of #div8 is 0. Changing this to 100% fixes the issue for me.
drop
<meta charset="UTF-8" />
into the head
Do u try this please :
body {
zoom: 1;
margin: 0;
padding: 0;
width: 512px;
height: 768px;
-webkit-user-select: text; // THIS ALLOW SELECT TEXT ON IOS
}
-webkit-user-select, which are also value : "none", "all", "element"
I have styled my select boxes, but i can still see the arrow in my select box in firefox, i have set css so:
background:transparent;
content:'';
apperiance:none;
Thats work on Chrome, but on Firefox i still see default arrow, is possible to delete it also on Firefox?
This should remove the arrow in selects in Chrome, Firefox, Safari, and IE10.
.poa-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
}
.poa-select::-ms-expand {
display: none;
}
Ideas taken from here and here.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
The trick that works for me is to make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
The answer from here : How to remove the arrow from a tag in Firefox
Use the pointer-events property.
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]
Here is a working FIDDLE using this method.
Also, in this SO answer I discussed this and another method in greater detail.
I require one HTML element (Label) on my page to be unselectable for IE ... currently I have tried
Unselectable=on
onselectreturn=false;
none of which is helping me out.
For Firefox and Chrome i have set the following CSS property which are working absolutely fine ... but the problem as always with the IE.
CSS properties you have set:
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
is there any alternative or IE-hack?
An answer on Stack Overflow has helped me out but not for IE.
<label unselectable="on"> should work for IE in the HTML. If applying it from javascript you MUST use setAttribute: labelEl.setAttribute("unselectable","on"). labelEl.unselectable = "on" does not work (tested in IE9).
Note that the "unselectable" attribute only affects text directly inside the element, not within its children - you need to set unselectable on them also, if that's the effect you want.
In IE8 there are two ways to make an element unselectable:
1.) myElement.unselectable = "on"; // Does not work on body elements
2.) myElement.onselectstart = function (){ return false; }
Once an element is unselectable, users cannot select from within that element.
However, they are still able to select either the text or the box of the element
by dragging into it from within another element which is not unselectable.
I have tried to work around this by cancelling various events on myElement (ondragenter, oncontrolselect, onmouseenter, onselectionchange...), it didn't work.
All this applies only to IE8
Set unselectable to off and it should work.
<label unselectable="off">Something</label>
http://jsfiddle.net/sWguE/1/
This also works for me
<label onselect="return false">Something</label>
http://jsfiddle.net/sWguE/3/