Forum Moderators: open
I do have a strange problem in Firefox. I use a javascript in combination with html to make an interactive catalog.
Under internet explorer 6.x it works just fine, in firefox the script doesn't work.
If you select a link, a submenu appears just under this link and moves all the other lines down.
Here's the code, what am I doing wrong?
Thank you.
------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<STYLE type="text/css">
body {
scrollbar-3dlight-color:;
scrollbar-arrow-color: rgb(156,208,107);
scrollbar-base-color:;
scrollbar-track-color: rgb(192,192,192);
scrollbar-darkshadow-color:;
scrollbar-face-color: rgb(237,246,225);
scrollbar-highlight-color:;
scrollbar-shadow-color:}
a
{text-decoration: none;
color: 008000;}
.title
{position: absolute;
width: 500px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 14px;}
.submenu
{position: absolute;
left: 25px;
width: 560px;
border: 0px solid black;
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
visibility: hidden;}
</STYLE>
<script type="text/javascript">
// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.
var nom = 33; // Number of menus
var usePictures = 1; // use pictures? 1 = yes, 0 = no
var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;
if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "opened.gif";
}
else if (document.all) {
document.all(pic).src = "opened.gif";
}
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "closed.gif";
}
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn!= n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
// End -->
</script>
<title>Catalog</title>
</head>
<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<table border="0" width="559" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#C0C0C0"><b><font color="#008000" face="Verdana" size="2">WELCOME.
(<a href="x.htm"><u>x</u></a>)</font></b></td>
</tr>
<tr>
<td width="100%">
<p align="center"><font face="Verdana" size="2"> </font></td>
</tr>
<tr>
<td width="100%">
<!-- MENU1 START -->
<div class="title" id="title1" style="top: 20px">
<a href="#" onclick="javascript: toggle(1,60); return false"><img name="pic1" src="closed.gif" border="0">MENU1</a>
</div>
<div class="submenu" id="submenu1" style="top: 40px">
<a href="navigation/1A.html" target="_self">1A</a><br>
<a href="navigation/1B.html" target="_self">1B</a><br>
<a href="navigation/1C.html" target="_self">1C</a><br>
<a href="navigation/1D.html" target="_self">1D</a>
</div>
<!-- MENU1 END -->
.
.
.
.
.
<!-- MENU33 START -->
<div class="title" id="title33" style="top: 660px">
<a href="#" onclick="javascript: toggle(33,40); return false"><img name="pic33" src="closed.gif" border="0">MENU33</a>
</div>
<div class="submenu" id="submenu33" style="top: 680px">
<a href="navigation/33A.html" target="_self">33A</a><br>
<a href="navigation/33B.html" target="_self">33B</a>
</div>
<!-- MENU33 END -->
</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------
[edited by: BlobFisk at 2:12 pm (utc) on Jan. 26, 2005]
[edit reason] Disabled Smileys [/edit]
I have a similiar problem too. When I use:
<img src="x.jpg" onMouseOver="this.filters.alpha.opacity='100'" onMouseOut="this.filters.alpha.opacity='50'" style="filter:alpha(opacity=50)">
it works in IE 6 but when I use Firefox 1.0 it doesn't. I have downloaded the Java component from mozilla.org but it still doesn't work.
Can anybody help me?
Thanx
For example, the alpha opacity is a specific IE function, but there is a -moz-opacity, I think, that does something similar. By using both, you would probably be covered.
Can you tell me more about this moz-opacitiy thing or where can I learn about it.
Secondly,
I know that some codes are specific for IE and I'm trying to create a browser-independent site, so I do need some solutions.
Thanx
