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!

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

AJAX Hover Menu problem

Status
Not open for further replies.
BrianBurgit

BrianBurgit

IS-IT--Management
Joined
Dec 13, 2004
Messages
95
Location
US
Hello,

I have a ASP.NET website that uses a master page that contains the navigation for the site. The navigation buttons are images. Some of the navigation button images have hover menus tied to them, using the MS AJAX Hover Menu Extender. Those hover menus contain several image buttons, so as to create a drop down menu affect. The problem I have is when any of the pages are loading all of my hover menu image buttons flash on the left side of the screen for a second or less as the page is being rendered, making it confusing for the user and unprofessional. Anyone ever deal with this, and can this be stopped?

Thanks,

Brian
 
Sort by date Sort by votes
Link to the page?

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
I reviewed How to get the best answers as you suggested. I'm sorry johnwm, what do you suggest?
 
Upvote 0 Downvote
He suggests you give us a link to the page, or at least enough code to reproduce the problem so we may be able to help.

Otherwise, we are just guessing.

But if guessing we are, it seems to me your drop downs start out visible, and the are made invisible by the JS.
Perhaps if you set your menu's display or visibility to none from the CSS, you would not get the flash.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
I have code like this and have tried display:none on the <div> and visible=false on the asp:panel. They do not flash on the screen when I do this, but then they do not become visible when the target control is hovered over. What would make them visible again when they need to be?

<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="imgWedding" PopupControlID="pnlWeddingNav" PopupPosition="Bottom" OffsetX="6"> </cc1:HoverMenuExtender>


<div style=" position:relative; z-index:2;">

<asp:Panel ID="pnlWeddingNav" runat="server">

<asp:ImageButton runat="server" ID="imbWeddingSales" ImageUrl="/Images/DropDownMenu/WeddingDDSales.jpg" AlternateText="" /><br />

<asp:ImageButton runat="server" ID="imbWeddingBridalShows" ImageUrl="/Images/DropDownMenu/WeddingDDBridalShows.jpg" AlternateText="" /><br />

</asp:Panel>

</div>
 
Upvote 0 Downvote
What you will really have to do is

(a) send us a link to the page in question (best)
(b) give us the generated css and html (view source) of the page once it passes through the asp.net processor.

This way we will be able to see what the asp.net control does to show the menu and will be able to tell you what to fix.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Here is a link to the page


Here is the page source - note that the code I posted earlier was just a small sample of the entire page. Also, this is the page as I have originally built it, without the div display:none or asp:panel visible = false



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "


<html xmlns=" >
<head id="ctl00_Head1"><title>
Expertly providing Tuxedos, Formal Wear and suit rentals for over 70 years
</title><link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" /><meta name="Keywords" content="Tuxedo rentals, formal wear, tuxedos" /><meta name="Description" content="Sarno &amp; Son Tuxedos is the only place for the newest tuxedo, formal wear and suit styles from today's top designers at the best prices! Serving the Northeast United States for over 60 years, always providing a great fit, excellent service, and competitive prices." /></head>
<body>
<form name="aspnetForm" method="post" action="Index.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTcwODg1MTE2Ng9kFgJmD2QWAgIDD2QWBAIPD2QWAgIDDw9kFgIeB29uZm9jdXMFGmphdmFzY3JpcHQ6dGhpcy52YWx1ZT0nICc7ZAIRDw8WAh4HVmlzaWJsZWhkZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WHAUVY3RsMDAkaW1iV2VkZGluZ1NhbGVzBRtjdGwwMCRpbWJXZWRkaW5nQnJpZGFsU2hvd3MFGGN0bDAwJGltYldlZGRpbmdCcm9jaHVyZQUZY3RsMDAkaW1iV2VkZGluZ091dE9mVG93bgUcY3RsMDAkaW1iV2VkZGluZ0xhdGVzdFN0eWxlcwUSY3RsMDAkaW1iUHJvbVNhbGVzBRdjdGwwMCRpbWJQcm9tQmVjb21lQVJlcAUVY3RsMDAkaW1iUHJvbUJyb2NodXJlBRljdGwwMCRpbWJQcm9tTGF0ZXN0U3R5bGVzBRBjdGwwMCRpbWJBYm91dFVzBRpjdGwwMCRpbWJBYm91dFRlc3RpbW9uaWFscwUXY3RsMDAkaW1iQWJvdXRCZXN0UHJpY2UFD2N0bDAwJGltYkZpbmRHbwULY3RsMDAkcmFkMTAFC2N0bDAwJHJhZDEwBQtjdGwwMCRyYWQyNQULY3RsMDAkcmFkMjUFC2N0bDAwJHJhZDUwBQtjdGwwMCRyYWQ1MAUTY3RsMDAkaW1iTXVsdGltZWRpYQUNY3RsMDAkaW1iSG9tZQUOY3RsMDAkaW1iU3R5bGUFFGN0bDAwJGltYkFjY2Vzc29yaWVzBRRjdGwwMCRpbWJRdWluY2VhbmVyYQUVY3RsMDAkaW1iTWVhc3VyZW1lbnRzBQtjdGwwMCRpbWJRQQUSY3RsMDAkaW1iQ29udGFjdFVzBRJjdGwwMCRpbWJNeVdlZGRpbmeIN4Fxh0f8RAHbcS2kP8Z7foR+AQ==" />
</div>

<script type="text/javascript">
//<![CDATA[
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="/WebResource.axd?d=m4kP67Vz0Cl567CkEA4wcg2&amp;t=634134948018869004" type="text/javascript"></script>


<script src="/ScriptResource.axd?d=9z9JFM8MeM8caDWF3XbQL8DG-n2G0mC-mzxKHypJnpkSKExs7EJlKOGjGJTNjD0mKfU0yioFC-qUtFL8pNHpfC-IxjyJo44TM2ljIRUXZc81&amp;t=fffffffff4b194ff" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ScriptResource.axd?d=9z9JFM8MeM8caDWF3XbQL8DG-n2G0mC-mzxKHypJnpkSKExs7EJlKOGjGJTNjD0miSHBzG3KvbjXw8RAmJ0f6V_vKgkEGWNGRtANRJDQwnPGO6fQU_9v-rGzxgV7lKav0&amp;t=fffffffff4b194ff" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=D1w0b9UpqPbwfHEMIh2sDDRJ_lZZWSnNCt81doExSdays4mh8uwoEp7-Y3ViGOUfc-h0DoPdFCz6simhZ9tlIlqN7F6x4JYLMronyCxl2No1&amp;t=17f407e8" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=D1w0b9UpqPbwfHEMIh2sDDRJ_lZZWSnNCt81doExSday22cvkfoJ4zUH8zcnncoGGZa-24nFjlv2WITibO7dfQ2&amp;t=17f407e8" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=D1w0b9UpqPbwfHEMIh2sDDRJ_lZZWSnNCt81doExSdYEP51AE_j7bkfiLukTfbK6oSKHzTnPh7sNp1a4jpZUOFgh1_QQdBME8s9cBE4SSeg1&amp;t=17f407e8" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=D1w0b9UpqPbwfHEMIh2sDDRJ_lZZWSnNCt81doExSdZTkIw2IjYHyLnHyyDydLBuuOFNM2UTv5fmpffnaiFiKL38qWbtakmCGb6DjK08MUQ1&amp;t=17f407e8" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=D1w0b9UpqPbwfHEMIh2sDDRJ_lZZWSnNCt81doExSdYEP51AE_j7bkfiLukTfbK6HtdKOd2TXDZtLphl805_qMg8_jeHBPtBE_CO5rhKKvY1&amp;t=17f407e8" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=D1w0b9UpqPbwfHEMIh2sDDRJ_lZZWSnNCt81doExSdZksUtHR02afv60cSrDeYgsh8Jg13hf4k1EsRkOKg1TSrIQl5CB9Ml9mMHqudPpoGuoWBrRITqSDVDXcMwsHMmE0&amp;t=17f407e8" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=D1w0b9UpqPbwfHEMIh2sDDRJ_lZZWSnNCt81doExSdZtRveJs5D2xlbYyjVJYTRzQdvJ21QpbjI4-o0u9dj7s-ua4rVkN2UGz-WHXlJWc1A1&amp;t=17f407e8" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=D1w0b9UpqPbwfHEMIh2sDDRJ_lZZWSnNCt81doExSdalJqHjNpEFTevEWLWJK8HT518AMu1Nblkyon1nk0A67YLNEtMCisL4pmJ214ylrnY1&amp;t=17f407e8" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=D1w0b9UpqPbwfHEMIh2sDDRJ_lZZWSnNCt81doExSdYx2uuNzi7k2inz1Um9qJYT-YhESQF6W90qoyMNpT9yGEjUZ7kFC624a0rAcYHyEF01&amp;t=17f407e8" type="text/javascript"></script>
<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWGwKghJHTAQLJ+PXNDAL5p9SVBAKV/oqYAwKd5/LfDgLqy8KuCAK22I8cAtnI8CICnqDCvAECzeuR8ggC1vDA/AMC69b6zA8CoOn+kQECwcivywwC3P+Wmg4C7pO/ng4C6ZOTowcC7pPvsQ0CsZy++wYCzseBPQLqjbMqAoKHnIQNAsaXiTYC1bH4owcCnpbf6QwCgLGNlwIC893W6QTh9K6TmPi6DQN67rvK4gZw6YHxPQ==" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>





<div style=" position:relative; z-index:2;">
<div id="ctl00_pnlWeddingNav">

<input type="image" name="ctl00$imbWeddingSales" id="ctl00_imbWeddingSales" src="/Images/DropDownMenu/WeddingDDSales.jpg" style="border-width:0px;" /><br />
<input type="image" name="ctl00$imbWeddingBridalShows" id="ctl00_imbWeddingBridalShows" src="/Images/DropDownMenu/WeddingDDBridalShows.jpg" style="border-width:0px;" /><br />
<input type="image" name="ctl00$imbWeddingBrochure" id="ctl00_imbWeddingBrochure" src="/Images/DropDownMenu/WeddingDDBrochure.jpg" style="border-width:0px;" /><br />
<input type="image" name="ctl00$imbWeddingOutOfTown" id="ctl00_imbWeddingOutOfTown" src="/Images/DropDownMenu/WeddingDDOutOfTown.jpg" style="border-width:0px;" /><br />
<input type="image" name="ctl00$imbWeddingLatestStyles" id="ctl00_imbWeddingLatestStyles" src="/Images/DropDownMenu/WeddingDDLatestStyles.jpg" style="border-width:0px;" />

</div>
</div>
<div style=" position:relative; z-index:2;">
<div id="ctl00_pnlPromNav">

<input type="image" name="ctl00$imbPromSales" id="ctl00_imbPromSales" src="/Images/DropDownMenu/PromDDSales.jpg" style="border-width:0px;" /><br />
<input type="image" name="ctl00$imbPromBecomeARep" id="ctl00_imbPromBecomeARep" src="/Images/DropDownMenu/PromDDBecomeARep.jpg" style="border-width:0px;" /><br />
<input type="image" name="ctl00$imbPromBrochure" id="ctl00_imbPromBrochure" src="/Images/DropDownMenu/PromDDBrochure.jpg" style="border-width:0px;" /><br />
<input type="image" name="ctl00$imbPromLatestStyles" id="ctl00_imbPromLatestStyles" src="/Images/DropDownMenu/PromDDLatestStyles.jpg" style="border-width:0px;" />

</div>
</div>
<div style=" position:relative; z-index:2;">
<div id="ctl00_pnlAboutUsNav">

<input type="image" name="ctl00$imbAboutUs" id="ctl00_imbAboutUs" src="/Images/DropDownMenu/AboutUsDDAboutUs.jpg" style="border-width:0px;" /><br />
<input type="image" name="ctl00$imbAboutTestimonials" id="ctl00_imbAboutTestimonials" src="/Images/DropDownMenu/AboutUsDDTestimonials.jpg" style="border-width:0px;" /><br />
<input type="image" name="ctl00$imbAboutBestPrice" id="ctl00_imbAboutBestPrice" src="/Images/DropDownMenu/AboutUsDDBestPrice.jpg" style="border-width:0px;" />

</div>
</div>
<div id="ctl00_pnlSarnoHeader" class="mastheader">

<div style=" width:963px; height:114px; margin-left:auto; margin-top:auto; margin-right:auto; background-image:url('/Images/SarnoHeader4.png');">
<div style="width:382px; height:114px; position:relative; left:581px; color: White; font-size: 9pt;
font-family: Verdana, sans-serif;" align="right">
<img id="ctl00_imgFind" src="/Images/FindAStore.gif" style="border-width:0px;" />
<input name="ctl00$txtFindAStore" type="text" value="Please enter your zip code" id="ctl00_txtFindAStore" onfocus="javascript:this.value=' ';" />
&nbsp;
<input type="image" name="ctl00$imbFindGo" id="ctl00_imbFindGo" alt="" src="/Images/find_a_store_go3.jpg" style="border-width:0px;" />
<br />
Search within
<span style="color:White; vertical-align:middle;">
<input id="ctl00_rad10" type="radio" name="ctl00$FindStore" value="rad10" /><img src="/Images/10.jpg" alt="" />
<input id="ctl00_rad25" type="radio" name="ctl00$FindStore" value="rad25" /><img src="/Images/25.jpg" alt="" />
<input id="ctl00_rad50" type="radio" name="ctl00$FindStore" value="rad50" /><img src="/Images/50.jpg" alt="" />
</span>
Miles
<br />&nbsp;&nbsp;&nbsp;
<input type="image" name="ctl00$imbMultimedia" id="ctl00_imbMultimedia" src="/Images/multimedia2.jpg" style="border-width:0px;" />


</div>
</div>

<div style=" width:963px; height:34px; background-image:url('/Images/NavImages/SarnoNavBackground.jpg'); margin-left:auto; margin-right:auto;">
<input type="image" name="ctl00$imbHome" id="ctl00_imbHome" src="/Images/NavImages/SarnoNavHome.jpg" style="border-width:0px;" />
<input type="image" name="ctl00$imbStyle" id="ctl00_imbStyle" src="/Images/NavImages/SarnoNavStyleGallery.jpg" style="border-width:0px;" />
<input type="image" name="ctl00$imbAccessories" id="ctl00_imbAccessories" src="/Images/NavImages/SarnoNavAccessories.jpg" style="border-width:0px;" />
<img id="ctl00_imgWedding" src="/Images/NavImages/SarnoNavWedding.jpg" style="border-width:0px;" />
<img id="ctl00_imgProm" src="/Images/NavImages/SarnoNavProm.jpg" style="border-width:0px;" />
<input type="image" name="ctl00$imbQuinceanera" id="ctl00_imbQuinceanera" src="/Images/NavImages/SarnoNavQuinceanera.jpg" style="border-width:0px;" />
<input type="image" name="ctl00$imbMeasurements" id="ctl00_imbMeasurements" src="/Images/NavImages/SarnoNavMeasurements.jpg" style="border-width:0px;" />
<input type="image" name="ctl00$imbQA" id="ctl00_imbQA" src="/Images/NavImages/SarnoNavQA.jpg" style="border-width:0px;" />
<img id="ctl00_imgAboutUs" src="/Images/NavImages/SarnoNavAboutUs.jpg" style="border-width:0px;" />
<input type="image" name="ctl00$imbContactUs" id="ctl00_imbContactUs" src="/Images/NavImages/SarnoNavContactUs.jpg" style="border-width:0px;" />
<input type="image" name="ctl00$imbMyWedding" id="ctl00_imbMyWedding" src="/Images/NavImages/SarnoNavMyWedding.jpg" style="border-width:0px;" />
</div>

</div>

<div align="center">

<div style=" position:relative; z-index:1;">
<object classid="clsid:D697CDE7E-AE6D-11cf-96B8-458453540000"
codebase=" id="animation name" width="468" height="60">
<param name="movie" value="/Flash/sarnosearch10.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<param name="wmode" value="transparent" />

<embed name="animationname" wmode="transparent" src="/Flash/sarnosearch10.swf" quality="high" bgcolor="#FFFFFF"
width="963" height="320"
type="application/x-shockwave-flash"
pluginspage=" </embed>
</object>
</div>
<table style=" background-color:White; text-align:left;" width="963" border="0" cellspacing="0" cellpadding="10px">
<tr>
<td width="620" valign="top">
<img src="/Images/hd_welcome.jpg" height="20" width="80" alt="Welcome" />
<br /><br />Sarno &amp; Son Tuxedos has been providing formalwear to the
northeast for over 70 years. Whether you're getting married, attending a
wedding, prom, college formal, or any other black-tie
affair &mdash; Sarno &amp; Son will help you look your best. We have such
a wide variety of designer tuxedos to choose from and hundreds of different
colors in vests and ties. Our vast variety includes styles from top name
designers including Ralph Lauren, Calvin Klein, Perry Ellis, Ecko,
Andrew Fezza, our Sarno &amp; Son exclusive &mdash; Demetrios, and much more!
Sarno &amp; Son has been chosen as the exclusive provider for menswear by
the world renowned bridal designer &mdash; Demetrios. We are proud to offer
you this national exclusive. Sarno &amp; Son has locations in Pennsylvania,
New Jersey, and Virginia. When you need to look your best &mdash;
Choose Sarno &amp; Son.
</td>
<td width="30" align="center" valign="top">
<img src="/Images/1x1black.gif" height="145" width="1" alt="" />
</td>
<td width="219" valign="top">
<img src="Images/hd_ecatalog.jpg" height="20" width="94" alt="Welcome" /><br /><br />
<table>
<tr>
<td valign="top">Browse the<br />entire 170 page<br />Sarno Catalog<br /> <a href="sarnotux_catalog_2010/index.html">Click here</a>
</td>
<td><img src="Images/2010_eCatalog.jpg" width="72" height="93" alt="" />
</td>
</tr>
</table>
</td>

</tr>

</table>
<br />

</div>
<div style=" text-align:center; color:Yellow;">
<div id="ctl00_pnlFooter">

<span style=" color:#aaaaaa;">
Sarno & Son has been servicing the North East United States for over
65 years<br />
©2010 Sarno & Son Tuxedos. All rights reserved. | 401 South Washington Avenue, Scranton, PA 18505-3801 | 570-346-5725 | 800-233-1404<br />
<a id="ctl00_hypContact" href="ContactUs.aspx">Contact Us</a>&nbsp;|&nbsp;
<a id="ctl00_hypCopyright" href="Copyright.aspx">Copyright Notice</a>&nbsp;|&nbsp;
<a id="ctl00_hypTree" href=" by TREE</a>
</span>

</div>
</div>


<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.HoverMenuBehavior, {"OffsetX":6,"PopupPosition":3,"dynamicServicePath":"/Index.aspx","id":"ctl00_HoverMenuExtender1","popupElement":$get("ctl00_pnlWeddingNav")}, null, null, $get("ctl00_imgWedding"));
});
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.HoverMenuBehavior, {"OffsetX":6,"PopupPosition":3,"dynamicServicePath":"/Index.aspx","id":"ctl00_HoverMenuExtender2","popupElement":$get("ctl00_pnlPromNav")}, null, null, $get("ctl00_imgProm"));
});
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.HoverMenuBehavior, {"OffsetX":6,"PopupPosition":3,"dynamicServicePath":"/Index.aspx","id":"ctl00_HoverMenuExtender3","popupElement":$get("ctl00_pnlAboutUsNav")}, null, null, $get("ctl00_imgAboutUs"));
});
//]]>
</script>
</form>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
PeDa
  • Locked
  • Question Question
CSS two level horizontal menu
Replies
0
Views
928
PeDa
PeDa
waubain
  • Locked
  • Question Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
422
waubain
waubain
waubain
  • Locked
  • Question Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image.
Replies
5
Views
667
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top