homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
Firefox problem
Javascript doesn't work correctly under Firefox
Alfasys




msg:1590241
 1:57 pm on Jan 26, 2005 (gmt 0)

Hi,

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">&nbsp;</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]

 

dcelasun




msg:1590242
 5:38 pm on Jan 26, 2005 (gmt 0)

Hi,

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

tforcram




msg:1590243
 5:43 pm on Jan 26, 2005 (gmt 0)

The short answer is that Firefox doesn't support some features that IE does and vice versa. you might want to try to look up what some of those differeces are and then trim your code down to the problem areas. Then it will be easier to give you a firefox solution for the desired effect.

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.

dcelasun




msg:1590244
 5:53 pm on Jan 26, 2005 (gmt 0)

Thanx for replying so quickly,

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved