HELP: Problem with Mozilla - Netscape and moving layers

G

GD

I'm using a script that works great on IE, but not on mozilla. the
original one worked also on N4, but i'd like it to be funcional with
mozilla.

this is the orginal script:

*****************************
<Head>
<script language="JavaScript1.2">
var menu1top=230
var menuleft=-115


var pace=14

var step
var direction
var pause=25

var thismenu
var vorzeichen=1
var vorzeimenu1=-1


var menuismoving="no"


function inite() {
if (document.layers) {
document.menu1.left=menuleft
document.menu1.top=menu1top

}
if (document.all) {
document.all.menu1.style.posLeft=menuleft
document.all.menu1.style.posTop=menu1top
}
}

function getmenuname(clickedmenu) {
if (menuismoving=="no") {
if (document.layers) {
thismenu=eval("document."+clickedmenu)
}
if (document.all) {
thismenu=eval("document.all."+clickedmenu+".style")
}
step=pace
checkdirection()
movemenu()
}
}

function checkdirection() {
if (document.layers) {
if
(thismenu==document.menu1){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1}
}
if (document.all) {
if
(thismenu==document.all.menu1.style){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1}
}
menuismoving="yes"
}

function movemenu() {
if (document.layers) {
if (step>=0) {
thismenu.left+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
if (document.all) {
if (step>=0) {
thismenu.posLeft+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
}


</script>

<style type="text/css">
#menu1 {position:absolute;left:-1000px;}
.baseline {
position:absolute;
left:250px;
top:20px;
font-family:Arial;
font-size:9pt;
color:000000;
}
</STYLE>
</head>

<BODY bgcolor="#999999" onLoad="inite()">
<div align="center"> </div>


<DIV ID="menu1"><IMG SRC="webdesign.gif" USEMAP="#webdesign.gif"
WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="webdesign.gif">
<AREA SHAPE=RECT COORDS="117,0,150,93"
HREF="javascript:getmenuname('menu1')">
<AREA SHAPE=RECT COORDS="6,18,120,74" HREF="http://www.cnet.com">
</MAP></DIV>



</body>

<!--endo original script-->
*************************************

I modified it to try to make it work with mozilla, but it still
doesn't work. here is the modified script- thank you very much for
your help. GD


<Head>
<script language="JavaScript1.2">
var menu1top=230
var menuleft=-115


var pace=14

var step
var direction
var pause=25

var thismenu
var vorzeichen=1
var vorzeimenu1=-1


var menuismoving="no"


function inite() {
if (document.getElementById&&!document.all) {
document.getElementById("menu1").style.left=menuleft
document.getElementById("menu1").style.top=menu1top

}
if (document.all) {
document.all.menu1.style.posLeft=menuleft
document.all.menu1.style.posTop=menu1top
}
}

function getmenuname(clickedmenu) {
if (menuismoving=="no") {
if (document.getElementById&&!document.all) {

thismenu=eval("document.getElementById('clickedmenu').style")
}
if (document.all) {
thismenu=eval("document.all."+clickedmenu+".style")
}
step=pace
checkdirection()
movemenu()
}
}

function checkdirection() {
if (document.getElementById&&!document.all) {
if
(thismenu==document.getElementById("menu1").style){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1}
}
if (document.all) {
if
(thismenu==document.all.menu1.style){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1}
}
menuismoving="yes"
}

function movemenu() {
if (document.getElementById&&!document.all) {
if (step>=0) {
thismenu.left+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
if (document.all) {
if (step>=0) {
thismenu.posLeft+=step*vorzeichen
step--
var movetimer=setTimeout("movemenu()",pause)
}
else {
menuismoving="no"
clearTimeout(movetimer)
}
}
}


</script>

<style type="text/css">
#menu1 {position:absolute;left:-1000px;}
.baseline {
position:absolute;
left:250px;
top:20px;
font-family:Arial;
font-size:9pt;
color:000000;
}
</STYLE>
</head>

<BODY bgcolor="#999999" onLoad="inite()">
<div align="center"> </div>


<DIV ID="menu1"><IMG SRC="webdesign.gif" USEMAP="#webdesign.gif"
WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="webdesign.gif">
<AREA SHAPE=RECT COORDS="117,0,150,93"
HREF="javascript:getmenuname('menu1')">
<AREA SHAPE=RECT COORDS="6,18,120,74" HREF="http://www.cnet.com">
</MAP></DIV>



</body>
 
M

Mark Preston

GD said:
I'm using a script that works great on IE, but not on mozilla. the
original one worked also on N4, but i'd like it to be funcional with
mozilla.

function inite() {
if (document.layers) {
document.menu1.left=menuleft
document.menu1.top=menu1top
Click to expand...
"Document.layers" is Netscape code up to version 4. Thereafter, it was
dropped and does not work.
}
if (document.all) {
document.all.menu1.style.posLeft=menuleft
document.all.menu1.style.posTop=menu1top
}
}
Click to expand...
"Document.all" is Microsoft code and does not work (except on those,
such as Opera, which can mimic Microsoft-code).

The net effect you have is that you do not use *any* W3C-standard code
and therefore your script will not work withe modern browsers. Switch to
using the "document.getElementById("id_ref") methods.
 
G

GD

Thank you for your advise.

i've changed what you suggested, but somehow the last statement still
doesn't in Mozilla. in fact i got rid of most "if"and it works on IE,
but not Netscape.
Any idea why?

thanks,
GD
 
M

Mark Preston

GD said:
Thank you for your advise.

i've changed what you suggested, but somehow the last statement still
doesn't in Mozilla. in fact i got rid of most "if"and it works on IE,
but not Netscape.
Any idea why?
Click to expand...
In place of *both* your "if" statements, you can use the following:-

if (document.getElementById()) {
document.getElementById(your_element_id).style...
etc.

This replaces all your "browser detection" with detecting the capability
of the browser rather than the manufacturer. Should it fail that test
(so, obviously, in an "else" clause) you can then run your browser
detection to deal with older browsers. There are more detailed examples
of this sort of thing in the group FAQ.
 
R

RobB

GD said:
I'm using a script that works great on IE, but not on mozilla. the
original one worked also on N4, but i'd like it to be funcional with
mozilla.
(snip)

I modified it to try to make it work with mozilla, but it still
doesn't work. here is the modified script- thank you very much for
your help. GD
(snip)

thismenu=eval("document.getElementById('clickedmenu').style")
Click to expand...

(snip)

Terrible script, with all that eval()ing...the above bit should
illustrate why. You're passing the string 'clickedmenu' to the
function, not the string contained in the variable clickedmenu.

thismenu=document.getElementById('clickedmenu').style

And:

thismenu=document.all[clickedmenu].style

There are so many menu scripts floating around these days, of every
variety, there's no reason to waste any time modifying relics of this
sort.

http://www.dyn-web.com/dhtml/slide/slide-out-menus.html
 
G

GD

Thanks for your answer and the link, it's a great resource for scripts
and to learn DHTML.

somebody sent me the following script that works great. i'm unable to
add more than one tab though (i'm in the process of learning JS thru
other peoples scripts and website tutorials). what i like about it is
the use of image maps instead of styles for the menus for design
purposes. any help will be greatly appreciatted.

thanks, GD

***************************************

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script language="javascript">
<!--
var menu1top=230
var menuleft=-115
var step = 10
var pause=50
var dir=1

function init() {
document.getElementById("menu1").style.left=menuleft
document.getElementById("menu1").style.top=menu1top
nowpos=menuleft
}


function movemenu() {
if(dir==1){nowpos+= step}
if(dir==0){nowpos-= step}

document.getElementById("menu1").style.left=nowpos
movetimer=setTimeout("movemenu()",pause)

if(nowpos>0-step){
clearTimeout(movetimer)
dir=0
}

if(nowpos<menuleft){
clearTimeout(movetimer)
dir=1
}

}

//-->
</script>

<style type="text/css">
#menu1 {position:absolute;}
..baseline {
position:absolute;
left:250px;
top:20px;
font-family:Arial;
font-size:9pt;
color:000000;
}
</STYLE>

</HEAD>

<BODY bgcolor="#999999" onload="init()">


<DIV ID="menu1"><IMG SRC="webdesign.gif" USEMAP="#webdesign.gif"
WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="webdesign.gif">
<AREA SHAPE=RECT COORDS="117,0,150,93" HREF="#null"
onclick="movemenu()">
<AREA SHAPE=RECT COORDS="6,18,120,74" HREF="http://www.cnet.com">
</MAP></DIV>

</BODY>
</HTML>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help With a Script 5
Need help , Having problem with Drag n Drop... 1
Can someone help me correct this code? It should be a two line countdown timer. 3
Help with code 0
Fading effect between play and play-over and pause and pause-over 0
Help with my responsive home page 2
Need help with stripe payment 0
Help with Visual Lightbox: Scripts 2

Members online

Total: 19 (members: 1, guests: 18)
Robots: 500

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top