0

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?

Geoffrey Lalloué
  • 1,456
  • 1
  • 20
  • 43

1 Answers1

0

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.

Kraig Walker
  • 812
  • 13
  • 25
  • I tried to set 'unselectable' to class attribute but i forgot to set it on my question. I modified it. So, if i add this css to my 'fa-image-surface', images are not displayed. And IE version on windows phone 8.1 is IE 11, so it's supposed to work (and it works for me right now, excepted this selection case). – Geoffrey Lalloué Nov 03 '14 at 10:34
  • I've just tried replicating the problem you've described within Famo.us University (Angular section) and I found that the fa-image-surface requires an end Trailing "solidus's" are not permitted. Try adding the .unselectable class to your fa-image-surface, and add a closing tag. – Kraig Walker Nov 03 '14 at 10:55
  • You're right about closing fa-image-surface tag. But I always have the same problem. BUT, in debug window i have this error : Syntax Error: Token 'unselectable' is an unexpected token at column 18 of the expression [hexagon-tile-img unselectable] starting at [unselectable] It's strange because if i remove 'hexagon-tile-img' classname, everything work. Is it forbiden to have more than 2 class name in fa-surface-image? – Geoffrey Lalloué Nov 03 '14 at 13:15
  • That's interesting. Of course, I never tried it with your 'hexagon-tile-img class' as I didn't have anything for that. Try using `ng-class` in the place of `class`. It should be interpreted by Angular the same way as an html class attribute. Famous/Angular doesn't just create DOM elements it's really creating a famo.us renderspec which then famo.us handles, so it's quite possible Famous was expecting something like an array rather than the usual attribute value from `class` - something which will need ironed out in future versions perhaps? – Kraig Walker Nov 03 '14 at 13:34
  • Actually 'hexagon-tile-img' is just an empty class. And i tried with ng-class but i have the same problem. I'll fix my problem with putting 'unselectable' class content in 'hexagon-tile-img' class. Thanks @Kraig Walker. – Geoffrey Lalloué Nov 03 '14 at 14:02