Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

  • »Douglas Rhiner« ist der Autor dieses Themas

Beiträge: 85

Wohnort: Fairfax, CA

Beruf: CTO

  • Nachricht senden

1

Donnerstag, 27. Juli 2017, 01:44

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.

Quellcode

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.



Quellcode

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« ist der Autor dieses Themas

Beiträge: 85

Wohnort: Fairfax, CA

Beruf: CTO

  • Nachricht senden

2

Montag, 31. Juli 2017, 02:40

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« ist der Autor dieses Themas

Beiträge: 85

Wohnort: Fairfax, CA

Beruf: CTO

  • Nachricht senden

3

Freitag, 4. August 2017, 02:49

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

Quellcode

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');
    }
});