Using apps with "touch" devices

mrenda's picture

When I use applications developed on Echo3 framework, some features do not function as expected on a touch device and mainly I refer to scroll issues. For example on iPad, in all cases where scroll bar should appear automatically, there's no possibility instead to scroll using fingers (as expected).

Is the anybody who have found a solution to this?

Two Fingers

You need to use a two finger scroll and it will work fine. There is also an issue on android, but haven't found a solution yet.

mrenda's picture

Yes!!!

It works fine with two fingers. Thank you.
We are going to see deeper what happens with touch devices. If I find something new and interesting I will share it.

get touch scroll jquery plugin

just add line of code in your contentpane javascript initialization to call the .touchScroll() and it works like a charm. I did that with Echo2, so echo3 shouldn't be much different. Make sure the "div" element that holds the contents have overflow="visible".

Ummm

Wow! i don't understand any of that. Can I get some more detail, please?

Touch scroll code here

Touch scroll code here https://github.com/neave/touch-scroll

Here's what I changed in ContentPane.js (I'm using Echo2):

        processInit: function(initMessageElement) {
            for (var item = initMessageElement.firstChild; item; item = item.nextSibling) {
                var elementId = item.getAttribute("eid");
                var divElement = document.getElementById(elementId);
                var contentElement = EchoContentPane.findContentElement(divElement);
        
                var horizontalScroll = item.getAttribute("horizontal-scroll");
                var verticalScroll = item.getAttribute("vertical-scroll");
                var touchScroll = item.getAttribute("touch-scroll");

                if (contentElement) {
                    EchoEventProcessor.addHandler(contentElement, "scroll", "EchoContentPane.processScroll");
                    
                    if (horizontalScroll) {
                        contentElement.scrollLeft = parseInt(horizontalScroll, 10);
                    }
                    if (verticalScroll) {
                        contentElement.scrollTop = parseInt(verticalScroll, 10);
                    }
                    if(touchScroll === "1") {
                        jQuery(contentElement).touchScroll();
                    }
                }
            }
        },

and I added that "touch-scroll" directive in ContentPanePeer.renderInitDirective along with others.
in renderChild method, make sure add overflow="visible" to the style attributes (this gets onto the div that actually contain the child component need to be scrolled).

Make sure you have jquery as javascript service and do the same with this touch scroll plugin. (see CONTENT_PANE_SERVICE in ContentPanePeer for example. Just do the same).

And you'll have scrollable content pane in Echo2. I'm sure Echo3 isn't much different.