PDA

View Full Version : 2 level menu javascript not compatible in mozilla



pramodtech
06-08-2007, 06:22 AM
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"))
}
}
}
}

jscheuer1
06-08-2007, 07:36 AM
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.

pramodtech
06-11-2007, 09:32 AM
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>

jscheuer1
06-11-2007, 12:55 PM
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:


<div id="corporate" class="submenustyle" >

Because the script is expecting:


<div id="Corporate" class="submenustyle" >

It wants it this way because you have this capitalized:


<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.