none
hovermenuextender 在 firefox 及 ie8 出不來?? RRS feed

  • 問題

  • 大家好
    我使用hovermenuextender
    在chrome 及IE9 都是正常的
    但firefox 及 ie8 出不來??
    之前我有發現 Firefox出不來(IE8沒有試)在網路上爬文後加了 display:block; 在Firefox就可以用了
    但最近不知什麼原因又出不來了
    做出來的東西可以參考這裡 http://www.midasuser.com.tw/ccat/
    重要程式碼如下:
                                    <asp:Image ID="ImgShallowFoundation" runat="server" ImageUrl="~/images/淺基礎大項.png" Width="110px" Height="25px" CssClass="HoverBorder" style="margin:0px 0px 1px 20px;border:solid 1px #D7E7FF;border-right:solid 10px #D7E7FF;"/>
                                    <asp:Image runat="server" ImageUrl="~/images/淺基礎大項圖.png" Width="35px" Height="35px" style="margin:0px 0px 0px -143px;"/>
                                    <asp:Panel ID="PanelPopupShallowFoundation" runat="server" CssClass="ProgramIteams" >
                                        <div><a href="ShallowFoundation.aspx" style="color:rgb(70, 151, 208);">淺基礎承載力分析</a></div>
                                        <div><a href="ShallowFoundation.aspx?IsRebarDesign=True" style="color:rgb(70, 151, 208);">淺基礎 RC 設計</a></div>
                                    </asp:Panel>
                                    <asp:HoverMenuExtender ID="HoverShallowFoundation" runat="server" TargetControlID="ImgShallowFoundation" PopupControlID="PanelPopupShallowFoundation" PopupPosition="Right" OffsetX="5" CacheDynamicResults="false"></asp:HoverMenuExtender>
                                    <div style="height:10px;"></div>
                                    <asp:Image ID="ImgPile" runat="server" ImageUrl="~/images/基樁大項.png" Width="110px" Height="25px" CssClass="HoverBorder" style="margin:0px 0px 1px 20px;border:solid 1px #D7E7FF;border-right:solid 10px #D7E7FF;"/>
                                    <asp:Image runat="server" ImageUrl="~/images/基樁大項圖.png" Width="35px" Height="35px" style="margin:0px 0px 0px -143px;"/>
                                    <asp:Panel ID="PanelPopupPile" runat="server" CssClass="ProgramIteams">
                                        <div><a href="Pile.aspx" style="color:rgb(70, 151, 208);">單基樁承載力分析</a></div>
                                        <div><a href="Pile.aspx?TyOneOrBatch=1" style="color:rgb(70, 151, 208);">多基樁承載力分表(批次計算)</a></div>
                                    </asp:Panel>
                                    <asp:HoverMenuExtender ID="HoverPile" runat="server" TargetControlID="ImgPile" PopupControlID="PanelPopupPile" PopupPosition="Right" OffsetX="5"></asp:HoverMenuExtender>
    .ProgramIteams{
    background-color:rgb(247,251,255);
    padding:5px 0px 5px 0px;
    border:solid 1px #D7E7FF;
    display:block; /*此項要加不然FireFox不會動*/
    }
    2012年1月19日 上午 06:37

解答

  • 我找到問題點了

     

    因為在我實際的網站中

    我是用了 "jQuery - Horizontal Accordion"

    因此才會在 Firefox 及 IE8 造成問題

     

    但目前我尚未找到解決方法

    2012年1月21日 上午 09:50
  • 那試試統一使用jQuery好了,別用HoverMenuExtender
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!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>
        <script src="lib/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script type="text/javascript">
    
            $(document).ready(init);
    
            function init() {
    
                /*隱藏的Panel,註冊滑鼠移過時的事件*/
                $("div.ProgramIteams").mouseenter(function () {
                    var divID = $(this).attr("id");
                    maintainShowDiv(divID);
                });
                /*隱藏的Panel,註冊滑鼠離開的事件*/
                $("div.ProgramIteams").mouseleave(hideDiv);
            
            }
           
            var imgleft = 0;
            var imgtop = 0;
            var imgwidth = 0;
            var iconwidth = 35;
            function maintainShowDiv(divID) {
    
                if (imgleft != 0 && imgtop != 0 && imgwidth != 0) {
                    $("#" + divID).css({ "left": imgleft + imgwidth + iconwidth, "top": imgtop }).show(0);
                }
    
    
            }
            
            function showDiv(imgID, divID) {
                var o = $("#" + imgID).position();//取得圖片方位
                imgleft = o.left;
                imgtop = o.top;
                imgwidth = $("#" + imgID).width();//取得圖片寬度
                //顯示被隱藏的Panel(div)
                $("#" + divID).css({ "left": imgleft + imgwidth + iconwidth, "top": imgtop }).show(0);
            }
            function hideDiv() {
                //隱藏全部的Panel(div)
                $("div.ProgramIteams").fadeOut(80);
            }
        
        </script>
        <style type="text/css">
            .ProgramIteams
            {
                background-color: rgb(247,251,255);
                padding: 5px 0px 5px 0px;
                border: solid 1px #D7E7FF;
                display: none; /*改成隱藏*/
                float:left;/*div內的元素都靠左對齊*/
                position:absolute;/*此div的position為絕對位置*/
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        
        <asp:Image ID="ImgShallowFoundation" runat="server" ImageUrl="~/images/淺基礎大項.png"
            Width="110px" Height="25px" CssClass="HoverBorder" Style="margin: 0px 0px 1px 20px;
            border: solid 1px #D7E7FF; border-right: solid 10px #D7E7FF;" />
        <asp:Image ID="Image1" runat="server" ImageUrl="~/images/icon.png" Width="35px"
            Height="35px" Style="margin: 0px 0px 0px -143px;" />
        <asp:Panel ID="PanelPopupShallowFoundation" runat="server" CssClass="ProgramIteams">
            <div>
                <a href="ShallowFoundation.aspx" style="color: rgb(70, 151, 208);">淺基礎承載力分析</a></div>
            <div>
                <a href="ShallowFoundation.aspx?IsRebarDesign=True" style="color: rgb(70, 151, 208);">
                    淺基礎 RC 設計</a></div>
        </asp:Panel>
        <div style="height: 10px;">
        </div>
        <asp:Image ID="ImgPile" runat="server" ImageUrl="~/images/基樁大項.png" Width="110px"
            Height="25px" CssClass="HoverBorder" Style="margin: 0px 0px 1px 20px; border: solid 1px #D7E7FF;
            border-right: solid 10px #D7E7FF;" />
        <asp:Image ID="Image2" runat="server" ImageUrl="~/images/icon.png" Width="35px"
            Height="35px" Style="margin: 0px 0px 0px -143px;" />
        <asp:Panel ID="PanelPopupPile" runat="server" CssClass="ProgramIteams">
            <div>
                <a href="Pile.aspx" style="color: rgb(70, 151, 208);">單基樁承載力分析</a></div>
            <div>
                <a href="Pile.aspx?TyOneOrBatch=1" style="color: rgb(70, 151, 208);">多基樁承載力分表(批次計算)</a></div>
        </asp:Panel>
        </form>
    </body>
    </html>
    
    

    Code-Behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ImgShallowFoundation.Attributes["onmouseout"] = "hideDiv();";
            ImgShallowFoundation.Attributes["onmouseover"] = "showDiv('" + ImgShallowFoundation.ClientID+ "','" + PanelPopupShallowFoundation.ClientID + "')";
            ImgPile.Attributes["onmouseout"] = "hideDiv();";
            ImgPile.Attributes["onmouseover"] = "showDiv('" + ImgPile.ClientID + "','" + PanelPopupPile .ClientID+ "');";
        }
    }
    

    執行結果:

    2012年1月21日 下午 06:51

所有回覆

  • 您好

    您的代碼我試有出現的

    請嘗試使用最新版的ASP.net Ajax

    http://ajaxcontroltoolkit.codeplex.com/



    2012年1月19日 上午 06:49
  • 您好

    您的代碼我試有出現的

    請嘗試使用最新版的ASP.net Ajax

    http://ajaxcontroltoolkit.codeplex.com/



    我換了新版了

    但一樣沒有出現耶

     

     

    2012年1月19日 上午 07:35
  • 以下是我使用最新版ASP.net Ajax幫您測試的代碼

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <!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">
        
        .ProgramIteams{
    background-color:rgb(247,251,255);
    padding:5px 0px 5px 0px;
    border:solid 1px #D7E7FF;
    /*display:block; /*此項要加不然FireFox不會動*/
    }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />
      
                 <asp:Image ID="ImgShallowFoundation" runat="server" ImageUrl="~/images/淺基礎大項.png" Width="110px" Height="25px" CssClass="HoverBorder" style="margin:0px 0px 1px 20px;border:solid 1px #D7E7FF;border-right:solid 10px #D7E7FF;"/>
                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/淺基礎大項圖.png" Width="35px" Height="35px" style="margin:0px 0px 0px -143px;"/>
                                    <asp:Panel ID="PanelPopupShallowFoundation" runat="server" CssClass="ProgramIteams" >
                                        <div><a href="ShallowFoundation.aspx" style="color:rgb(70, 151, 208);">淺基礎承載力分析</a></div>
                                        <div><a href="ShallowFoundation.aspx?IsRebarDesign=True" style="color:rgb(70, 151, 208);">淺基礎 RC 設計</a></div>
                                    </asp:Panel>
                                    <asp:HoverMenuExtender ID="HoverShallowFoundation" runat="server" TargetControlID="ImgShallowFoundation" PopupControlID="PanelPopupShallowFoundation" PopupPosition="Right" OffsetX="5" CacheDynamicResults="false"></asp:HoverMenuExtender>
                                    <div style="height:10px;"></div>
                                    <asp:Image ID="ImgPile" runat="server" ImageUrl="~/images/基樁大項.png" Width="110px" Height="25px" CssClass="HoverBorder" style="margin:0px 0px 1px 20px;border:solid 1px #D7E7FF;border-right:solid 10px #D7E7FF;"/>
                                    <asp:Image ID="Image2" runat="server" ImageUrl="~/images/基樁大項圖.png" Width="35px" Height="35px" style="margin:0px 0px 0px -143px;"/>
                                    <asp:Panel ID="PanelPopupPile" runat="server" CssClass="ProgramIteams">
                                        <div><a href="Pile.aspx" style="color:rgb(70, 151, 208);">單基樁承載力分析</a></div>
                                        <div><a href="Pile.aspx?TyOneOrBatch=1" style="color:rgb(70, 151, 208);">多基樁承載力分表(批次計算)</a></div>
                                    </asp:Panel>
                                    <asp:HoverMenuExtender ID="HoverPile" runat="server" TargetControlID="ImgPile" PopupControlID="PanelPopupPile" PopupPosition="Right" OffsetX="5"></asp:HoverMenuExtender>
    
    
        </form>
    </body>
    </html>
    
    

     

    IE8執行結果(我的Firefox 9.0.1也是可以的):

    這是我的專案包,您可以下載研究去

    不然就不要用<asp:ScriptManager runat="server" />

    改用<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />試試看

     

    另外,給您的網站幾個建議

    1. 圖片不要用中文名稱

    2. <meta http-equiv="X-UA-Compatible" content="IE=9" />最好改成

    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 讓IE瀏覽器使用最新版的文件模式

     

     


    2012年1月19日 上午 08:09
  • 另外,給您的網站幾個建議

    1. 圖片不要用中文名稱

    2. <meta http-equiv="X-UA-Compatible" content="IE=9" />最好改成

    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 讓IE瀏覽器使用最新版的文件模式

     

     


    收到

    感謝您熱心幫忙,我測試好之後再上來報告

     

    2012年1月19日 上午 08:39
  • 另外,給您的網站幾個建議

    1. 圖片不要用中文名稱

    2. <meta http-equiv="X-UA-Compatible" content="IE=9" />最好改成

    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 讓IE瀏覽器使用最新版的文件模式

     

     


    收到

    感謝您熱心幫忙,我測試好之後再上來報告

     

    我測試您給的範例是可以的 ,但要用<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />(沒有用最近版的ajaxtoolkit)

     

    但為什應我自己的網站不行我可能還要再試一下

    (或許是裡頭東西比較多, 被其他東西影響了)

     

    我試好之後再上來報告


     

    2012年1月19日 上午 09:04
  • 我找到問題點了

     

    因為在我實際的網站中

    我是用了 "jQuery - Horizontal Accordion"

    因此才會在 Firefox 及 IE8 造成問題

     

    但目前我尚未找到解決方法

    2012年1月21日 上午 09:50
  • 那試試統一使用jQuery好了,別用HoverMenuExtender
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!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>
        <script src="lib/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script type="text/javascript">
    
            $(document).ready(init);
    
            function init() {
    
                /*隱藏的Panel,註冊滑鼠移過時的事件*/
                $("div.ProgramIteams").mouseenter(function () {
                    var divID = $(this).attr("id");
                    maintainShowDiv(divID);
                });
                /*隱藏的Panel,註冊滑鼠離開的事件*/
                $("div.ProgramIteams").mouseleave(hideDiv);
            
            }
           
            var imgleft = 0;
            var imgtop = 0;
            var imgwidth = 0;
            var iconwidth = 35;
            function maintainShowDiv(divID) {
    
                if (imgleft != 0 && imgtop != 0 && imgwidth != 0) {
                    $("#" + divID).css({ "left": imgleft + imgwidth + iconwidth, "top": imgtop }).show(0);
                }
    
    
            }
            
            function showDiv(imgID, divID) {
                var o = $("#" + imgID).position();//取得圖片方位
                imgleft = o.left;
                imgtop = o.top;
                imgwidth = $("#" + imgID).width();//取得圖片寬度
                //顯示被隱藏的Panel(div)
                $("#" + divID).css({ "left": imgleft + imgwidth + iconwidth, "top": imgtop }).show(0);
            }
            function hideDiv() {
                //隱藏全部的Panel(div)
                $("div.ProgramIteams").fadeOut(80);
            }
        
        </script>
        <style type="text/css">
            .ProgramIteams
            {
                background-color: rgb(247,251,255);
                padding: 5px 0px 5px 0px;
                border: solid 1px #D7E7FF;
                display: none; /*改成隱藏*/
                float:left;/*div內的元素都靠左對齊*/
                position:absolute;/*此div的position為絕對位置*/
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        
        <asp:Image ID="ImgShallowFoundation" runat="server" ImageUrl="~/images/淺基礎大項.png"
            Width="110px" Height="25px" CssClass="HoverBorder" Style="margin: 0px 0px 1px 20px;
            border: solid 1px #D7E7FF; border-right: solid 10px #D7E7FF;" />
        <asp:Image ID="Image1" runat="server" ImageUrl="~/images/icon.png" Width="35px"
            Height="35px" Style="margin: 0px 0px 0px -143px;" />
        <asp:Panel ID="PanelPopupShallowFoundation" runat="server" CssClass="ProgramIteams">
            <div>
                <a href="ShallowFoundation.aspx" style="color: rgb(70, 151, 208);">淺基礎承載力分析</a></div>
            <div>
                <a href="ShallowFoundation.aspx?IsRebarDesign=True" style="color: rgb(70, 151, 208);">
                    淺基礎 RC 設計</a></div>
        </asp:Panel>
        <div style="height: 10px;">
        </div>
        <asp:Image ID="ImgPile" runat="server" ImageUrl="~/images/基樁大項.png" Width="110px"
            Height="25px" CssClass="HoverBorder" Style="margin: 0px 0px 1px 20px; border: solid 1px #D7E7FF;
            border-right: solid 10px #D7E7FF;" />
        <asp:Image ID="Image2" runat="server" ImageUrl="~/images/icon.png" Width="35px"
            Height="35px" Style="margin: 0px 0px 0px -143px;" />
        <asp:Panel ID="PanelPopupPile" runat="server" CssClass="ProgramIteams">
            <div>
                <a href="Pile.aspx" style="color: rgb(70, 151, 208);">單基樁承載力分析</a></div>
            <div>
                <a href="Pile.aspx?TyOneOrBatch=1" style="color: rgb(70, 151, 208);">多基樁承載力分表(批次計算)</a></div>
        </asp:Panel>
        </form>
    </body>
    </html>
    
    

    Code-Behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ImgShallowFoundation.Attributes["onmouseout"] = "hideDiv();";
            ImgShallowFoundation.Attributes["onmouseover"] = "showDiv('" + ImgShallowFoundation.ClientID+ "','" + PanelPopupShallowFoundation.ClientID + "')";
            ImgPile.Attributes["onmouseout"] = "hideDiv();";
            ImgPile.Attributes["onmouseover"] = "showDiv('" + ImgPile.ClientID + "','" + PanelPopupPile .ClientID+ "');";
        }
    }
    

    執行結果:

    2012年1月21日 下午 06:51
  • 那試試統一使用jQuery好了,別用HoverMenuExtender

    試好了!

    果然成功~~

    感謝 Shadow And Happy Code

    這麼精彩又用心的解答


    • 已標示為解答 Fish3883 2012年1月30日 上午 08:50
    • 已取消標示為解答 小朱MVP, Moderator 2012年1月30日 上午 09:38
    • 已編輯 Fish3883 2012年1月30日 下午 02:08
    2012年1月30日 上午 08:50
  • 你應該感謝的是Shadow 大才對呀


    Windows 7 技術支援中心 - 在這裡全部都找得到!


    2012年1月30日 上午 09:30
    版主
  • 真是大感抱歉眼花看錯!! XD

    要大力感謝 Shadow 大才是!!

     

    但也是感謝ChenBruce大的提醒 :P


    • 已編輯 Fish3883 2012年1月30日 下午 02:10
    2012年1月30日 下午 02:04
  • 剛才我修改了一點東西

    $("div.ProgramIteams").fadeOut(80);

    改成以下會比較順哦~

    $("div.ProgramIteams").delay(100).fadeOut(0);

    這樣不會有閃爍的情況,供大家參考

     

    2012年1月30日 下午 02:07