How to show/hide menu on mouseover and mouseout?

6 posts, 0 answers
  1. Vaseem Anjum
    Vaseem Anjum avatar
    12 posts
    Member since:
    Mar 2007

    Posted 16 Feb 2009 Link to this post

    Hi 
        I have a div and onmouseover of that div i need to show the menu and when use onmouseouts from that div i need to hide that menu i tried doing this with contextmenu and successfully show/hide menu but the problem is when user onmouseouts to click the menu the menu gets hidden. I need to keep showing menu onmouseout but if user goes away i need to hide.

    Here is a sample code of what i am trying to achieve.

     

    <div class="items1 anchorclass" rel="submenu1" onmouseover="showMenu(event)" onmouseout="hidemenu(e)" >

     

     

    <asp:ImageButton ID="imgDemographics" runat="server" ImageUrl="../App_Themes/MainTheme/Images/icon_dp_d.png" /><br />

     

    Demographics

    </div>

     

     

    <script type="text/javascript" language="javascript">

     

     

     

     

    function showMenu(e)

     

    {

     

    var contextMenu = $find("<%= mnuDemographic.ClientID %>");

     

     

     

    if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))

     

    {

     

     

    contextMenu.showAt(e.screenX - 40, e.screenY - 120);

    }

     

     

     

    // $telerik.cancelRawEvent(e);

     

     

     

    }

     

    function hidemenu(e)

     

    {

     

    var contextMenu = $find("<%= mnuDemographic.ClientID %>");

     

     

     

    if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))

     

    {

     

     

    contextMenu.hide();

    }

    }

     

     

     

     

    </script>

     

    <

    telerik:RadContextMenu ID="mnuDemographic" runat="server" Skin="Default" Flow="Vertical"

     

     

     

     

    CausesValidation="False" onclientshowing="OnClientShowingHandler">

     

     

     

     

    <Items>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Enrollment" Value="1">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Free Reduced Lunch" Value="2">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Attendance" Value="3">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Drop Outs/Graduation Rate" Value="4">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Mobility" Value="5">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Referrals" Value="6">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Retentions" Value="7">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Programs" Value="8">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Staff" Value="9">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    <telerik:RadMenuItem runat="server" Text="Generate Demographic Profile" Value="10">

     

     

     

     

    </telerik:RadMenuItem>

     

     

     

     

    </Items>

     

     

     

     

    </telerik:RadContextMenu>

    Thanks

     

  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 18 Feb 2009 Link to this post

    Hi Vaseem,

    I've modified your code, so that the context menu is not hidden when the mouse is over it. Please download the attached file and examine it.

    Greetings,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Susan
    Susan avatar
    137 posts
    Member since:
    Jul 2007

    Posted 05 Aug 2009 Link to this post

    This sounds like the same problem I am having. I have had this working for some time and my code looks like your attached example, from what I can tell. It works fine in IE but does not work in Firefox. You can go to www.americance.com in Firefox, hold your mouse over the Cosmetology and you will see what happens. The following is my code:

    Thanks so much.
    Susan

     

    <div>

     

     

    <div onmouseover="showMenuCosmetology(event)" onmouseout="hidemenuCosmetology(event)">

     

     

    <img name="cosmetology" src="images/cosmetology.gif" width=152 height=157 alt="" border="0" onmouseover="over(0)" onmouseout="out(0)"/>

     

     

    </div>

     

     

     

    <script type="text/javascript" language="javascript">

     

     

    function showMenuCosmetology(e)

     

    {

     

    var contextMenu = $find("<%= mnuCosmetology.ClientID %>");

     

     

    if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))

     

    {

    contextMenu.show(e);

     

    //contextMenu.showAt(e.screenX, e.screenY);

     

    }

     

    // $telerik.cancelRawEvent(e);

     

    }

     

     

    function hidemenuCosmetology(e)

     

    {

     

     

    var contextMenu = $find("<%= mnuCosmetology.ClientID %>");

     

     

    if ((!e.toElement) || (!$telerik.isDescendantOrSelf(contextMenu.get_childListElement(), e.toElement)))

     

    {

    contextMenu.hide();

    }

    }

     

    </script>

     

     

     

    <telerik:RadContextMenu ID="mnuCosmetology" runat="server" Skin="Web20" Flow="Vertical" CausesValidation="False">

     

     

    <Items>

     

     

    <telerik:RadMenuItem runat="server" Text="Available States" BackColor="#365689" ForeColor="White"></telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" IsSeparator="true"></telerik:RadMenuItem>

     

     

     

    <telerik:RadMenuItem runat="server" Text="Texas" ImageUrl="images/texas.jpg">

     

     

    <Items>

     

     

    <telerik:RadMenuItem runat="server" Text="Facial Specialist" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=36"></telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" Text="Hair Weaver" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=38"></telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" Text="Hair Braider" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=39"></telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" Text="Manicurist" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=41"></telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" Text="Operator" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=43"></telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" Text="Shampoo Specialist" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=44"></telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" Text="Wig Specialist" NavigateUrl="Courses.aspx?St=TX&IK=4&LTK=45"></telerik:RadMenuItem>

     

     

    </Items></telerik:RadMenuItem>

     

     

    </Items>

     

     

    </telerik:RadContextMenu>

     

     

    </div>

     


  5. Susan
    Susan avatar
    137 posts
    Member since:
    Jul 2007

    Posted 07 Aug 2009 Link to this post

    Telerik,
    Any luck figuring this out? If you go to www.americance.com and use Firefox, you will see what is happening. Hold your mouse over 'Salon' and the context menu works, but the minute you go to the menu to try and choose something, it goes away...and then comes back. looks like going to the menu itself causes an 'onmouseout'.

    Thanks for the help.
    Susan
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 10 Aug 2009 Link to this post

    Hello Susan,

    Please modify your hidemenuCosmetology function like this in order to fix this issue in Firefox:

    function hidemenuCosmetology(e) 
        var relTarg = e.relatedTarget || e.toElement; 
        var contextMenu = $find("<%= mnuCosmetology.ClientID %>"); 
        if ((!relTarg) || (!$telerik.isDescendantOrSelf(contextMenu.get_childListElement(), relTarg))) 
        { 
            contextMenu.hide(); 
        } 

    Best regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Susan
    Susan avatar
    137 posts
    Member since:
    Jul 2007

    Posted 10 Aug 2009 Link to this post

    Works great. Thanks so much.

    Susan
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017