I'm using jQuery to switch between 'simple' and 'advanced' search panels by sliding up/down the panels. After the slide I want to set the input focus to the first field, however this causes the panel to blank out on IE7. It doesn't happen on FF 3.5.1
The original code is using ASP.NET but I've managed to reproduce it with some simple HTML and JavaScript below. My first attempt was based on tables rather than divs, but the same problem occurred.
I thought it might be the peekaboo bug but I tried some of the suggested fixes (position:relative, zoom:1) but no luck.
When the demo page is opened the simple search div is displayed, when you click on the 'Advanced' button then the advanced panel slides down but is then hidden. If you resize the window then it is shown again. Removing the jquery() call to focus() fixes the problem.
<html>
<head>
<title>Focus Demo</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
.criteriaRow
{
clear:both;
}
.criteriaLabel
{
float:left;
width:200px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#btnSwitchAdvanced").click(function() {
$("#simpleSearchPanel").slideUp(200, function() {
$("#advSearchPanel").slideDown(500, function() {
$("#txtASDescription").focus();
});
});
});
$("#btnSwitchSimple").click(function() {
$("#advSearchPanel").slideUp(200, function() {
$("#simpleSearchPanel").slideDown(500, function() {
$("#txtSimpleSearch").focus();
});
});
});
$("#advSearchPanel").hide();
});
</script>
</head>
<body>
<div id="searchPanel" style="background-color: #dcdcdc; margin-top: 5px;">
<div id="searchCriteria">
<div id="simpleSearchPanel">
<span>Simple Search</span>
<input type="text" id="txtSimpleSearch" />
<input type="button" id="btnSwitchAdvanced" value="Switch to Advanced" />
</div>
<div id="advSearchPanel">
<span>Advanded Search</span>
<div>
<div class="criteriaRow">
<div class="criteriaLabel">
<span id="lblASDescription">Description:</span>
</div>
<div class="criteriaInput">
<input type="text" id="txtASDescription" />
</div>
</div>
<div class="criteriaRow">
<div class="criteriaLabel">
<span id="lblASId">Id:</span>
</div>
<div class="criteriaInput">
<input name="txtASId" type="text" id="txtASId" />
</div>
</div>
</div>
<div>
<div id="criteriaActions" style="float:left;">
<input type="button" id="btnSwitchSimple" value="Switch To Simple" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>