PDA

View Full Version : slideIn animation breaks form input values


ap
17 Jul 2007, 11:26 AM
In IE, the Fx slideIn will clear form value already selected by user. In IE7 when a div with radio buttons uses slideIn, the selected radio button is cleared and it goes back to the original selection. In IE6, not only the radio button but also the check boxes have the same behavior. This doesnot happen in Firefox.



<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test </title>

<script type="text/javascript" src="../ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext/adapter/yui/ext-yui-adapter.js"></script>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />

<script type="text/javascript" src="../ext/ext-all.js"></script>


</head>
<body>

<form name="test" method="post" action="" id="test">

<div class='' id='advSearch_panel' style="" >

<div id="box_1" class="" style="width:170px;">
<label >test</label>
<ul>
<li><input type="checkbox" value="2" ><label >test</label></li>
<li><input type="checkbox" value="2" ><label >test</label></li>
<li><input type="checkbox" value="2" ><label >test</label></li>
</ul>

</div>

<div id="box_2" style="width:200px;" class="">
<label class='opt_box_label'>test</label>
<ul><li><input type="radio" checked>
<label>Any</label>
</li>
<li><input type="radio" name="location" value="1" >
<label>test </label>
</li>
<li><input type="radio" name="location" value="2" >
<label>test</label>
</li>
</ul>
</div>
</div>
<div id="drawer" class="" style="background-color:gray;" onclick="toggle();" >
<label id="display_msg" style="margin-right:200px;vertical-align:top;font-size:1.1em;color:gray"></label><font id="optbar_txt" style="vertical-align:top;">more option</font>
</div>
</form>

<script type="text/javascript">
var toggle_counter=1;
function toggle(){
toggle_counter++;
if(toggle_counter%2==1){
Ext.get('advSearch_panel').slideIn('t', {useDisplay:true, duration: .5});
Ext.get('optbar_txt').update("hide option");

}else{
Ext.get('advSearch_panel').slideOut('t', {useDisplay:true, duration: .5});
Ext.get('optbar_txt').update("more option");

}
}
</script>
</body>
</html>
jack.slocum
17 Jul 2007, 4:50 PM
This is obviously a browser issue. My question would be, how do you expect Ext to work around it? Should we check every element that the slideIn effect is applied to an look for child form inputs and get their values and restore them after slide? There is really nothing we can do, you will need to use discretion when deciding what to apply the effect to.
ap
17 Jul 2007, 6:18 PM
Sorry Jack, I can certainly work around it. I should've looked into it more in detail. I point it out only because, other effects library (scriptaculous, spry etc.) doesn't not have this behavior. If I'm expected to restore whatever is in the div when I use fx , I sure can do that from now on. Thanks for the prompt reply.
jack.slocum
17 Jul 2007, 7:48 PM
You may want to try shift or scale, both of those will do a little more similar to what scriptaculous and others are doing. I'd imagine they won't cause any issues as they are less "volatile".