CODEWITHSUNDEEP
cssgwt
willygroup
willygroup

Reputation: 323

GWT and css: Add dynamic and global css rule (aka: prevent selection and cursor)

I'm building a machine GUI with GWT.

The machine has a touch screen panel, so I don't need to view cursor and I don't want that the selection enabled.

The first solution was to put that in css file:

* {
    /* Hide cursor */
    cursor: none;
    /* Prevent selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

And that works, but (there is always a but...) I need to access this GUI from a remote browser.

In this pc I haven't a touch panel but instead a normal keyboard.

So I would that the previous global style was not applied.

There is a way to obtain that from GWT? I need to use php instead?

Thanks!

Upvotes: 0

Views: 376

Answers (2)

Abhijith Nagaraja
Abhijith Nagaraja

Reputation: 3380

You can use JSNI to know whether it is a touch device or not.

if (isTouchDevice())
{
         panel.addStyleName("cursorClass");
}
else
{
         panel.addStyleName("noCursorClass");
}

Your JSNI class will be

private native boolean isTouchDevice() /*-{
return !!('ontouchstart' in window) // works on most browsers 
      || !!('onmsgesturechange' in window); // works on ie10
}-*/;

Tested the above Javascript in the web developer and it works just fine for me.

Your css classes will be

.cursorClass{
cursor : pointer;
}
.noCursorClass{
cursor : none;
}

Upvotes: 0

Charles
Charles

Reputation: 437

Have you tried css targeting for different screen sizes, i.e if the touchscreen panel is a specific size, then you can use @mediascreen query to target the touchscreen only, and then proceed to hiding the cursor.

Upvotes: 2

Related Questions