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!

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

ListBox Flickering on Menu Mouse Hover

Status
Not open for further replies.

ZmrAbdulla

Technical User
Apr 22, 2003
4,364
AE
ListBox that is databound from an Access DB is flickering when mouse hover on menu. Is there any way that I can stop flickering it?

Menu is on the MasterPage and Listbox is on Content Page.

________________________________________________________
Zameer Abdulla
Help to find Missing people
Sharp acids corrode their own containers.
 
Can you provide a link to the page or if not can you paste the resulting HTML here?


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
It is not online.. I will post the HTML, but I think it is too long to post here in a single post. I need to cut it down.

I think the listbox loses focus for a split moment and regain the focus. That is what happening.

________________________________________________________
Zameer Abdulla
Help to find Missing people
Sharp acids corrode their own containers.
 
Here is the HTML requires clean up in my apsx page.
It is trimmed..(Only list items, Input Value)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]


<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head id="ctl00_Head1"><link rel="Stylesheet" type="text/css" href="StyleSheet.css" /><title>
	Contacts
</title>
    
<style type="text/css">
	.ctl00_Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;
left:0px;top:0px; }
	.ctl00_Menu1_1 { color:#0B4680;font-family:Verdana;font-size:0.8em;font-weight:normal;
text-decoration:none; }
	.ctl00_Menu1_2 { color:#0B4680;background-color:#E3EAEB;border-style:None;font-family:
Verdana;font-size:0.8em;font-weight:normal;height:20px;width:100%; }
	.ctl00_Menu1_3 {  }
	.ctl00_Menu1_4 { padding:2px 5px 2px 5px; }
	.ctl00_Menu1_5 {  }
	.ctl00_Menu1_6 { padding:2px 5px 2px 5px; }
	.ctl00_Menu1_7 { background-color:#E3EAEB; }
	.ctl00_Menu1_8 {  }
	.ctl00_Menu1_9 { background-color:#1C5E55; }
	.ctl00_Menu1_10 {  }
	.ctl00_Menu1_11 { background-color:#1C5E55; }
	.ctl00_Menu1_12 { color:White; }
	.ctl00_Menu1_13 { color:White;background-color:#666666; }
	.ctl00_Menu1_14 { color:White; }
	.ctl00_Menu1_15 { color:White;background-color:#666666;border-style:Dashed; }

</style></head>
<body bgcolor="DimGray" topmargin="3">
    <form name="aspnetForm" method="post" action="Contacts.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJLTI5MjA4NDg3D2QWAmYPZBYCAgQPZBYGAgMPDx
................
................
...............OXhrazLKDYM3vlDQ/gsB2A==" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>


<script src="/Intranet/WebResource.axd?d=q8xebshA8Q9-7t8OFb3w_w2&amp;t=63296864411
2428390" type="text/javascript"></script>


<script src="/Intranet/WebResource.axd?d=opIEJlewLpUB_Vg03n2LVA2&amp;t=63296864411
2428390" type="text/javascript"></script>
        <table align="CENTER" width="725" bgcolor="DimGray" border="0" cellpadding="0" cellspacing="0">
            
            <tr height="75">
                <td bgcolor="#ffffff" background="Images/HeaderImage.jpg" style="width: 10px">
                </td>
                <td bgcolor="#ffffff" background="Images/HeaderImage.jpg" style="width: 675px">
                    &nbsp;<span id="ctl00_Label1" style="color:MintCream;background-color:Transparent;font-family:Verdana;
font-size:Larger;">Mohammed Tayyeb Khoory Group</span>
                    
                    <div align="right">
                        <span id="ctl00_LabelPB" style="color:WhiteSmoke;font-family:verdana;font-size:8pt;">P B No: 4664, Dubai, United Arab Emirates</span>
                    </div>
                </td>
                <td bgcolor="#ffffff" background="Images/HeaderImage.jpg" style="width: 10px">
                </td>
            </tr>
            <tr height="35"  bgcolor ="#E3EAEB">
                <td background="Images/bgcrossline.gif" width="10">
                </td>
                <td background="Images/bgcrossline.gif" >
                    <table align="left">
                        <tr height="18">
                        
                            <td background="Images/applications_24.gif" align="center"  width="22px" height="18px">
                            </td>
                            <td width="*" background="Images/bgcrossline.gif"  bgcolor="#E3EAEB">
                                <div align="left">
                                    <span id="ctl00_txtPageName" style="display:inline-block;width:300px;height:20px;font-weight:normal;
font-style:italic;font-size:8pt;font-family:Verdana;color:#0B4680;border-
style:None;background-color:Transparent;">Contacts</span></div>
                            </td>
                            
                            <td width="*" style="height: 20px; width: 368px;" align="right">
                                <div align="right">
                                    <a href="#ctl00_Menu1_SkipLink"><img alt="Skip Navigation Links" src="/Intranet/WebResource.axd?d=tEUPT3TAOh2xwZXXMlAosw2&amp;t=63296864411
2428390" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_Menu1" class="ctl00_Menu1_2" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n0"><table class="ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu1_1 ctl00_Menu1_3" href="Home.aspx">Home</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n1"><table class="ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu1_1 ctl00_Menu1_3" href="Contacts.aspx">Contacts</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n2"><table class="ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu1_1 ctl00_Menu1_3" href="feedback.aspx">Feedback</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n3"><table class="ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu1_1 ctl00_Menu1_3" href="javascript:__doPostBack('ctl00$Menu1','New Item')">New Item</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu1n4"><table class="ctl00_Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu1_1 ctl00_Menu1_3" href="javascript:__doPostBack('ctl00$Menu1','New Item')">New Item</a></td>
			</tr>
		</table></td>
	</tr>
</table><a id="ctl00_Menu1_SkipLink"></a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td background="Images/bgcrossline.gif" width="10" style="height: 35px">
                </td>
            </tr>
            <tr>
                <td background="Images/bgcrossline.gif" width="10">
                </td>
                <td background="Images/bgcrossline.gif">
                    <div>
                        
    <table border="0" width="100%" cellpadding="0" cellspacing="0" background="Images/bgcrossline.gif">
        <tr height="15">
            <td width="190" background="Images/bluebar.jpg" style="height: 18px">
                <font face="Verdana" size="1">
                    <div align="center">
                        Select Contact</div>
                </font>
            </td>
            <td background="Images/bluebar.jpg" style="height: 18px; width: 480px;">
                <font face="Verdana" size="1">
                    <div align="center">
                        <span id="ctl00_MasterSingleContent_LabelDisplay">Details of selected contact</span></div>
                </font>
            </td>
        </tr>
        <tr height="100%">
            <td width="225" height="400" background="Images/bgcrossline.gif" valign="top">
                <select size="4" name="ctl00$MasterSingleContent$ListBox1" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MasterSingleContent$
ListBox1\',\'\')', 0)" id="ctl00_MasterSingleContent_ListBox1" style="background-color:Transparent;font-family:Verdana;font-size:Smaller;
height:90%;width:99%;">
	<option value="Abdol Hameed">Abdol Hameed</option>
	<option value="Abdul Kadir Basha">Abdul Kadir Basha</option>
	<option value="Abdul Nasar">Abdul Nasar</option>
	<option value="Abdul Nazar P P">Abdul Nazar P P</option>
	<option value="Abdul Razaq">Abdul Razaq</option>
	<option value="Abdulla Koya">Abdulla Koya</option>
	</select>
                
                <input name="ctl00$MasterSingleContent$TextBox1" type="text" id="ctl00_MasterSingleContent_TextBox1" style="width:213px;" />&nbsp;&nbsp;<br />
                &nbsp;&nbsp;
                <a id="ctl00_MasterSingleContent_LinkButton1" href="javascript:__doPostBack('ctl00$MasterSingleContent$LinkButton1',')" style="display:inline-block;border-color:Transparent;border-width:0px;
font-family:Verdana;font-size:Small;width:102px;">APPLY FILTER</a>
                <a id="ctl00_MasterSingleContent_LinkButton2" href="javascript:__doPostBack('ctl00$MasterSingleContent$LinkButton2',')" style="display:inline-block;font-family:Verdana;font-size:Smaller;width:
97px;">CLEAR FILTER</a></td>
            <td width="*" background="Images/bgcrossline.gif" style="height: 100%; width: 480px;"
                valign="top">
                <div align="center">
                    <div id="ctl00_MasterSingleContent_panel1" style="border-style:None;height:400px;width:100%;overflow:auto;">
	
                        
                        <table id="ctl00_MasterSingleContent_DataList2" cellspacing="0" cellpadding="1" border="0" style="color:#333333;background-color:White;border-style:None;width:99%;
border-collapse:collapse;">
		<tr>
			<td style="background-color:#F7F6F3;">
                                <table width="100%" cellpadding="0" cellspacing="0" style="font-family: Verdana" "font-size=1"
                                    background="Images/bgcrossline.gif">
                                    <tr height="25px">
                                        <td width="10%" bgcolor="White">
                                        </td>
                                        <td width="50%" bgcolor="White">
                                        </td>
                                        <td width="10%" bgcolor="White">
                                        </td>
                                        <td width="30%" bgcolor="White">
                                        </td>
                                    </tr>
                                    <tr height="25px">
                                        <td width="10%" align="right" bgcolor="#F7F6F3">
                                            <font face="Verdana" color="DimGray" style="font-style: italic" size="1"><b>Name:&nbsp;
                                            </b></font>
                                        </td>
                                        <td align="left" bgcolor="#F7F6F3" colspan="3">
                                            <span id="ctl00_MasterSingleContent_DataList2_ctl00_EmpNameLabel" style="color:Black;font-weight:bold;">Al Baha Meeting Room</span><br />
                                        </td>
                                    </tr>
                                    <tr height="25px">
                                        <td width="10%" align="right" bgcolor="white">
                                            <font face="Verdana" style="font-style: italic" size="1" color="DimGray"><b>Mobile No:&nbsp;
                                            </b></font>
                                        </td>
                                        <td width="50%" align="left" bgcolor="white">
                                            <font size="2pt" face="Verdana">
                                                <span id="ctl00_MasterSingleContent_DataList2_ctl00_MobileLabel" style="font-weight:bold;"></span><br />
                                        </td>
                                        <td width="10%" align="right" bgcolor="white">
                                            <font face="Verdana" style="font-style: italic" size="1" color="DimGray"><b>Speed:&nbsp;
                                            </b></font>
                                        </td>
                                        <td width="30%" align="left" bgcolor="white">
                                            <font size="2pt" face="Verdana">
                                                <span id="ctl00_MasterSingleContent_DataList2_ctl00_SpdMobileLabel" style="font-weight:bold;"></span><br />
                                        </td>
                                    </tr>
                                    <tr height="20px">
                                        <td width="125" align="right" bgcolor="#F7F6F3">
                                            <font face="Verdana" style="font-style: italic" size="1" color="DimGray"><b>Designation:&nbsp;
                                            </b></font>
                                        </td>
                                        <td align="left" bgcolor="#F7F6F3" colspan="3">
                                            <font size="2pt" face="Verdana">
                                                <span id="ctl00_MasterSingleContent_DataList2_ctl00_DesignationLabel"></span>
                                        </td>
                                    </tr>
                                    <tr height="20px">
                                        <td width="125" align="right" bgcolor="white">
                                            <font face="Verdana" style="font-style: italic" size="1" color="DimGray"><b>E Mail:&nbsp;
                                            </b></font>
                                        </td>
                                        <td align="left" bgcolor="white" colspan="3">
                                            <font size="2pt" face="Verdana"><a href="mailto:">
                                                
                                            </a>
                                        </td>
                                    </tr>
                                    <tr height="20px">
                                        <td width="125" align="right" bgcolor="#F7F6F3">
                                            <font face="Verdana" style="font-style: italic" size="1" color="DimGray"><b>Division:&nbsp;
                                            </b></font>
                                        </td>
                                        <td align="left" bgcolor="#F7F6F3" colspan="3">
                                            <font size="2pt" face="Verdana">
                                                <span id="ctl00_MasterSingleContent_DataList2_ctl00_CompanyNameLabel" style="color:Black;">Group Administration</span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
		</tr>
	</table>
                        
                        <table width="100%" cellpadding="0" cellspacing="0" style="font-family: Verdana" "font-size=1">
                        </table>
                        
                        <table id="ctl00_MasterSingleContent_DataList1" cellspacing="0" cellpadding="0" border="0" style="color:#333333;background-color:#F7F6F3;border-style:None;width:99%;
border-collapse:collapse;">
		<tr>
			<td style="background-color:White;">
                                <table width="100%" cellpadding="0" cellspacing="0" style="font-family: Verdana" "font-size=1">
                                    <tr height="25px">
                                        <td width="17%" align="right">
                                            <font face="Verdana" style="font-style: italic" size="1" color="DimGray"><b>Dept / Sec:&nbsp;
                                            </b></font>
                                        </td>
                                        <td width="50%" align="left">
                                            <font size="1pt" face="Verdana">
                                                <span id="ctl00_MasterSingleContent_DataList1_ctl00_DeptNameLabel" style="color:Black;font-weight:bold;">Conference & Training Rooms</span><br />
                                        </td>
                                        <td width="17%" align="right">
                                            <font face="Verdana" style="font-style: italic" size="1" color="DimGray"><b>Extn:&nbsp;
                                            </font>
                                        </td>
                                        <td width="30%" align="left">
                                            <font size="2pt" face="Verdana">
                                                <span id="ctl00_MasterSingleContent_DataList1_ctl00_Label1" style="color:Black;font-weight:bold;">188</span><br />
                                            </font>
                                        </td>
                                    </tr>
                                </table>
                            </td>
		</tr><tr>
			<td style="background-color:#F7F6F3;">
                                <table width="100%" cellpadding="0" cellspacing="0" style="font-family: Verdana" "font-size=1">
                                    <tr height="25px">
                                        <td width="17%" align="right">
                                            <font face="Verdana" style="font-style: italic" size="1" color="DimGray"><b>Dept / Sec:&nbsp;
                                            </b></font>
                                        </td>
                                        <td width="50%" align="left">
                                            <font size="1pt" face="Verdana">
                                                <span id="ctl00_MasterSingleContent_DataList1_ctl01_DeptNameLabel" style="color:Black;font-weight:bold;">Conference & Training Rooms</span><br />
                                        </td>
                                        <td width="17%" align="right">
                                            <font face="Verdana" style="font-style: italic" size="1" color="DimGray"><b>Extn:&nbsp;
                                            </font>
                                        </td>
                                        <td width="30%" align="left">
                                            <font size="2pt" face="Verdana">
                                                <span id="ctl00_MasterSingleContent_DataList1_ctl01_Label1" style="color:Black;font-weight:bold;">188</span><br />
                                            </font>
                                        </td>
                                    </tr>
                                </table>
                            </td>
		</tr>
	</table>
                        
                    
</div>
                </div>
            </td>
        </tr>
    </table>

                    </div>
                </td>
                <td background="Images/bgcrossline.gif" width="10">
                </td>
            </tr>
            <tr height="50">
                <td background="Images/footerimage.jpg">
                </td>
                <td background="Images/footerimage.jpg">
                    <div align="Center">
                        <p>
                            <font face="Verdana" size="1" color="whitesmoke">&nbsp;Click <a href="feedback.aspx">
                                HERE</a> to post your feedback </font>
                            
                        </p>
                    </div>
                </td>
                <td background="Images/footerimage.jpg">
                </td>
        </table>
    
<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWrwIC5v2y1gYCm7rayAQCm7rayAQCjK/........
..................
................
AMHsCYa+3a3z5CNhVl5zPp8eTtFN8=" />
</div>

<script type="text/javascript">
<!--
var ctl00_Menu1_Data = new Object();
ctl00_Menu1_Data.disappearAfter = 500;
ctl00_Menu1_Data.horizontalOffset = 2;
ctl00_Menu1_Data.verticalOffset = 0;
ctl00_Menu1_Data.hoverClass = 'ctl00_Menu1_15';
ctl00_Menu1_Data.hoverHyperLinkClass = 'ctl00_Menu1_14';
ctl00_Menu1_Data.staticHoverClass = 'ctl00_Menu1_13';
ctl00_Menu1_Data.staticHoverHyperLinkClass = 'ctl00_Menu1_12';
// -->
</script>
</form>
</body>
</html>

________________________________________________________
Zameer Abdulla
Help to find Missing people
Sharp acids corrode their own containers.
 
I had an issue like thios with Dropdown lists (asp.net 1.1)

In that case it was to do with javascript displaying the sub page (in my case a popup page). Can you show just the js code for Menu_HoverStatic ?
 
Just to clarify, you say it's flickering when you hover over the contact list as I can't see any flickering in FireFox 2.0.0.2, IE6 or IE7.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Actually, looking back there is a js event called Menu_HoverStatic which many be casuing the problem. Is there any reason you are using js for this event? CSS provides a hover method which may be more suited.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
There is no code on menu except the links.
Here is the actual part of menu if you are interested
Code:
         <asp:Menu ID="Menu1" runat="server" BackColor="White" DynamicHorizontalOffset="2"
            Font-Names="Verdana" Font-Size="0.8em" ForeColor="#0B4680" Orientation="Horizontal"
            StaticSubMenuIndent="10px" Width="100%" Font-Bold="False" Height="20px" BorderStyle="Dotted"
            DisappearAfter="0" DynamicEnableDefaultPopOutImage="False">
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicHoverStyle BackColor="#666666" ForeColor="White" BorderStyle="Dashed" />
            <DynamicMenuStyle BackColor="#E3EAEB" />
            <StaticSelectedStyle BackColor="#1C5E55" />
            <DynamicSelectedStyle BackColor="#1C5E55" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <Items>
                <asp:MenuItem NavigateUrl="~/Home.aspx" Text=" Home" Value="Home" ImageUrl="~/Images/home.gif">
                </asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Contacts.aspx" Text=" Contacts" Value="Contacts" ImageUrl="~/Images/contacts.gif">
                </asp:MenuItem>
                <asp:MenuItem Text=" Departments" Value="New Item" ImageUrl="~/Images/dept.gif" NavigateUrl="~/Departments.aspx">
                </asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/feedback.aspx" Text=" Feedback" Value="Feedback" ImageUrl="~/Images/feedback.gif">
                </asp:MenuItem>
            </Items>
            <StaticHoverStyle BackColor="#666666" ForeColor="White" />
        </asp:Menu>

There is no flickering when you save a page from the html genereated after rendering.


________________________________________________________
Zameer Abdulla
Help to find Missing people
Sharp acids corrode their own containers.
 
Ah, sorry so it's the menu that is flickering not the listbox?


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
OK, I see what's going on now. The Menu_HoverStatic javascript calls are created by the Menu control. Personally, I don't like the way that this menu is created as it's not very accessible. Instead, I'd have a look at using a standard HTML/CSS menu. There are some simple and great examples at:



____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Did you mean to say menu that are asp.net's own is not good?
I haven't done anything extra.

However , I have already changed the menu to my own style with some images and links.

Thanks for the link you provided. Indeed a good place to visit often.


________________________________________________________
Zameer Abdulla
Help to find Missing people
Sharp acids corrode their own containers.
 
Did you mean to say menu that are asp.net's own is not good?
Yes, that's what I meant. The default code that is generated uses javascript for hover links and dynamic pop ups. This will obviously fail if the user has js disabled or it isn't supported. The links I gave you have some great examples of how this can be done with CSS and they will degrade nicely unlike the js ones.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
MS makes things their own way...



________________________________________________________
Zameer Abdulla
Help to find Missing people
Sharp acids corrode their own containers.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top