Results 1 to 4 of 4

Thread: 2 level menu javascript not compatible in mozilla

  1. #1
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb 2 level menu javascript not compatible in mozilla

    the code works fine ie, but i gets javascriot error in 'submenuobject.filters.alpha is null or not an object'
    & main issue it doesn't work in mozilla.
    please help me out.


    var mastertabvar=new Object()
    mastertabvar.baseopacity=0
    mastertabvar.browserdetect=""

    function showsubmenu(masterid, id){
    if (typeof highlighting!="undefined")
    clearInterval(highlighting)
    submenuobject=document.getElementById(id)
    mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
    hidesubmenus(mastertabvar[masterid])
    submenuobject.style.display="block"
    instantset(mastertabvar.baseopacity)
    highlighting=setInterval("gradualfade(submenuobject)",50)
    }

    function hidesubmenus(submenuarray){
    for (var i=0; i<submenuarray.length; i++)
    document.getElementById(submenuarray[i]).style.display="none"
    }

    function instantset(degree){
    if (mastertabvar.browserdetect=="mozilla")
    submenuobject.style.MozOpacity=(degree/100)
    else if (mastertabvar.browserdetect=="ie")
    submenuobject.filters.alpha.opacity=degree
    }


    function gradualfade(cur2){
    if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
    else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (typeof highlighting!="undefined") //fading animation over
    clearInterval(highlighting)
    }

    function initalizetab(tabid){
    mastertabvar[tabid]=new Array()
    var menuitems=document.getElementById(tabid).getElementsByTagName("li")
    for (var i=0; i<menuitems.length; i++){
    if (menuitems[i].getAttribute("rel")){
    menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
    mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
    if (menuitems[i].className=="selected")
    showsubmenu(tabid, menuitems[i].getAttribute("rel"))
    menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
    showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
    }
    }
    }
    }

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It would be so much easier to troubleshoot this if we had a link to the live page. Filters is IE only, but the script at least appears to prevent other browsers from trying to use it. Most likely there is a slip up around this issue somewhere in the code though. Generic opacity is a better choice than MozOpacity in modern Mozilla and others.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for ur interest.i got the mistake for javascript error in IE, initially i commented the "filter:alpha(opacity=0);
    -moz-opacity:0;"in stylesheet i don't remember the reason, after uncommenting it javascript error vanished in IE, but sill it is not working in mozilla.Any idea?
    here is my menu page code -

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">

    .basictab{
    padding: 0px 0;
    height: 18px;
    margin-left: 0;
    font: normal 12px Verdana;
    border-bottom: 1px solid #ddd8d4;
    border-top: 1px solid #ddd8d4;
    list-style-type: none;
    margin-bottom: 2px;
    background-color: #E9E8E6;
    color: #000200;
    text-align: center; /*set to left, center, or right to align the menu as desired*/
    }

    .basictab li{
    display: inline;
    margin: 0;
    text-align: center;
    }

    .basictab li a{
    text-decoration: none;
    padding: 0px 10px;
    margin-right: 2px;
    border-right: 0px solid gray;
    border-bottom: none;
    background-color: #E9E8E6;
    color: black;
    text-align: center;
    }


    .basictab li a:visited{
    color: black;
    text-align: center;

    }

    .basictab li a:hover{
    background-color: #FAFEFD;
    text-decoration: none;
    border-bottom: none;
    border-right: 0px solid gray;
    border-left: 0px solid gray;
    border-top: 0px solid gray;
    color: black;
    text-align: center;
    }

    .basictab li a:active{
    color: black;
    background-color: #FAFEFD;
    text-align: center;


    }

    .basictab li.selected a{ /*selected tab effect*/
    position: relative;
    top: 1px;
    padding-top: 4px;
    background-color: #FAFEFD;
    color: #000200;
    text-align: center;
    }


    .submenustyle{
    padding: 2px 1px;
    border: 0px solid black;
    border-top-width: 0;
    width: auto;
    display: none;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    margin-left: 0;
    font: normal 12px Verdana;
    border-bottom: 1px solid #ddd8d4;
    color: #000200;
    text-align: center;
    }

    * html .submenustyle{ /*IE only width definition*/
    width: 100%;
    text-align: center;

    }

    .submenustyle a{
    border-right: 0px dashed black;
    padding: 2px 5px;
    text-decoration: none;
    font: normal 12px Verdana;
    color: #000200;
    text-align: center;
    }

    .submenustyle a:hover{
    background-color: #FAFEFD;
    border-bottom: none;
    border-top: none;
    border-right: none;
    border-left: none;
    text-decoration: none;
    font: normal 12px Verdana;
    color: #000200;
    text-align: center;

    }


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

    var mastertabvar=new Object()
    mastertabvar.baseopacity=0
    mastertabvar.browserdetect=""

    function showsubmenu(masterid, id){
    if (typeof highlighting!="undefined")
    clearInterval(highlighting)
    submenuobject=document.getElementById(id)
    mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
    hidesubmenus(mastertabvar[masterid])
    submenuobject.style.display="block"
    instantset(mastertabvar.baseopacity)
    highlighting=setInterval("gradualfade(submenuobject)",50)
    }

    function hidesubmenus(submenuarray){
    for (var i=0; i<submenuarray.length; i++)
    document.getElementById(submenuarray[i]).style.display="none"
    }

    function instantset(degree){
    if (mastertabvar.browserdetect=="mozilla")
    submenuobject.style.MozOpacity=(degree/100)
    else if (mastertabvar.browserdetect=="ie")
    submenuobject.filters.alpha.opacity=degree
    }


    function gradualfade(cur2){
    if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
    else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (typeof highlighting!="undefined") //fading animation over
    clearInterval(highlighting)
    }

    function initalizetab(tabid){
    mastertabvar[tabid]=new Array()
    var menuitems=document.getElementById(tabid).getElementsByTagName("li")
    for (var i=0; i<menuitems.length; i++){
    if (menuitems[i].getAttribute("rel")){
    menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
    mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
    if (menuitems[i].className=="selected")
    showsubmenu(tabid, menuitems[i].getAttribute("rel"))
    menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
    showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
    }
    }
    }
    }
    </script>

    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <TABLE cellSpacing="0" cellPadding="0" width="100%" border="0" >
    <TR>
    <TD class="toppane" id="TopPane" runat="server" valign="top" align="center">
    <!--Declaration for 2 level menu -->
    <!-- Main menu code--->
    <ul id="maintab" class="basictab">
    <li class="selected" rel="Home" ><a href="/liscr/Home/tabid/37/Default.aspx">Home </a></li>
    <li rel="Corporate"><a href="/liscr/liscr/Corporate/tabid/59/Default.aspx">Corporate</a></li>
    <li rel="Maritime"><a href="/liscr/Maritime/tabid/60/Default.aspx">Maritime</a></li>
    <li rel="Seafarers"><a href="/liscr/Seafarers/tabid/61/Default.aspx">Seafarers</a></li>
    <li rel="Online"><a href="/liscr/Maritime/Documents/tabid/87/Default.aspx">Online Resources</a></li>
    <li rel="About"><a href="/liscr/AboutUs/tabid/64/Default.aspx">About Us</a></li>
    <li rel="Contact"><a href="/liscr/ContactUs/tabid/65/Default.aspx">Contact Us</a></li>
    </ul>

    <!-- Do not delete below 2 lines.//Pramod--->
    <%--<a href="/liscr/ContactUs/tabid/65/Default.aspx">Contact Us</a>--%>
    <%--<a href="/liscr/tabid/160/Default.aspx">Contact Us</a></li>--%>

    <!-- Submenu:Home code (192.168.0.88/liscr)--->
    <div id="Home" class="submenustyle" >
    <a href="/liscr/Home/Virginia/tabid/66/Default.aspx">Virginia</a>
    <a href="/liscr/Home/NewYork/tabid/68/Default.aspx">New York</a>
    <a href="/liscr/Home/Germany/tabid/69/Default.aspx">Germany</a>
    <a href="/liscr/Home/HongKong/tabid/70/Default.aspx">Hong Kong</a>
    <a href="/liscr/Home/UK/tabid/71/Default.aspx">UK</a>
    <a href="/liscr/Home/Liberia/tabid/72/Default.aspx">Liberia</a>
    <a href="/liscr/Home/Greece/tabid/73/Default.aspx">Greece</a>
    <a href="/liscr/Home/Japan/tabid/74/Default.aspx">Japan</a>
    <a href="/liscr/Home/Switzland/tabid/75/Default.aspx">Switzerland</a>
    </div>
    <!-- Submenu:Corporate code--->
    <div id="corporate" class="submenustyle" >
    <a href="/liscr/Corporate/tabid/59/Default.aspx">Procedures</a>
    <a href="/liscr/Corporate/Services/tabid/79/Default.aspx">Services</a>
    <a href="/liscr/Corporate/Pricing/tabid/80/Default.aspx">Pricing</a>
    <a href="/liscr/Corporate/Pricing/tabid/80/Default.aspx">Pay Online</a>
    <a href="/liscr/Corporate/ContactUs/tabid/82/Default.aspx">Contact Us</a>
    </div>
    <!-- Submenu:Maritime code--->
    <div id="Maritime" class="submenustyle" >
    <a href="/liscr/Maritime/tabid/60/Default.aspx">Services</a>
    <a href="/liscr/Maritime/Inspectors/tabid/84/Default.aspx">Inspectors</a>
    <a href="/liscr/Maritime/Pricing/tabid/85/Default.aspx">Pricing</a>
    <a href="/liscr/Maritime/Security/tabid/86/Default.aspx">Security</a>
    <a href="/liscr/Maritime/Documents/tabid/87/Default.aspx">Documents</a>
    <a href="/liscr/Maritime/PayOnline/tabid/88/Default.aspx">Pay Online</a>
    <a href="/liscr/Maritime/ContactUs/tabid/89/Default.aspx">Contact Us</a>
    </div>
    <!-- Submenu:Seafarers code--->
    <div id="Seafarers" class="submenustyle" >
    <a href="/liscr/Seafarers/tabid/61/Default.aspx">Services</a>
    <a href="/liscr/Seafarers/STCW1995/tabid/91/Default.aspx">STCW 1995</a>
    <a href="/liscr/Seafarers/SEASystem/tabid/92/Default.aspx">SEA System</a>
    <a href="/liscr/Seafarers/Pricing/tabid/93/Default.aspx">Pricing</a>
    <a href="/liscr/Seafarers/Forms/tabid/94/Default.aspx">Forms</a>
    <a href="/liscr/Seafarers/SeafaresSearch/tabid/95/Default.aspx">Seafarers Search</a>
    <a href="/liscr/Seafarers/ContactUs/tabid/96/Default.aspx">Contact Us</a>
    </div>
    <!-- Submenu:Online code--->
    <div id="Online" class="submenustyle" >
    <a href="/liscr/Maritime/Documents/tabid/87/Default.aspx">Maritime</a>
    <a href="/liscr/Corporate/Services/tabid/79/Default.aspx">Corporate</a>
    <a href="/liscr/Seafarers/Forms/tabid/94/Default.aspx">Seafarers</a>
    <a href="/liscr/OnlineResources/Pricing/tabid/100/Default.aspx">Pricing</a>
    </div>
    <!-- submenu:About us-->
    <div id="About" class="submenustyle">
    <a href="/liscr/AboutUs/tabid/64/Default.aspx">FAQ</a>
    <a href="/liscr/AboutUs/tabid/64/Default.aspx">Maritime FAQ</a>
    <a href="/liscr/AboutUs/CorporateFAQ/tabid/102/Default.aspx">Corporate FAQ</a>
    <a href="/liscr/AboutUs/SeafarersFAQ/tabid/103/Default.aspx">Seafarers FAQ</a>
    <a href="/liscr/AboutUs/Newsletter/tabid/104/Default.aspx">News</a>
    <a href="/liscr/AboutUs/Newsletter/tabid/104/Default.aspx">News letter</a>
    <a href="/liscr/AboutUs/PressRelease/tabid/105/Default.aspx">Press Release</a>
    <a href="/liscr/AboutUs/FlagStateAssessment/tabid/106/Default.aspx">Flag State Assessment</a>
    </div>
    <!-- submenu:Contact us-->
    <div id="Contact" class="submenustyle" >
    </div>

    <script type="text/javascript">
    //initialize tab menu, by passing in ID of UL
    initalizetab("maintab")
    </script>
    <!-- End of declaration of 2 level menu -->

    </TD>
    </TR>
    </TABLE>
    </div>
    </form>
    </body>
    </html>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It is still a little hard to be certain without the actual live page, but I am about 99% sure that this is what is happening:

    The error:

    Warning: Unknown property 'filter'. Declaration dropped.
    Source File: file://localhost/C:/webwork2/test/menu_h.htm
    Line: 79
    Is just that, a warning. It is because FF doesn't do filters, but it does no harm, the declaration is simply ignored (dropped). The script itself (as I noted before) prevents FF from trying to use the filter in the script.

    The real error comes from:

    Code:
    <div id="corporate" class="submenustyle" >
    Because the script is expecting:

    Code:
    <div id="Corporate" class="submenustyle" >
    It wants it this way because you have this capitalized:

    Code:
    <li rel="Corporate"><a href="/liscr/liscr/Corporate/tabid/59/Default.aspx">Corporate</a></li>
    Fixing that, took care of the error here in FF.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •