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 !

  • 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 ?

  • 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 !!!

  • 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 :

    Code
    <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);" />

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!