toggle - Toggling jQuery function not workin on Safari Mobile -
i'm trying make work functionality exists on website works bad on safari iphone.
well, have "li" element:
.. <li><input id='showorhide' type='button' value='show or hide'/></li> <li><input type='text' value='ok'/></li> ..
when click on 'show or hide' button, text input should appear or disappear.
then, have jquery function binds click:
$("#showorhide").click(function(){ if($(this).parent().next().is(':visible')) $(this).parent().next().hide('slow'); else $(this).parent().next().show('slow'); });
the problem that, if element appears, safari hides shows it.
so think safari checks wether element visible or not. if it's visible, hides it, go "else" selection. there, checks if element visible or not. find it's not visible, make appear.
so on stackoverflow adivises me use toggle function , did:
$("#showorhide").click(function(){ $(this).parent().next().toggle('slow'); });
i tried function: works on desktop browsers (chrome, safari) on safari iphone did described: shows , hides hidden element instantly.
is there solution without using extrernal javascript framework (but jquery) ?
thanks, regards
i wrote demo program (see below) , ran fine on desktop firefox, safari in iphone simulator, , ipad safari. perhaps want make sure click event not captured multiple event listeners.
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(document).ready(function() { $('#showhide').click(function(e) { $(this).parent().next().toggle('slow'); }); }); </script> </head> <body> <ul> <li><input type="button" value="show hide" id="showhide" /></li> <li><input type="text" value="ok" /></li> </ul> </body> </html>
Comments
Post a Comment