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.

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 788

Location: Angers - France

Occupation: Photographer

  • Send private message

1

Wednesday, May 21st 2014, 10:48pm

Texfield over scrollarea bug on touch devices

Hi, I found a small bug and don't know if it comes from textfield or scrollarea (guess it's scrollarea)
I have a textfield with background over a scrollarea with an onclick function on the texfield, works perfect on desktop but on touchdevices you can scroll the scrollarea plugin over the textfield and the texfield doesn't catch the click...
All this in HTML5 of course.
Image plugin onclick works over scrollarea on touchdevice but textarea won't.

here an exemple : http://caraibes360.com
on desktop if you click on the text on the right of the screen the texfield moves and hides, if you try the same on touchdevice you can control the scrollarea plugin over the texfield and the textfield doesn't captures the click.

Any idea ?

Many thanx !

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 788

Location: Angers - France

Occupation: Photographer

  • Send private message

2

Friday, May 23rd 2014, 10:35am

Looks like the problem comes from layer type container in fact... and only on touchedevice, image plugins get the onclick event, textfield don't.
Is it because the textfield isn't in the 100% container layer ?

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
onstart="play_intro();"
<layer name="map" type="container" align="center" width="100%" height="100%">
		<layer name="scrollarea" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" align="center" width="2560" height="1440" direction="all" preload="true" zorder="1">
			<layer name="mapimage" url="maps/pinel.jpg" align="center" zorder="1" onloaded="loadingpercent_stoploading();set(layer[background_loading].visible,false);">
			
			<layer name="pinel_ponton" style="layer360" image="map_spots/pinel_ponton.jpg" tooltip="Ponton arrivée" ttparent="layer[pinel_ponton]"  x="919" y="827" onclick="activatespot(pinel_ponton);loadpano(pinel_ponton.xml, null, MERGE, BLEND(1));hidemap();js(track(pinel_ponton));"/>
			<layer name="pinel_snorkeling" style="layer360" image="map_spots/pinel_snorkeling.jpg" tooltip="Snorkeling" ttparent="layer[pinel_snorkeling]"  x="1008" y="1058" onclick="activatespot(pinel_snorkeling);loadpano(pinel_snorkeling.xml, null, MERGE, BLEND(1));hidemap();js(track(pinel_snorkeling))"/>		
			<layer name="pinel_resto" style="layer360" image="map_spots/pinel_resto.jpg" tooltip="Le Karibuni" ttparent="layer[pinel_resto]"  x="836" y="631" onclick="activatespot(pinel_resto);loadpano(pinel_resto.xml, null, MERGE, BLEND(1));hidemap();js(track(pinel_resto))"/>
			<layer name="pinel_viewpoint1" style="layer360" image="map_spots/pinel_viewpoint1.jpg" tooltip="Point de vue" ttparent="layer[pinel_viewpoint1]"  x="1238" y="1023" onclick="activatespot(pinel_viewpoint1);loadpano(pinel_viewpoint1.xml, null, MERGE, BLEND(1));hidemap();js(track(pinel_viewpoint1))"/>	
			<layer name="pinel_viewpoint2" style="layer360" image="map_spots/pinel_viewpoint2.jpg" tooltip="Point de vue" ttparent="layer[pinel_viewpoint2]"  x="1633" y="369" onclick="activatespot(pinel_viewpoint2);loadpano(pinel_viewpoint2.xml, null, MERGE, BLEND(1));hidemap();js(track(pinel_viewpoint2))"/>	
			<layer name="pinel_viewpoint3" style="layer360" image="map_spots/pinel_viewpoint3.jpg" tooltip="Point de vue" ttparent="layer[pinel_viewpoint3]"  x="913" y="397" onclick="activatespot(pinel_viewpoint3);loadpano(pinel_viewpoint3.xml, null, MERGE, BLEND(1));hidemap();js(track(pinel_viewpoint3))"/>	
			<layer name="pinel_sauvage" style="layer360" image="map_spots/pinel_sauvage.jpg" tooltip="Plage" ttparent="layer[pinel_sauvage]"  x="1162" y="397" onclick="activatespot(pinel_sauvage);loadpano(pinel_sauvage.xml, null, MERGE, BLEND(1));hidemap();js(track(pinel_sauvage))"/>	
			<layer name="pinel_plage" style="layer360" image="map_spots/pinel_plage.jpg" tooltip="Plage" ttparent="layer[pinel_plage]"  x="1334" y="807" onclick="activatespot(pinel_plage);loadpano(pinel_plage.xml, null, MERGE, BLEND(1));hidemap();js(track(pinel_plage))"/>															
			
			<layer name="activespot" url="%SWFPATH%/caribskin/icons/activespot.png" align="lefttop" edge="bottom" visible="false" zorder="10"/>
			
			</layer>
		</layer>
</layer>

<layer name="textinfo" keep="false" url="%SWFPATH%/plugins/textfield.swf"  align="right" autowidth="auto" autoheight="auto" background="true" backgroundcolor="#000000" backgroundalpha="0.6" border="false" shadow="0" textshadow="0" width="50%" x="-50%" padding="20 20 20 20" roundedge="5" css="p{color:#ffffff; font-family:arial; font-size:14px;} h1{margin-left:40px;color:#ffffff; font-size:30px;}" html="" zorder="4" onclick="tween(x,-50%,2);set(plugin[showinfos].visible,true);tween(plugin[showinfos].alpha,1,2)"/>

<action name="play_intro">
set(layer[textinfo].html,data:pineltext);
tween(layer[textinfo].x,0,2);
</action>

<data name="pineltext">
<h1>l'île Pinel</h1>
<p>L’ilet Pinel se trouve au Nord Est de Saint Martin. C’est l’un des endroits le plus visité de Saint Martin. Pourquoi? L’ilet Pinel est considéré comme une bonne destination pour le snorkeling, comprenez nager avec palmes-masques-tuba. C’est aussi un paradis pour les amateurs de kayak et de stand up paddle. Pinel est situé au coeur de la Réserve Naturelle de Saint Martin. L’ilet Pinel est accessible avec un ferry, mais aussi en kayak ou en stand up paddle à partir de Cul de Sac. L’histoire prétends qu’un certain Capitaine Pinel y trouva refuge après avoir été forcé de quitter l’île de Saba. Mythe ou réalité, l’îlet Pinel est une superbe destination pour s’évader du monde moderne.</p>

HansNyb

Professional

Posts: 936

Location: Denmark

Occupation: Photographer

  • Send private message

3

Friday, May 23rd 2014, 4:54pm

It does not work in Safari desktop Mac either.

Only with Chrome and Firefox.

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 788

Location: Angers - France

Occupation: Photographer

  • Send private message

4

Tuesday, May 27th 2014, 10:12am

Thanx for looking Hans,
On my mac it works on safari and firefox, sometimes on chrome (like on pc).
Usually it doesn't work on chrome when the cache is emprty, and if you reload the page then it works...
Still doesn't work at all on all touchedevices, and still deosn't understand why !!!

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 788

Location: Angers - France

Occupation: Photographer

  • Send private message

5

Tuesday, May 27th 2014, 12:14pm

After XXX hours searching and a huge headache I finally found the problem...
I have an image plugin with a onclick function wich is set as a children on the textfield, removing this plugin for touchdevices and chrome did the trick !
I didn't manage to make it work even including the image in the text data with a href="event:action(...)"...
Still don't understand why it's working on desktop safari, IE and firefox, sometimes on chrome when reloading, and never on touchedevices ???

that was my code :

Source code

1
2
3
<layer name="textinfo" keep="false" url="%SWFPATH%/plugins/textfield.swf"  align="right" autoheight="auto" background="true" backgroundcolor="#000000" backgroundalpha="0.6" border="false" shadow="0" textshadow="0" width="50%" x="-50%" padding="20 20 20 20" roundedge="5" css="p{color:#ffffff; font-family:arial; font-size:14px;} h1{margin-left:40px;color:#ffffff; font-size:30px;}" html="" zorder="4" onclick="tween(x,-50%,2);set(plugin[showinfos].visible,true);tween(plugin[showinfos].alpha,1,2)" devices="desktop"/>

<plugin name="shareintro" url="%SWFPATH%/caribskin/icons/share.png" align="topleft" edge="topleft" parent="layer[textinfo]" x="10" y="10" scale="0.7" onclick="set(layer[share_button_intro].visible,true);tween(layer[share_button_intro].y,-60,1);tween(layer[share_button_intro].alpha,1,1);" />

6

Friday, May 30th 2014, 11:10am

I have the same problem. Seems href="event:action(...)" in textfield dont work on touch devices.
Someone has a solution ?


Thanks,

Similar threads