Hi, I have no clue in WebmenuI'm editing an asp page, where there is a web menu.
What I want to do is almost like a tooltip over a webmenu item,how do I add an onmouseover function to an item to display text?
<Items> <ignav:Item TargetUrl="Home.aspx" IslandClass="" TagString="" HoverImageUrl="" ImageUrl="" Text=" Home " HiliteClass="" TargetFrame="" CssClass="mnuHome" HoverClass="mnuHomeHover"></ignav:Item>
I want to add the following javascript function onMouseover of "Home Item"
<div id="hoverText" class="main" style="padding: 3px;></div> <script type="text/javascript"> var hoverText = document.getElementById('hoverText'); function showHover(txt, e){ if(document.all){ xpos = event.clientX + document.body.scrollLeft; } else{ xpos = e.pageX; ypos = e.pageY; }
hoverText.innerHTML = txt; hoverText.style.left = xpos + 13 + 'px';} function hideHover(){ hoverText.innerHTML = ""; hoverText.style.display = "none"; } </script>Mouseover="showHover('All Open Process', event);"
Please Assist, I need to get this going! (ismailc@parmalat.co.za)
Regards
Hello Ismail,You can do this by using the clientside events of webMenu.This can be achieved by first informing the WebMenu that you want to hook the events in this way:
<MenuClientSideEvents ItemHover="ItemHover" />
You must put this line after (or before) the main ITEMS element. Than you will need this simple JS function to do your work:
function ItemHover(MenuId, ItemId, boHover){var item = igmenu_getItemById(ItemId); var txt = "MenuID: " + MenuId + " | ItemId: " + ItemId + " | boHover: " + boHover;return false;}
Now you have the item which raised the event and a bool flag (boHover) which indicates if it was hovered (true) or unhovered (false).On the item object you have several useful methods, such as: getText() (which gets the text of the menu item), getElement() (which gets the underlying HTML DOM Element), etc. More of these can be found in the documentation.
Hope this helps!
Best regards,
Thank You very much Anton Staykov , i am still strugling as i have no idea what i'm doing.
This is a once off for me - i have to provide info to display as user hover over 4 items:
Please help fixing the below code, i don't know how to link up the item with the function & how does it work with the other items
also see that the function has 3 param - how do i use this in te item?
<table width="100%" style="border:none;" cellpadding="0" cellspacing="0"> <tr> <td>
<ignav:UltraWebMenu id="mnu" runat="server"> <MenuClientSideEvents ItemHover="ItemHover" />
<Items> <ignav:Item TargetUrl="Home.aspx" IslandClass="" TagString="" HoverImageUrl="" ImageUrl="" ItemHover="test" Text=" Home " HiliteClass="" TargetFrame="" CssClass="mnuHome" HoverClass="mnuHomeHover"></ignav:Item>
Please Assist!
Hi again,First of all, there is no such property "ItemHover" on <ignav:Item> element. Than, the <MenuClientSideEvents ItemHover="ItemHover" /> hooks the MouseOver/MouseOut on ALL items of the Menu. That's why there is parameter ItemId. And in the primer I showed you how to use that ID to get the actual item object ( var item = igmenu_getItemById(ItemId) ). Than you can use methods and/or properties on that object to determine which exactly MenuElement was hovered.
More information on how to use CSOM (CliendSide Object Model) can be found in our product documentation at: http://es.infragistics.com/support/documentation.aspx and more specific here: http://help.infragistics.com/Help/NetAdvantage/NET/2008.2/CLR2.0/html/WebMenu_Item_Object_CSOM.html
Hope this helps!Best,
Thank You very much for all your effort & patience.
It's just to confusing for me - i just wanted the 4 items to have tooltip.
I know i'm asking a lot - is there no way you can assist by showing in my code.
Thank You