Developer Forum

'm hoping I'm missing something simple and fresh eyes will point out an
obvious issue I'm missing.

Exec summary:
Code that has worked for over 4 years in IE 5.5 and IE 6 causes IE7 to
ignore all input (mouse clicks), until you lose focus on the IE7 window OR
you press the tab key. Users think the page is frozen. Code samples below. I
can provide a link to a working version of the page via private mail but I
can't post it publicly. (It's a complex application.)

DETAILS:
Around 4 years ago we needed a "Editable Dropdown" HTML control for IE 5.5.
HTML doesn't have that control, so we added some JavaScript that makes a
hidden DIV visible when a user clicks on a down arrow button next to a text
box. The div contains a list, user selects something and the onMouseUp event
fires. We take the selection in the list, and move it to the Input box
(text), simulating the behaviors of a native window control. The values in
the list are from a database, and everything is build dynamically.

It has worked for over 4 years in IE 5.5 and all versions of IE 6. In IE7
the browser is unresponsive until the user presses Tab, clicks outside the
IE7 window or otherwise moves focus off, then back to IE7. Then it works as
expected.
We have tried lots of variations of this code, without finding a any
solution. Maybe it will be obvious to the experts here.

Here is the HTML from view source:


<input type='text' style='width: 175px;' value='Committee Meeting'
name='txtDdn_1' id='txtDdn_1' onchange='clearDdn(1);'
onKeyUp='checkReservationType()' maxLength='50' tabIndex='4' ><img
src='/images/buttons/downArrow.gif' onclick='showDdn(1);' align='absmiddle'
name='imgDdn_1'>
<div id='divDdnContent_1'
style='visibility:hidden;z-index:999;width:195;position:absolute;'>
<select id='ddnOptions_1' tabindex='-201' name='ddnOptions_1'
onchange='moveInfo(1);' size='5' style='width:195px;' >
<option value='1'>Client Meeting</option>
<option value='5'>Closing</option>
<option value='4'>Committee Meeting</option>
<option value='2'>Deposition</option>
<option value='9'>Other</option>
</select></div>

JavaScript Functions:

function showDdn(iIndex) {
var oDivDdn = document.getElementById("divDdnContent_" + iIndex);
var oDdnOptions = document.getElementById("ddnOptions_" + iIndex);
var iXOffset = oDivDdn.style.width;
iXOffset = iXOffset.slice(0,iXOffset.length - 2);

oDivDdn.style.top = getDdnY("imgDdn_" + iIndex) + 20;
oDivDdn.style.left = getDdnX("imgDdn_" + iIndex) - iXOffset + 20;
oDivDdn.style.visibility = "visible";
oDdnOptions.focus();

document.attachEvent("onmouseup",hideDdn);
}

function moveInfo(iDdnIndex) {
var oTextField = document.getElementById("txtDdn_" + iDdnIndex);
var oSelectBox = document.getElementById("ddnOptions_" + iDdnIndex);
if(oSelectBox[oSelectBox.selectedIndex].value!='NoRecs'){
oTextField.value = oSelectBox[oSelectBox.selectedIndex].text;
}
}

function clearDdn(iIndex) {
var oSelectBox = document.getElementById("ddnOptions_" + iIndex);
oSelectBox.selectedIndex = -1;
}

function hideDdn() {
// In order for this to work, any editable drop-down fields must be
contained in a div called
// divContent.
var oDivContainer = document.body;
var oDivCurrentDdn;
var sID;

//alert(document.body.all[0].getAttribute("id"));
fo

ecause I realized my example/issue is complex, I'm going to create a simple
page that shows the issue. The current application pages are database driven,
and all the JavaScript is in .js files. It's too much code for anybody to
parse through for free (except maybe MS, after they see it fail in a simple
context.)

I'll create a page with minimum code showing the issue and post it to a
public URL so others can see all the code with view source. Maybe someone
will spot the issue where I'm blind.

I'll post here when the page is live, probably later today. Maybe I'll
figure out the issue in the process,(read: trip over a solution) and if that
happens, I'll post the solution here so others can see what I found.





"Don Silver" wrote:

ue to the complexity of the code, we created a much simplier page which
shows the problem. The page only has two controls, compared with a dozen on
the original.

Even on the stripped page we still get different behaviors between IE 6 and
IE 7 (as outlined below).

Check out this page (and view source if you wish) and you'll see IE 7
appears unresponsive until the tab key is pressed or the page loses focus. In
IE 6, it works as expected.

All suggestions/ideas welcomed!

http://jscripttest.baarns.com

"Don Silver" wrote:

You are using getElementById() to locate an object with no ID attribute (the
image with NAME=imgDdn_1). You really should use attribute quotes, too, in
case you ever want to validate as XHTML.



--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use
of this email address implies consent to these terms.