Showing DIV on SELECT OPTION mouseover in IE

tcrisera

01-27-2009, 04:58 PM

I'm trying to display a DIV w/ detail info that corresponds to a dropdown list option. I'm trying to place it at a set location on the right side of the page. The following code snippets work fine in Firefox, but not in IE 6.

<div id="divVendorDetail_1" style="border: solid 1px #214273;position: absolute;display:none;background-color: #ffffff;z-index: 200;">
<table border="0" cellpadding="2" cellspacing="0" width="350">
...
</div>

<select name="cboVendorList" onchange="submitFindVendor('VendorAdministration')" ">
<option value="1" onmouseover="showVendorDetails('divVendorDetail_1')"
onmouseout="hideVendorDetails('divVendorDetail_1')"></option>

function showVendorDetails(divName) {
if(divName.length < 1) { return; }

document.getElementById(divName).style.visibility = 'visible';
document.getElementById(divName).style.display = 'block';

var cX = 0; var cY = 300;

if (window.innerWidth) { //if browser supports window.innerWidth
cX = window.innerWidth - 400;

}
else
if (document.all) { //else if browser supports document.all (IE 4+)
cX = document.body.clientWidth - 400;

}

document.getElementById(divName).style.left = (cX) + "px";
document.getElementById(divName).style.top = (cY) + "px";

}

Tried some alerts, but didn't even seem to work at the top of the function in IE6. Any help appreciated, javascript not my longsuit, especially cross browser issues.

Thanks, TC

angst

01-27-2009, 05:02 PM

where are you getting the 'window' object from?

also just a tip, if you have a one liner IF statement,
like
if(divName.length < 1) { return; }

you don't need the addition brackets.
if(divName.length < 1) return;

tcrisera

01-27-2009, 06:22 PM

Sorry, I assumed window object was always available from context or something. Seems to be, because this is the Firefox part that works. (I got the code from an online example of testing for browser type and several examples I saw had the same if conditions.) Also, I can debug in FF with Firebug pretty easily but haven't been able to step into the code from IE. I don't think I even get into the method in IE because I put an alert as the first line.

I do see a page load warning in IE that says invalid character at Line 2 Char 1, but all that is there is the <head> tag.

Thanks for the tip anyway, but I'm a Java programmer, so I realized that. That first line was a paste from an example.

Thank, TC

angst

01-27-2009, 06:28 PM

ah ok, have a look here: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

I think this explains some of your issue

tcrisera

01-27-2009, 08:37 PM

Alas, that wasn't it. I kept looking around and found that with IE6 you can't get the mouseover event of a select option. Haven't been able to find a workaround to that.

Thanks anyway, TC