javascript functionality not showing in IE (asp.net Dropdownlist ListItem onmouseover)
Hello Experts,
I'm not much of a javascript guy I've been using it much more lately but hit a road block today. I created some functionality which works in Firefox but not in IE.
I have an asp.net dropdownlist. I've added a javascript onmouseover (and corresponding onmouseout) event to each dropdownlist along with a number to uniquely identify each ListItem. When a ListItem is hovered over the javascript calls a function which displays a corresponding div when... Basically the idea is to provide more information via a absolute positioned div when on a dropdownlist and then once one is selected display a panel to make further selections etc.
It works in Firefox (ya ya ya, firefox is awesome IE blows)... but I need to get it to work in both. The code is below and a working example is at:
http://www.sound-tele.com/spu/call-center-form-gui.aspx
Thank you for your time and help. I look forward to figuring this out with you all. I think it is a cool bit of functionality that has many applications.
I'm not much of a javascript guy I've been using it much more lately but hit a road block today. I created some functionality which works in Firefox but not in IE.
I have an asp.net dropdownlist. I've added a javascript onmouseover (and corresponding onmouseout) event to each dropdownlist along with a number to uniquely identify each ListItem. When a ListItem is hovered over the javascript calls a function which displays a corresponding div when... Basically the idea is to provide more information via a absolute positioned div when on a dropdownlist and then once one is selected display a panel to make further selections etc.
It works in Firefox (ya ya ya, firefox is awesome IE blows)... but I need to get it to work in both. The code is below and a working example is at:
http://www.sound-tele.com/spu/call-center-form-gui.aspx
Thank you for your time and help. I look forward to figuring this out with you all. I think it is a cool bit of functionality that has many applications.
<%@ Page Language="C#" EnableViewState="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
void Page_Load()
{
for (int i = 0; i < ddlCallTypes.Items.Count; i++)
{
ddlCallTypes.Items[i].Attributes.Add("onmouseover", "showCTdescrip('" + i.ToString() + "');");
ddlCallTypes.Items[i].Attributes.Add("onmouseout", "hideCTdescrip('" + i.ToString() + "')");
}
if (!Page.IsPostBack)
{
pnlNonER.Visible = false;
}
}
protected void ddlCallTypes_SelectedIndexChanged(object sender, EventArgs e)
{
Response.Write(ddlCallTypes.SelectedIndex.ToString());
//string strIndex = ddlCallTypes.SelectedIndex.ToString();
switch (ddlCallTypes.SelectedIndex.ToString())
{
case "0":
lblSelectError.Visible = true;
break;
case "1":
pnlNonER.Visible = true;
break;
case "2":
pnlOutage.Visible = true;
break;
case "3":
pnlLifeThreatening.Visible = true;
break;
default:
lblSelectError.Text = "There appears to be an error with the selection please contact network administrator immediately";
lblSelectError.Visible = true;
break;
}
}
protected void btnSaveNonERCall_Click(object sender, EventArgs e)
{
pnlNonER.Visible = false;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="SPU.css" rel="stylesheet" type="text/css" />
<title></title>
<script type="text/javascript">
function showCTdescrip(strDivID) {
var divID = 'ctDescrip' + strDivID.toString();
var div2Show = document.getElementById(divID);
div2Show.style.display = 'block';
}
function hideCTdescrip(strDivID) {
var divID = 'ctDescrip' + strDivID.toString();
var div2Show = document.getElementById(divID);
div2Show.style.display = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<h2>Seattle Public Utilities, this is ________(name). How may I assist you? </h2>
<asp:Label ID="lblERType" runat="server" Text="Call Type?"></asp:Label>
<asp:DropDownList
ID="ddlCallTypes"
AutoPostBack="true"
runat="server"
OnSelectedIndexChanged="ddlCallTypes_SelectedIndexChanged">
<asp:ListItem Selected="True" Value="Select Call Type" Text="Please Select Call type" />
<asp:ListItem Value="Non-outage related business with the City of Seattle or Seattle Public Utilities." Text="Non-Outage Related" />
<asp:ListItem Value="General Electrical Outage " Text="Electrical Outage" />
<asp:ListItem Value="threatening or 911-related emergency:" Text="Life Threatening" />
</asp:DropDownList>
<asp:Label ID="lblSelectError" runat="server" Text="You must Select a call type" Visible="false" />
<div id="ctDescrip1" runat="server"><p>Any Additional information agent might need to decide if the call is a <b>Non-outage </b>related
business with the City of Seattle Public Utilities</p></div>
<div id="ctDescrip2" runat="server"><p>Any Additional information agent might need to decide if the call is a <b>General Electrical Outage </b></p></div>
<div id="ctDescrip3" runat="server"><p>Any Additional information agent might need to decide if the call is a <b>Life Threatening or 911 related emergency</b></p></div>
<asp:Panel Visible="false" runat="server" ID="pnlNonER">
<h2>CALL TYPE 1 Non-outage related business with the City of Seattle or Seattle Public Utilities:</h2>
<p><b>Agent:</b> <i>Im sorry; we are not handling regular business issues due to the current emergency situation. Please call back at a later time.</i></p>
<p><b>If caller states that they have a 911 emergency:</b> <i> If you have a serious emergency, please hang up and dial 911 directly. </i></p>
<p><b>If caller states they have some other non-outage related emergency:</b><i> If you are calling to report a flooding or water quality emergency, please hang up and call 206-386-1800. </i></p>
<p><b>Thank caller and end call and click Save</b></p>
<asp:Button Text="Save Call" OnClick="btnSaveNonERCall_Click" ID="btnSaveNonERCall" runat="server" />
</asp:Panel>
<asp:Panel ID="pnlNonERSuccessSave" Visible="false" runat="server">
<h1>Thank you. The call has been tracked.</h1>
</asp:Panel>
<asp:Panel ID="pnlOutage" Visible="false" runat="server">
<h1>Outage Panel</h1>
</asp:Panel>
<asp:Panel ID="pnlLifeThreatening" Visible="false" runat="server">
<h1>Life Threatening Panl</h1>
</asp:Panel>
</fieldset>
</div>
</form>
</body>
</html>
mohan_sekar
Mouse events in the Option tag don't work in IE.
Ah I'll just put you out of your misery. There is no event support in IE for the option element using the events you wish, or any that will work around it.
http://msdn.microsoft.com/en-us/library/ms535877(VS.85).aspx
You're going to have to re-think your approach. This looks like a good candidate for designing your own custom drop down list using elements better suited to the events you wish to incorporate. Not that hard.
dday
http://msdn.microsoft.com/en-us/library/ms535877(VS.85).aspx
You're going to have to re-think your approach. This looks like a good candidate for designing your own custom drop down list using elements better suited to the events you wish to incorporate. Not that hard.
dday
I would actually not hide a life threatening option in a dropdown
Just have 3 links or radios under each other
Just have 3 links or radios under each other
ASKER
Dday - do you know of any good resources on how to go about developing my own custom drop down control?
ASKER
Oh and I want to use a drop down because I want it to be as similar to the agents current scripting environment.
ASKER
Anyone know how to create a custom drop down list with links as drop downs as opposed to list items?
JL
JL
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I thought that might be what this comes down to... Thanks a ton for your help ddayx10!