Reputation: 583
I am trying to set focus on an div with a class using jquery.focus()
, It works in IE 9 but not in firefox or chrome.
window.setTimeout(function(){ searchDivToggle(); $('.searchResultsFieldSet').focus();},0);
The page has search form,table with search results, each row has a link to view details, click on link shows details div hiding search form and table, details div has close on click hide details show search and search results.
html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showDetails(){
$('#search').toggle();
$('#detailsFragment').css("display","block");
}
function hideDetails(){
$('#search').toggle();
$('#detailsFragment').css("display","none");
$('#searchResults').focus();
}
</script>
</head>
<body>
<div id="search">
<div style="height:50em; width=30em; border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
Place hodler for search form........
</div>
<div style="border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
<label style=" font-weight: bold;" >Search Results </label>
<table id="searchResults">
<thead>
<td>column1</td>
<td>column2</td>
<td>Action</td>
</thead
<tbody>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
<tr>
<td>
Some value...
</td>
<td>
Some value...
</td>
<td>
<a href="#" onclick="showDetails();">Show Details</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="detailsFragment" style="display:none">
<div style="height:50em; width=30em; border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
Details Fragment
<input type="button" value="Close" onclick="hideDetails();">
</div>
</div>
</body>
Upvotes: 0
Views: 886
Reputation: 16081
The focus()
cannot be place on a table
element. It needs to be place on input
, textarea
or select
The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links (). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
You might want to use a scrollTo()
element function. There is one example here:
jQuery scroll to element
Upvotes: 1