I have recently implemented the hover menu extender on a page I am developing and I came across two major problems.

Description of my task:

Create a scrollable panel filled with dynamic target controls.... On roll over I want dynamic "tooltip-like" labels to appear immediately.

Problem 1: Takes FOREVER to actually associate the  300 targets controls and corresponding labels with the hoverProperties and then add that to the hoverextender.

Problem 2: When I attempt to scroll down, the hoverpopup is no longer justifed against the target control. Instead it appears below the panel next to where it should be if the target controls were not inside a scrolable panel.

The way I am dynamically building the controls and dynamically adding properties to the hover extender is probably bad design, and may account for my strange behaviors. However, like several of the toolkit controls....(Drag Panel, Autocomplete, etc). Without modifying the .js files, it is still to buggy to implement with confidence.

I have exactly the same problem.

I hope I am not forced to skip hovermenu. Isn't there a way to make hovermenu work inside a panel ?

You could customize the javascript code to offset the popup position by the scroll position.... However, like all other javascript behaviors in the toolkit, when you try and customize the .js you are faced with a lack of robustness and documentation, which requires considerable tweaking in order to attain behavior beyond what the simple toolkit example pages are capable of.

I suppose we are supposed to come up with better solutions and submit them to the community for consideration... the only problem is I have deadlines.

I hope the ATLAS-people will fix this problem because I have tried to find where to change the code in the hovermenu-files. But I didn't succeded.

But maybe someone can help me.

And what do I do when the code is changed. How do I transfer the new code to my homepage ?

If you search your hard drive for *.js it will give you a listing of all javascript files on your computer.

The toolkit client library javascript files can be found in the various toolkit control folders under the AtlasControlToolkit. If you find yourself editing js code with no spacing you are working with the 'Release' version (which is optimized), look for the 'Debug' version and its easier to read.

Finally when you are ready to begin messing with the .js, you need to include a refernce the .js file you are working inside your script manager using the <script></script> reference, otherwise it will use the default toolkit client library.

Thats how I did it when I needed to rewrite the autocomplete extender behaviors to be less buggy and to have a more 'Windows' like autocomplete

I have found the directory and I have looked at the .js file. I am not an javascript expert. I can't find the place, where I have to change the code.

I don't understand your comment concerning 'Release'-/'Debug'-version. The only directory where I can find a hovermenubehaviour.js is in

...microsoft asp.net/Atlascontroltoolkit/atlascontroltoolkit/hovermenu.

I am also having a problem with the scrollable hoverpopup menu.  I reported the issue at the codplex site for the toolkit. Hopefully there will be a resolution sometime in the near future.

 
http://www.codeplex.com/WorkItem/View.aspx?ProjectName=AtlasControlToolkit&WorkItemId=2726 

I don't know if this issue has been solved in releases following the 20229 but here's a solution to the bug that can be quickly applied to the toolkit source files (also for framework 2.0.

Add to the HoverMenuExtender class in file  HoverMenuExtender.cs the following property...

/// <summary>
/// The ClientID of a scrollable container whose offset
/// has to be applied to the popup element.
/// </summary>

[ExtenderControlProperty]
[DefaultValue("")]
public string ScrollableContainerClientID
{
        get { return GetPropertyValue("ScrollableContainerClientID", ""); }
        set { SetPropertyValue("ScrollableContainerClientID", value); }
}

...add the linked property in HoverMenuBehavior.js file...

this._scrollableContainerClientID = null;

...add the property getter/setter in the same file...

get_ScrollableContainerClientID : function() {
        /// <value type="String">
        /// Scrollable Container ID
        /// </value>
        return this._scrollableContainerClientID;
    },
    set_ScrollableContainerClientID : function(value) {
        if (this._scrollableContainerClientID != value) {
            this._scrollableContainerClientID = value;
            this.raisePropertyChanged('ScrollableContainerClientID');
        }
    },

...and finally modify in the same file the "_getTopOffset" function

      
//   [...]    // this offset is always relative to the top edge of the hover element.
        switch(this._popupPosition) {
            case AjaxControlToolkit.HoverMenuPopupPosition.Top:
                // if it's Top positioned, it's the height of the popup plus the offset.
                delta = (-1 * this._popupElement.offsetHeight);
                break;
            case AjaxControlToolkit.HoverMenuPopupPosition.Bottom:
                // if it's bottom positioned it's the height 
                // of the hover element plus the offset
                delta = this.get_element().offsetHeight;
                break;
        }
		
		// Check for the presence of a scrollable container.
		// If there's one, we need to check its scroll status to add
		// the correct amount of offset to hovermenu popup.
		var scrollOffset = 0;
		
		try{
			if(this._scrollableContainerClientID)
				var scrollContainer = $get(this._scrollableContainerClientID);
				if(scrollContainer){
					scrollOffset = scrollContainer.scrollTop;
				}
		}
		catch(err)
		{
			//alert(err);
			scrollOffset = 0;
		}
		
        return defaultTop - offsetTop + delta + this._offsetY + scrollOffset; 

When you will use this customized Hovermenu you will be able to specify a Scrollable (overflowable) container as a div element whose scroll offset will be now correctly calculated (e.g. :)

 
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 
  TargetControlID="actionImage" PopupControlID="PopupMenu" HoverCssClass="popupHover" 
  PopupPosition="Left" ScrollableContainerClientID="ctl00_ContentBody_TabContainer1_TabPanel2_divProduction">
</ajaxToolkit:HoverMenuExtender>