You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

  • "Douglas Rhiner" started this thread

Posts: 89

Location: Fairfax, CA

Occupation: Code-Slave

  • Send private message

1

Thursday, July 27th 2017, 1:44am

ScrollArea touch content

This is a follow-up to a previously posted issue on this same subject. But I think I have clarified my question a bit.
I have a plugin that loads a multi-level accordion menu.
Here is a sample of the code structure of the menu.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class='cd-accordion-menu animated'>    <li class='has-children'><input type='checkbox' name='1_' id='1_'/><label id='the_1_' for='1_'>Aerial</label>
        <ul>
            <li><a class="" href="javascript:void(0)"
                   onclick="javascript: xploritObj.call('gotoprep(); trace(locationclick); loadpanoscene(scene_xml.php?tourid=102098&sceneid=103889,scene103889,null,MERGE,BLEND(1));');">Greater
                                                                                                                                                                                          LA</a>
            </li>
            <li><a class="" href="javascript:void(0)"
                   onclick="javascript: xploritObj.call('gotoprep(); trace(locationclick); loadpanoscene(scene_xml.php?tourid=102098&sceneid=102270,scene102270,null,MERGE,BLEND(1));');">Arts
                                                                                                                                                                                          District
                                                                                                                                                                                          Overview</a>
            </li>
        </ul>
    </li>
</ul>



The plugin is child to a scrollarea layer within a container-layer, as prescribed.



Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<layer name="tour_locations_cont_wrap" type="container" keep="true" visible="true" maskchildren="true" align="lefttop" x="0" y="0" width="300" minwidth="300" height="20">
    <layer name="tour_locations_cont" url.flash="%SWFPATH%/plugins/scrollarea.swf" url.html5="%SWFPATH%/plugins/scrollarea.js" direction="v"
           align="lefttop" x="0" y="0" width="300" minwidth="300" mwheel="true" height="4000" keep="true">

        <plugin name="tour_locations_list"
                url="%SWFPATH%/plugins/xplorit_location_list.min.js"
                keep="true"
                align="lefttop"
                x="0" y="0"
                width="300"
                minwidth="300"
                alpha="1.0"
                height="100">

        </plugin>

    </layer>

</layer>


In desktop browsers the menu performs as expected. The input-checkboxes get checked and the menu expands and the <a> onclick events fire off.
On mobile/touch devices this completely breaks.
You can still scroll but none of the touch responses work as predicted. The input-checkboxes do NOT get checked and the menu does NOT expand and the <a> onclick events do NOT fire off.


This has been brought up once before in this thread:https://krpano.com/forum/wbb/index.php?p…a+ios#post53835 "Textfield over scrollarea bug on touch devices"

This behavior does make some sense since the scrollarea layer needs to be receiving touch events so it can drag.
But this precludes you from having objects in a scrollarea that react to realistic touch events. The menu elements do respond to JQuery .on('touchstart touchend'); events. Implementing solution using JQuery as a workaround is mildly problematic.

Does anyone have any insight into what one can do to enable "traditional" touch events inside a scrollarea layer?


  • "Douglas Rhiner" started this thread

Posts: 89

Location: Fairfax, CA

Occupation: Code-Slave

  • Send private message

2

Monday, July 31st 2017, 2:40am

And this becomes a bit more interesting.

If you set the checkboxes as checked, so the menu is completely open when you load, the checkboxes and <a> onclicks still don't work.
HOWEVER, if you add this to your homescreen and re-launch from this web-app the checkboxes still don't work BUT the <a> onclicks DO!

  • "Douglas Rhiner" started this thread

Posts: 89

Location: Fairfax, CA

Occupation: Code-Slave

  • Send private message

3

Friday, August 4th 2017, 2:49am

My solution to this is JQuery.
Created my own tap/tap-hold function, if anyone is interested....

Source code

1
2
3
4
5
6
7
8
9
10
11
12
var tst;
var tet;
$('label span').bind('touchstart', function () { var ds = new Date();
    tst    = ds.getTime();
}).bind('touchend', function () {var de = new Date();
    tet    = de.getTime();
    var tt = parseInt(tet) - parseInt(tst);
    if(tt > 250 && tt < 750){
        labelID = $(this).parent().attr('for');
        $('#'+labelID).trigger('click');
    }
});