Expanding and Shrinking Panels through Touch in GWT

Question

Expanding and Shrinking Panels through Touch in GWT

I have created a flexible panel using GWT and found inspiration from the following post,

GWT resizable panel

To see a demo of this in action, visit my hosting on AppEngine:

I am seeking assistance in enabling touch events for resizing the Panel. I aim to make it work on iPad and Android Tablets as well, but so far, it's not functioning properly. On iPad, touching the Panel results in selecting the entire Panel. I have tried using the following CSS properties:

-webkit-user-select: none;
-webkit-touch-callout: none;

However, the issue persists. This same problem occurs with the VerticalSplitPanel in Roughian GWT Examples. You can find it here,

Any guidance or support would be greatly appreciated...!

html css ipad gwt touch

Answer 1

Answer №1

To manually remove the selected range, you can start by capturing the browser event and then proceed to eliminate all ranges from the DOM. After that, you can handle other events accordingly. Here is an example code snippet to achieve this:

var sel = window.getSelection();
var range = sel.getRangeAt(0);
sel.removeAllRanges();

Answer 2

To manually remove the selected range, you can start by capturing the browser event and then proceed to eliminate all ranges from the DOM. After that, you can handle other events accordingly. Here is an example code snippet to achieve this:

var sel = window.getSelection();
var range = sel.getRangeAt(0);
sel.removeAllRanges();

Answer 3

Answer №2

After some trial and error, I was able to solve the issue on my own. I simply incorporated touch events in a similar manner to how I included mouse events.

Here is the mapping I used:

MOUSE DOWN --- TOUCH START
MOUSE UP --- TOUCH END
MOUSE MOVE --- TOUCH MOVE
ON LOSE CAPTURE --- TOUCH CANCEL

Next, I made sure to add sink events to my touch events as well:

this.sinkEvents(Event.MOUSEEVENTS | Event.ONLOSECAPTURE | Event.TOUCHEVENTS | Event.ONTOUCHCANCEL);

Answer 4

After some trial and error, I was able to solve the issue on my own. I simply incorporated touch events in a similar manner to how I included mouse events.

Here is the mapping I used:

MOUSE DOWN --- TOUCH START
MOUSE UP --- TOUCH END
MOUSE MOVE --- TOUCH MOVE
ON LOSE CAPTURE --- TOUCH CANCEL

Next, I made sure to add sink events to my touch events as well:

this.sinkEvents(Event.MOUSEEVENTS | Event.ONLOSECAPTURE | Event.TOUCHEVENTS | Event.ONTOUCHCANCEL);

Expanding and Shrinking Panels through Touch in GWT

Answer №1

Answer №2

Similar questions

How can I display a modal exclusively on a specific screen size?

How can jQuery be used to style a single selected option with a unique color?

What is the best way to remove column and row gaps in a Bootstrap grid system?

Top method for removing quotation marks from form input using jquery

How to intercept a post request from JavaScript in a JavaFX WebView

Choosing siblings of a particular element that meet certain criteria

jquery: centralizing progressbar growth on the page

What is the process to discover, upload, and implement a custom font?

Ways to position the second section below the button

Symbol placed atop text within a navigation bar

Setting a variable equal to user input

Populate HTML Table with Array Elements

Is it possible to include ternary in the "homepage" section of the package.json file?

CarouFredSel Transition Troubles

React drag and drop feature now comes with autoscroll functionality, making

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

Update the font style of the navigation bar

Can you explain the purpose of including text-rendering: optimizeLegibility in a CSS stylesheet?

Go to a distant web page, complete the form, and send it in

Why @font-face doesn't display on older versions of Internet Explorer like IE 7 and IE