Javascript help ?

@DjTazJan 04.2008

Hi Guys,

Im a complete newbie when it comes to javascript , i can understand what the code does , but if i had to do it myself id be lost.
Anyway , i took a code i got years ago and modified it so that i could move some images on screen , and it works fine with IE , but it dies a death with Firefox …. can someone fix it for me so that it works on both please ?

[CODE] <html>

<head>

<SCRIPT LANGUAGE=”JavaScript”> function previewPic(sel) {document.previewpic.src = “” + sel.options[sel.selectedIndex].value;}N = (document.all) ? 0 : 1;var ob;function MD(e) {if (N) {ob = document.layers[e.target.name];X=e.x;Y=e.y;return false;}else {ob = event.srcElement.parentElement.style;X=event.offsetX;Y=event.offsetY; }}function MM(e) {if (ob) {if (N) {ob.moveTo((e.pageX-X), (e.pageY-Y));}else {ob.pixelLeft = event.clientX-X + document.body.scrollLeft;ob.pixelTop = event.clientY-Y + document.body.scrollTop;return false; } }}document.onmousedown = MD;document.onmousemove = MM;document.onmouseup = MU;function MU() {ob = null;} if (N) {document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);} </script>

</head> <body>

<table width=81 cellpadding=”0″ cellspacing=”0″ border=”0″ valign=”top”><tr> <td>

<div id=1 style=”position:absolute;left:360;top:220;”> <img src=http://www.theotherzone.com/images/styles/xmass/misc/navbits_start.gif name=1></div>

<div id=2 style=”position:absolute;left:360;top:70;”> <img src=http://www.theotherzone.com/images/styles/xmass/misc/navbits_start.gif name=2></div>

<div id=3 style=”position:absolute;left:360;top:100;”> <img src=http://www.theotherzone.com/images/styles/xmass/misc/navbits_start.gif name=3></div>

<div id=4 style=”position:absolute;left:360;top:130;”> <img src=http://www.theotherzone.com/images/styles/xmass/misc/navbits_start.gif name=4></div>

</body>[/CODE]

Any help would be greatly appreciated as i have tried a good few things and most of them have just messed it up even more ?.

Thanks in advance guys.

to post a comment

JavaScript

2 Comments(s) _↴

@felgallJan 04.2008 — #I haven't tested it but the following should be reasonably close to being a modern JavaScript equivalent (for all version 5+ browsers) to the antiquated (IE4/Netscape4) version you currently have.

&lt;script type="text/javascript"&gt;
 function mouseX(evt) {
 if (evt.pageX) return evt.pageX;
 else if (evt.clientX)
 return evt.clientX + (document.documentElement.scrollLeft ?
 document.documentElement.scrollLeft :
 document.body.scrollLeft);
 else return null;
 }
 function mouseY(evt) {
 if (evt.pageY) return evt.pageY;
 else if (evt.clientY)
 return evt.clientY + (document.documentElement.scrollTop ?
 document.documentElement.scrollTop :
 document.body.scrollTop);
 else return null;
 }
 function previewPic(sel)
 {document.previewpic.src = "" + sel.options[sel.selectedIndex].value;}
 function MD(e) {
 e = (window.event) ? window.event ; e;
 ob = e.srcElement.parentElement.style;
 X = mouseX(e);
 Y = mouseY(e);
 }
 function MM(e) {
 e = (window.event) ? window.event ; e;
 ob.pixelLeft = mouseX(e)-X;
 ob.pixelTop = mouseY(e)-Y;
 }
 document.onmousedown = MD;
 document.onmousemove = MM;
 document.onmouseup = MU;
 function MU() {ob = null;}
 &lt;/script&gt;

At the very least this code should be a lot closer to what you need in order to get it to work in all modern browsers.

@DjTazauthorJan 05.2008 — #Thanks Stephen,

I tried what you put up and it doesnt seem to work at all with the <div>'s that i have so i think the body code would be different as well.

i tried :

[CODE]<html>
 
 <head>
 
 
 <script type="text/javascript">
 function mouseX(evt) {
 if (evt.pageX) return evt.pageX;
 else if (evt.clientX)
 return evt.clientX + (document.documentElement.scrollLeft ?
 document.documentElement.scrollLeft :
 document.body.scrollLeft);
 else return null;
 }
 function mouseY(evt) {
 if (evt.pageY) return evt.pageY;
 else if (evt.clientY)
 return evt.clientY + (document.documentElement.scrollTop ?
 document.documentElement.scrollTop :
 document.body.scrollTop);
 else return null;
 }
 function previewPic(sel)
 {document.previewpic.src = "" + sel.options[sel.selectedIndex].value;}
 function MD(e) {
 e = (window.event) ? window.event ; e;
 ob = e.srcElement.parentElement.style;
 X = mouseX(e);
 Y = mouseY(e);
 }
 function MM(e) {
 e = (window.event) ? window.event ; e;
 ob.pixelLeft = mouseX(e)-X;
 ob.pixelTop = mouseY(e)-Y;
 }
 document.onmousedown = MD;
 document.onmousemove = MM;
 document.onmouseup = MU;
 function MU() {ob = null;}
 </script>
 
 
 </head>
 <body>
 
 <table width=81 cellpadding="0" cellspacing="0" border="0" valign="top"><tr> <td>
 
 <div id=1 style="position:absolute;left:360;top:220;">   <img src=http://www.theotherzone.com/images/styles/xmass/misc/navbits_start.gif name=1></div>
 
 <div id=2 style="position:absolute;left:360;top:70;">   <img src=http://www.theotherzone.com/images/styles/xmass/misc/navbits_start.gif name=2></div>
 
 <div id=3 style="position:absolute;left:360;top:100;">   <img src=http://www.theotherzone.com/images/styles/xmass/misc/navbits_start.gif name=3></div>
 
 <div id=4 style="position:absolute;left:360;top:130;">   <img src=http://www.theotherzone.com/images/styles/xmass/misc/navbits_start.gif name=4></div>
 
 
 </body>[/CODE]

Also in #JavaScript _↴

[Help!] Javascript Switch Statements!disabling enter key for form submission Javascript Numeric Validation Question

Success!

Help @DjTaz spread the word by sharing this article on Twitter...

Tweet This

Javascript help ?

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript help ?

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴