StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHidden content when using jQuery on IE7
primarykey
Id
1213182
data
AcceptedAnswerId
0
AnswerCount
2
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2009-07-31T15:27:48.587
FavoriteCount
0
LastActivityDate
2016-11-04T15:20:49.137
LastEditDate
2016-11-04T15:20:49.137
LastEditorUserId
1681985
OwnerUserId
148551
ParentId
0
PostTypeId
1
Score
1
ViewCount
1252
LastEditorDisplayName
text
Body
<p>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</p> <p>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.</p> <p>I thought it might be the peekaboo bug but I tried some of the suggested fixes (position:relative, zoom:1) but no luck.</p> <p>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.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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(); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.criteriaRow { clear:both; } .criteriaLabel { float:left; width:200px; } </code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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></code></pre> </div> </div> </p>
Tags
<jquery><css><internet-explorer-7>
Title
Hidden content when using jQuery on IE7
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USarhak
UserOwnerUserId
1. UScanice
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POHidden content when using jQuery on IE7
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.