event handler

[geoffc]

I have a <div> element with numerous child controls. What I am looking
for is some way of running a piece of javascript when when the focus
changes from the <div> element or any of its child elements to another
element on the page - but not when the focus is moved to another
element within the <div>. Further more the call to the code must lie
within the <div> element. I do not have access to the rest of the
html.

Hope I am not asking to much.

Geoff

 

[David Mark]

I have a <div> element with numerous child controls. What I am looking
for is some way of running a piece of javascript when when the focus
changes from the <div> element or any of its child elements to another

Under normal circumstances, DIV's do not receive the focus. I assume
you have form elements or links inside the DIV. It would help if you
posted the DIV tag and its contents.

element on the page - but not when the focus is moved to another
element within the <div>. Further more the call to the code must lie
within the <div> element. I do not have access to the rest of the
html.

Define a function that will run once the page is loaded (bound to the
window object's onload event.) The function must iterate through the
DIV's child links and/or inputs (use getElementsByTagName) and attach
listeners for the onblur and onfocus events. In the onblur handlers,
set a timeout to code that does whatever you want to do when the user
leaves the confines of the DIV. In the onfocus handlers, clear the
timeout.

 

[geoffc]

Under normal circumstances, DIV's do not receive the focus. I assume
you have form elements or links inside the DIV. It would help if you
posted the DIV tag and its contents.


Define a function that will run once the page is loaded (bound to the
window object's onload event.) The function must iterate through the
DIV's child links and/or inputs (use getElementsByTagName) and attach
listeners for the onblur and onfocus events. In the onblur handlers,
set a timeout to code that does whatever you want to do when the user
leaves the confines of the DIV. In the onfocus handlers, clear the
timeout.

Hi David,

thanks for the reply. Here is a copy of my <div> tag.

<div id="PHSearchBox1" style="width:224px;">
<table>
<tr>
<td align='left'>
<input name="PHSearchBox1$ctl00" type="text"
autocomplete="off"
onkeyup="WebForm_DoCallback('PHSearchBox1',this.value,phSearchBox_ClientCallback,'PHSearchBox1_select',phSearchBox_ErrorCallback,true)"
style="width:200px;" />
<br />
<select id="PHSearchBox1_select"
onchange="phSearchBox_Change(this)" style="margin-left:
0;display:none;position:absolute;z-index:100;height:
200px;overflow:scroll;">
</select>
</td>
</tr>
</table>
</div>

Its basically an attempt at google suggest. I need the select control
to be hidden when a user clicks on another control on the page.

Thanks,

Geoff

 

[David Mark]

Hi David,

thanks for the reply. Here is a copy of my <div> tag.

<div id="PHSearchBox1" style="width:224px;">
<table>
<tr>
<td align='left'>
<input name="PHSearchBox1$ctl00" type="text"
autocomplete="off"
onkeyup="WebForm_DoCallback('PHSearchBox1',this.value,phSearchBox_ClientCal­lback,'PHSearchBox1_select',phSearchBox_ErrorCallback,true)"
style="width:200px;" />
<br />
<select id="PHSearchBox1_select"
onchange="phSearchBox_Change(this)" style="margin-left:
0;display:none;position:absolute;z-index:100;height:
200px;overflow:scroll;">
</select>
</td>
</tr>
</table>
</div>

Its basically an attempt at google suggest. I need the select control
to be hidden when a user clicks on another control on the page.

Okay, so in the code called by your timeout do this:

var el = document.getElementById('PHSearchBox1_select');
if (el) el.style.display = 'none';

In the onfocus handler do the same, but set the display style to
'inline'.

You should generate these tags with script as they clearly won't do
anything when scripting is disabled.

And why is that table in there?

 

[geoffc]

Okay, so in the code called by your timeout do this:

var el = document.getElementById('PHSearchBox1_select');
if (el) el.style.display = 'none';

In the onfocus handler do the same, but set the display style to
'inline'.

You should generate these tags with script as they clearly won't do
anything when scripting is disabled.

And why is that table in there?- Hide quoted text -

- Show quoted text -

Thanks David,

I've followed your advice exactly but you certainly pointed me in the
right direction.
The table is there because this is a dotnet control and it seemed the
best way to make sure that the <select> element always lined up with
the <input> element.

Once again many thanks,

Geoff

 

[David Mark]

Thanks David,

I've followed your advice exactly but you certainly pointed me in the
right direction.
The table is there because this is a dotnet control and it seemed the
best way to make sure that the <select> element always lined up with
the <input> element.

Once again many thanks,

Geoff- Hide quoted text -

- Show quoted text -

You can lose the table. It isn't doing anything. Never use tables
for anything but tabular data. The proper container for form elements
is a fieldset. This has nothing to do with .NET.