top button
Flag Notify
Site Registration

How to use Hovermenuextender in asp.net?

+1 vote
104 views

How to use Hovermenuextender in asp.net?

posted Jul 17, 2014 by Arun

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

2 Answers

0 votes

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.ForeColor = System.Drawing.Color.FromName(RadioButtonList1.SelectedItem.Text);
}



Ajax HoverMenuExtender - How to use HoverMenuExtender in asp.net ajax

.PanelCSS
{
visibility:hidden;
}





Ajax Control Toolkit Example: Using HoverMenuExtender















Tan
Crimson
DarkBlue
SeaGreen
OrangeRed
Magenta
DeepPink





answer Nov 12, 2014 by Manikandan J
0 votes
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style type="text/css">
        .HoverPopUp
    {
        background-color: yellow;
        width: 80px;
        border: 1px solid black;
        position: absolute;
        left: 0px;
        top: 0px;
    }
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var left = 10;
    var top = 10;
    var IsMouseOverPopUp;
    $(document).ready(function () {
        BindHoverMenu();
    });
    function BindHoverMenu() {
        $(".HoverMenu").css("display", "none");
        $(".HoverTarget").mouseover(function () {
            IsMouseOverPopUp = false;
            var p = GetCordinates($(this).get(0));
            $("#dvHover").css("left", $(this).get(0).offsetWidth + left + "px");
            $("#dvHover").css("top", p.y + top + "px");
            $("#dvHover").css("display", "block");
            $("#dvHover").html($(this).parent().children(".HoverMenu").html());
            $(this).mouseout(function () {
                HideHoverMenu();
            });
        });
        $("#dvHover, .HoverTarget").mouseover(function () {
            IsMouseOverPopUp = true;
        });
        $("#dvHover, .HoverTarget").mouseout(function () {
            IsMouseOverPopUp = false;
            HideHoverMenu();
        });
    }
    function GetCordinates(obj) {
        var p = {};
        p.x = obj.offsetLeft;
        p.y = obj.offsetTop;
        while (obj.offsetParent) {
            p.x = p.x + obj.offsetParent.offsetLeft;
            p.y = p.y + obj.offsetParent.offsetTop;
            if (obj == document.getElementsByTagName("body")[0]) {
                break;
            }
            else {
                obj = obj.offsetParent;
            }
        }
        return p;
    }
    function HideHoverMenu() {
        setTimeout(function () {
            if (!IsMouseOverPopUp) {
                $("#dvHover").css("display", "none");
            }
        }, 500);
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a href="javascript:;" class="HoverTarget">Menu1</a>
        <div class="HoverMenu">
            <table>
                <tr>
                    <td>
                        <a href="javascript:;">SubMenu1</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="javascript:;">SubMenu2</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="javascript:;">SubMenu3</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div>
        <a href="javascript:;" class="HoverTarget">Menu2</a>
        <div class="HoverMenu">
            <table>
                <tr>
                    <td>
                        <a href="javascript:;">SubMenu1</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="javascript:;">SubMenu2</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="javascript:;">SubMenu3</a>
                    </td>
                </tr>
                 <tr>
                    <td>
                        <a href="javascript:;">SubMenu4</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
<div id="dvHover" class="HoverPopUp" style = "display:none">
</div>
    </form>
</body>
</html>
answer Nov 28, 2014 by Manikandan J
...