Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

OnFocus in hidden div

Status
Not open for further replies.
chrissparkle

chrissparkle

Programmer
Mar 27, 2006
50
NZ
I have a div which is hidden when the page is loaded. When the user clicks a link it shows the DIV and inside the DIV is a small comments form to complete. The comments form has two fields, a subject and a message field.

I want the subject (input type text) to have focus (ie, cursor in field) when the user clicks the link to show the DIV.

I tried putting in the usual onLoad focus into the body but I got errors that form field was inivisble, disabled or hidden etc etc.

Is there a way to achieve this?
 
Sort by date Sort by votes
That's great and exactly what I needed, except when I click the button again to hide the div it tries to focus it again, and it brings up the error that the form field is invisible.

Code: 
<a href="javascript:toggleLayer('commentForm');document.ReplyF.message.focus()" title="Reply to this message">

That's my code - is there a way to have that focus code just fire when the div is being shown.

This is the js function:

Code: 
function toggleLayer(whichLayer)
{if (document.getElementById)
{// this is the way the standards work 
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";

}
else if (document.all)
{// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}
 
Upvote 0 Downvote
You can do it like this.

[tt]<a href="javascript:toggleLayer('commentForm');[blue]if (document.ReplyF && document.ReplyF.message) {[/blue]document.ReplyF.message.focus()[blue]}[/blue]" title="Reply to this message">[/tt]
 
Upvote 0 Downvote
Sorry! Misread the problem. The correct attack is to check the style of the display!

[tt]<a href="javascript:toggleLayer('commentForm');if (document.ReplyF.message.style.display!="hidden") {document.ReplyF.message.focus()}" title="Reply to this message">[/tt]

If the setting is "none" or "invisible", modify the conditional accordingly. That's the idea.
 
Upvote 0 Downvote
Just a quick amendment. "hidden" might be set to style.visibility. If it is display setting, check against "none" instead.
 
Upvote 0 Downvote
<a href="javascript:toggleLayer('commentForm');if (document.ReplyF.message.style.display!="hidden") {document.ReplyF.message.focus()}" title="Reply to this message">

This brings up a 'syntax error'?
 
Upvote 0 Downvote
I changed it to "none" cos that's what in my css, and now its working but still bringing up the message "cannot chane focus because field is hidden or invisible etc
 
Upvote 0 Downvote
The conditional must be scripted according to the page what designer has planned to put on the page. Except very dynamically generated page, the scripter should know before hand what kind of style is applied to the element, inline style or using stylesheet's class or other selector! If you know it is through stylesheet class, then of course a conditional test on the inline style (as posted) would not be sufficient to eliminate attempt to focus on hidden element.

Here is a test page for using inline or stylesheet class selector. As the scripter is pretending not knowing what kind of style is applying to the element, the function is consequently more involved. It shouldn't be except the element is dynamic to such a degree that the designer has no idea the eventual page look like---a very unlikely case.
[tt]
<html>
<head>
<script language="javascript">

function toggleLayer(whichLayer)
{if (document.getElementById)
{// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";

}
else if (document.all)
{// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}
</script>
<style type="text/css">
.theShow {display:none;}
</style>
</head>
<body>
<div id="theDiv" style="display:none">abc</div>
<form name="theForm">
<!-- case [1]
<input type="text" name="theSubject" style="display:none;" value="default" />
-->
<!-- case [2] -->
<input type="text" name="theSubject" class="theShow" value="default" />
<!-- -->
</form>
<a href="javascript:document.getElementById('theDiv').style.display='block';
if (document.theForm.theSubject.style.display && (document.theForm.theSubject.style.display!='none')) {
document.theForm.theSubject.focus()
} else if (document.theForm.theSubject.className.length!=0) {
var sclass=document.theForm.theSubject.className;
var ocsssheets=document.styleSheets;
for (var i=0;i<ocsssheets.length;i++) {
var ocss=ocsssheets;
if (ocss.rules) {
ocss.cssRules=ocss.rules;
}
for (var j=0;j<ocss.cssRules.length;j++) {
if (ocss.cssRules[j].selectorText.indexOf('.' + sclass) != -1) {
if (ocss.cssRules[j].style.display != 'none') {
document.theForm.theSubject.focus();
}
}
}
}
}
">Feedback</a>
</body>
</html>
[/tt]
Test case [1] and case [2] successively but commenting out the other.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
639
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
221
waubain
waubain
bs6600
  • Locked
  • Question
Accordion - Anchors in panels causing problems 1
Replies
6
Views
134
feherke
feherke
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
100
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top