JavaScript in FireFox problem
12-27-2007, 02:00 PM
|
JavaScript in FireFox problem
|
Posts: 1,262
Name: John
Location: USA
|
I have this slide-in menu code and it worls great in IE but doesn't function in FireFox. Can anyone help?
Here is the entire html page code with just the example menu. Thanks!
Code:
<html>
<head>
<title>SearchBliss - Slide Menu Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
keyFrame = 0;
keyFrameBack = 0;
movingObjLeft = new Array(1);
movingObjTop = new Array(1);
movingObjLeftBack = new Array(1);
movingObjTopBack = new Array(1);
movingObjLeft[0] = new Array(-175,-160,-140,-120,-100,-80,-60,-40,-20,0);
movingObjTop[0] = new Array(0,0,0,0,0,0,0,0,0,0);
movingObjLeftBack[0] = new Array(0,-20,-40,-60,-80,-100,-120,-140,-160,-175);
movingObjTopBack[0] = new Array(0,0,0,0,0,0,0,0,0,0);
function startSlide()
{
setTimeout("slideTheObject()", 50);
keyFrameBack = 0;
}
function startSlideBack()
{
setTimeout("slideTheObjectBack()",50)
keyFrame = 0;
}
function slideTheObject()
{
var whichOne;
whichOne = document.all.menu.style;
whichOne.posLeft = movingObjLeft[0][keyFrame];
whichOne.posTop = movingObjTop[0][keyFrame];
keyFrame++;
if (keyFrame < movingObjLeft[0].length && keyFrame < movingObjTop[0].length)
setTimeout("slideTheObject()",50);
}
function slideTheObjectBack()
{
var whichOne;
whichOne = document.all.menu.style;
whichOne.posLeft = movingObjLeftBack[0][keyFrameBack];
whichOne.posTop = movingObjTopBack[0][keyFrameBack];
keyFrameBack++
if (keyFrameBack < movingObjLeftBack[0].length && keyFrameBack < movingObjTopBack[0].length)
setTimeout("slideTheObjectBack()",50);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="menu" style="position:absolute;left:-175px;top:0px;width:200px;z-index:1">
<table width="200" border="1" cellspacing="0" cellpadding="3" bordercolor="#009900">
<tr align="left" valign="top">
<td bgcolor="#FFFFFF" style="font-weight:bold;font-family:Verdana;font-size:12px;" width="175"><a href="/Webmaster-Tools.htm" target="_blank">Free Web Tools</a><br>
<a href="http://www.searchbliss.com/Free-Website-Content.htm">Free Website Content</a><br>
<a href="http://www.searchbliss.com/webmaster_resources.htm">Free Resources</a><br>
<a href="http://www.searchbliss.com/generators.asp">Buy Code Generators</a><br>
<a href="http://www.searchbliss.com/affiliates.asp">Affiliate Program</a><br>
<a href="http://www.searchbliss.com/free-toolbar.htm">Free Toolbar</a><br>
<a href="http://www.searchbliss.com/dance.asp">Free Google Dance Tool</a><br>
<a href="http://www.searchbliss.com/free-screen-savers.htm">Free Screensavers</a><br>
<a href="http://www.searchbliss.com/webmaster-tools.htm">Web Tools</a><br>
<a href="http://www.searchbliss.com/tell_a_friend.asp">Tell a Friend</a><br>
<a href="http://www.searchbliss.com/Webmaster-Resources-Site-Map.htm">Site Map</a><br>
</td>
<td bgcolor="#FFFFFF" style="font-weight:bold;font-family:Verdana;font-size:12;color:#009900;" align="center" width="20"> <a title="Open menu" href="javascript:startSlide();" style="text-decoration:none;"><b>></b></a><br>
<a title="Close menu" href="javascript:startSlideBack();" style="text-decoration:none;"><b><</b></a><br>
<br>
M<br>
E<br>
N<br>U<br>
<br>
O<br>
P<br>
T<br>
I<br>
O<br>N<br>S</td>
</tr>
</table>
</div>
</body>
</html>
|
|
|
|
|
12-27-2007, 02:35 PM
|
Re: JavaScript in FireFox problem
|
Posts: 11,894
Location: Blackpool. UK
|
posLeft is NOT a standard W3c DOM style attribute, it is a MS only attribute (IE4.0 onwards)
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
|
|
|
|
|
12-27-2007, 03:27 PM
|
Re: JavaScript in FireFox problem
|
Posts: 11,894
Location: Blackpool. UK
|
Crossbrowser version;
Code:
<script type="text/javascript">
keyFrame = 0;
keyFrameBack = 0;
movingObjLeft = new Array(1);
movingObjTop = new Array(1);
movingObjLeftBack = new Array(1);
movingObjTopBack = new Array(1);
movingObjLeft[0] = new Array(-175,-160,-140,-120,-100,-80,-60,-40,-20,0);
movingObjTop[0] = new Array(0,0,0,0,0,0,0,0,0,0);
movingObjLeftBack[0] = new Array(0,-20,-40,-60,-80,-100,-120,-140,-160,-175);
movingObjTopBack[0] = new Array(0,0,0,0,0,0,0,0,0,0);
function startSlide()
{
setTimeout("slideTheObject()", 50);
keyFrameBack = 0;
}
function startSlideBack()
{
setTimeout("slideTheObjectBack()",50)
keyFrame = 0;
}
function slideTheObject()
{
var whichOne;
whichOne = document.getElementById("menu").style;
whichOne.left = movingObjLeft[0][keyFrame]+"px";
whichOne.top = movingObjTop[0][keyFrame]+"px";
keyFrame++;
if (keyFrame < movingObjLeft[0].length && keyFrame < movingObjTop[0].length)
setTimeout("slideTheObject()",50);
}
function slideTheObjectBack()
{
var whichOne;
whichOne = document.getElementById("menu").style;
whichOne.left = movingObjLeftBack[0][keyFrameBack]+"px";
whichOne.top = movingObjTopBack[0][keyFrameBack]+"px";
keyFrameBack++
if (keyFrameBack < movingObjLeftBack[0].length && keyFrameBack < movingObjTopBack[0].length)
setTimeout("slideTheObjectBack()",50);
}
</script>
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
|
|
|
|
|
12-28-2007, 02:06 PM
|
Re: JavaScript in FireFox problem
|
Posts: 1,262
Name: John
Location: USA
|
Thanks Chris! You're a huge help!
|
|
|
|
|
12-28-2007, 03:01 PM
|
Re: JavaScript in FireFox problem
|
Posts: 1,262
Name: John
Location: USA
|
Hey Chris,
Maybe you can help me with this one. I know "MARQUEE" only works in IE and I beleive "innerHTML" only does as well. Is there an equivalent that can be used with this script? Can I get the same effect with a new version?:
Code:
<html>
<head>
<title>SearchBliss: Slide Link Drop Menu Example</title>
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_changeProp(objName,x,theProp,theValue) { //v3.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style)) eval("obj."+theProp+"='"+theValue+"'");
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr bgcolor="#FFFFFF" valign="bottom" align="left">
<td> <font face="Verdana" size="2">Menu: </font>
<select name="s" onChange="MM_changeProp('Layer1','','innerHTML','<MARQUEE SCROLLAMOUNT=120 behavior=slide direction=left><a href=\"\'+document.all.s.value+\'\" target=\"_blank\" style=\"color:#FF0000;font-family:Verdana;font-size:12px;\">\'+document.all.s.value+\'</a></MARQUEE>','DIV')" style="color:#FF0000;background-color:#CCCCCC;font-family:Verdana;font-size:12px;">
<option selected>- Select One -</option>
<option value="http://www.searchbliss.com/Webmaster-Tools.htm">Webmaster Tools</option>
<option value="http://www.searchbliss.com/Free-Website-Content.htm">Free Website Content</option>
<option value="http://www.searchbliss.com/generators.asp">Buy Tools</option>
</select>
<div id="Layer1" style="position:absolute; z-index:1; visibility: visible; width: 700px"></div>
</td>
</tr>
</table>
</body>
</html>
|
|
|
|
|
12-28-2007, 03:18 PM
|
Re: JavaScript in FireFox problem
|
Posts: 5,945
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
|
kline: I don't know if this is an exact match for what you want, but I've got a "ticker tape" version of something that I worked on for Hockey Hype that you're welcome to lift. |
|
|
|
|
12-29-2007, 02:45 PM
|
Re: JavaScript in FireFox problem
|
Posts: 1,262
Name: John
Location: USA
|
Thanks Adam, I'll take a look.
|
|
|
|
|
12-31-2007, 02:45 PM
|
Re: JavaScript in FireFox problem
|
Posts: 1,262
Name: John
Location: USA
|
Quote:
Originally Posted by ADAM Web Design
kline: I don't know if this is an exact match for what you want, but I've got a "ticker tape" version of something that I worked on for Hockey Hype that you're welcome to lift. |
Thanks again Adam, but isn't what I need (cool though). If you look at the code in IE, you'll see what I'm trying to do in FireFox as well.
Code:
<html>
<head>
<title>SearchBliss: Slide Link Drop Menu Example</title>
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_changeProp(objName,x,theProp,theValue) { //v3.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style)) eval("obj."+theProp+"='"+theValue+"'");
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr bgcolor="#FFFFFF" valign="bottom" align="left">
<td> <font face="Verdana" size="2">Menu: </font>
<select name="s" onChange="MM_changeProp('Layer1','','innerHTML','<MARQUEE SCROLLAMOUNT=120 behavior=slide direction=left><a href=\"\'+document.all.s.value+\'\" target=\"_blank\" style=\"color:#FF0000;font-family:Verdana;font-size:12px;\">\'+document.all.s.value+\'</a></MARQUEE>','DIV')" style="color:#FF0000;background-color:#CCCCCC;font-family:Verdana;font-size:12px;">
<option selected>- Select One -</option>
<option value="http://www.searchbliss.com/Webmaster-Tools.htm">Webmaster Tools</option>
<option value="http://www.searchbliss.com/Free-Website-Content.htm">Free Website Content</option>
<option value="http://www.searchbliss.com/generators.asp">Buy Tools</option>
</select>
<div id="Layer1" style="position:absolute; z-index:1; visibility: visible; width: 700px"></div>
</td>
</tr>
</table>
</body>
</html>
[/quote] |
|
|
|
|
« Reply to JavaScript in FireFox problem
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
|
