Javascript working in IE, but not in Firefox

Question

0.00/5 (No votes)

See more:

Hi! I'm experimenting with js and html4, making a draggable div and a clickable one. The script works fine in Internet Explorer but in Mozilla Firefox nothing happens. Can anyone help?

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 
var oldX;
var oldY;
var newX;
var newY;
var x;
var y;
var offsetX;
var offsetY;
 
var pressed;
var rsz=0;
var rszmv=0;
pressed = 0;
 
function press(event){
  document.body.focus();
  var target = event.target != null ? event.target : event.srcElement;
  if(target.id == 'wndtop'){
    rsz=0;
	rszmv=0;
	document.getElementById('wndtop').style.backgroundColor='grey';
	document.getElementById('wndtop').style.cursor='move';
    pressed = 1;
	
	x = parseInt(document.getElementById('wnd').style.left);
	y = parseInt(document.getElementById('wnd').style.top);
	
	offsetX = event.screenX - x;
	offsetY = event.screenY - y;
  }
  else if(target.id == 'wnd'){
    rszmv=rsz;
  }
  oldX = event.screenX;
  oldY = event.screenY;
   return false;
}
 
function release(event){
  var target = event.target != null ? event.target : event.srcElement;
  pressed = 0;
  rxz=0;
  rszmv=0;
  document.getElementById('wnd').style.cursor='default';
	document.getElementById('wndtop').style.backgroundColor='green';
  if(target.id == 'check'){
	if(document.getElementById('check').style.backgroundColor == 'red') document.getElementById('check').style.backgroundColor = 'green';
	else document.getElementById('check').style.backgroundColor = 'red';
  }
  document.getElementById('wnd').style.cursor='default';
  document.getElementById('wndtop').style.cursor='default';
}
 
function move(event){
  var target = event.target != null ? event.target : event.srcElement;
  var x1 = parseInt(document.getElementById('wnd').style.left);
  var y1 = parseInt(document.getElementById('wnd').style.top);
  var w = parseInt(document.getElementById('wnd').style.width);
  var h = parseInt(document.getElementById('wnd').style.height);
  var w1 = parseInt(document.getElementById('wndin').style.width);
  var h1 = parseInt(document.getElementById('wndin').style.height);
  if(pressed == 0){
	  if(target.id == 'wnd'){
		if(rszmv == 0){
		  if(event.screenX>x1+10 && event.screenX<x1+w-10){
			if(event.screenY<y1+2){
			  rsz=2;
			  document.getElementById('wnd').style.cursor='n-resize';
			}
			else{
			  rsz=6;
			  document.getElementById('wnd').style.cursor='s-resize';
			}
		  }
		  else if(event.screenY>y1+10 && event.screenY<y1+h-10){
			if(event.screenX<x1+2){
			  rsz=8;
			  document.getElementById('wnd').style.cursor='w-resize';
			}
			else{
			  rsz=4;
			  document.getElementById('wnd').style.cursor='e-resize';
			}
		  }
		  else if(event.screenX<=x1+10){
			if(event.screenY<=y1+10){
			  rsz=1;
			  document.getElementById('wnd').style.cursor='nw-resize';
			}
			else{
			  rsz=7;
			  document.getElementById('wnd').style.cursor='sw-resize';
			}
		  }
		  else{
			if(event.screenY<=y1+10){
			  rsz=3;
			  document.getElementById('wnd').style.cursor='ne-resize';
			}
			else{
			  rsz=5;
			  document.getElementById('wnd').style.cursor='se-resize';
			}
		  }
		}
		
		else{
		  switch(rszmv){
			case 1:
			  break;
			case 2:
			  break;
			case 3:
			  break;
			case 4:
			  break;
			case 5:
			  break;
			case 6:
			  break;
			case 7:
			  break;
			case 8:
			  break;
			default:
			  break;
		  }
		}
	  }
	  else if(target.id != 'wndtop'){
		document.getElementById('wnd').style.cursor='default';
		document.getElementById('wndtop').style.cursor='default';
	  }
	}
  else{
    newX=event.screenX;
    newY=event.screenY;
    document.getElementById('wnd').style.left = newX - offsetX + 'px';
	document.getElementById('wnd').style.top = newY - offsetY + 'px';
	if(parseInt((document.getElementById('wnd').style.top))<20) {
		(document.getElementById('wnd').style.top)='20px';
		newY = 20 + offsetY;
	}
 
    oldX = newX;
	oldY = newY;
  }
}
 
</script>
</head>
<body onmousedown="press(event);" onmousemove="move(event);" onmouseup="release(event);">
<div id="wnd" style="position:relative;background-color:red;top:30px;left:10px;width:200px;height:150px;">
	<div id="wndtop" style="position:absolute;background-color:green;left:2px;top:2px;width:196px;height:20px;"></div>
    <div id="wndin" style="position:absolute;background-color:white;left:2px;top:22px;width:196px;height:126px;">
    Try to drag this window?
	</div>
</div>
<div id="check" style="position:absolute;top:5px;left:5px;width:10px;height:10px;background-color:green;">
</div>

</body>
</html>

P.S. rsz and rszmv will be used for resizing the "wnd" div but I haven't implemented this functionallity yet.

E_D_I_T_!!! I made some changes. Now it kinda works in Firefox and Chrome but if I move the mouse too fast and it leaves the div's contours, the div stops moveing untill I put the mouse back on it :/ It still works great with IE though.

Posted 28-Oct-13 9:37am

StoyanovZ

Updated 29-Oct-13 10:42am

v5

Add a Solution

Comments

enhzflep 28-Oct-13 22:20pm

Firstly, what does this code do in IE that it wont do in FireFox? (It's almost entirely broken in both Chrome 30 and IE9 here.)

Next, do you intend to have invalid styles in the body? - "removed5px" isn't valid. Neither are any of the others that contain 'removed'

Lastly, you've inconsistent capitalization of oldy (used both oldY and oldy - they're not the same! I think you probably intended to type var oldY; on line7)

StoyanovZ 29-Oct-13 12:21pm

It's done it again :@ "removed" are actually CSS properties(sizes, top and left coordinates...) And oldy should be with CAPITAL Y - I'm sure I made it like that :X

StoyanovZ 29-Oct-13 14:24pm

OK, oldy was really mistyped(and, strangely, it still worked in IE :D)

bbirajdar 28-Oct-13 23:06pm

Use jQuery. It will handle browser compatibility for you

StoyanovZ 30-Oct-13 15:18pm

Done. Now it works in Firefox and Chrome and doesn't work in IE :D AND it drags the element no matter if I've pressed the wnd's top or it's inside(the white area)

StoyanovZ 30-Oct-13 15:45pm

OK, I upgraded to a newer version of jQuery and jQueryUI. Now it works in the three browsers, BUT still I have this issue - the div should be draggable only if I press the green area on the top(sort of titlebar) but it's actually always draggable :(

<HTML>
<HEAD>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
function press(event){
var target = event.target;
if(target.id == 'wnd'){
document.getElementById('wnd').style.backgroundColor = 'grey';
document.getElementById('wnd').style.cursor='move';
$("#wnd").draggable({enabled: true});
}
else{
$("#wnd").draggable({enabled: false});
}
}

function release(event){
var target = event.target;
if(target.id == 'wnd'){
document.getElementById('wnd').style.backgroundColor = 'green';
document.getElementById('wnd').style.cursor='default';
}
}
</script>
</HEAD>
<BODY onmousedown="press(event);" onmouseup="release(event);">
<DIV id="wnd" style="position:relative;left:20px;top:20px;width:200px;height:25px;background-color:green;">
<DIV style="position:absolute;left:0px;top:25px;width:196px;height:148px;background-color:white;border-width:2px;border-style:none solid solid;border-color:red"></DIV>
</DIV>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#wnd").draggable();
});
</SCRIPT>

</BODY>
</HTML>

StoyanovZ 1-Nov-13 16:34pm

Finally, here's a perfectly working code, thanks to you for giving me this idea:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js">
</script>
<script type="text/javascript">
function press(event){
var target = event.target != null ? event.target : event.srcElement;
if(target.id == 'tBar'){
document.getElementById('tBar').style.backgroundColor = 'red';
document.getElementById('tBar').style.color = 'yellow';
document.getElementById('tBar').style.cursor = 'move';
}
}

function release(event){
document.getElementById('tBar').style.backgroundColor = 'yellow';
document.getElementById('tBar').style.color = 'red';
document.getElementById('tBar').style.cursor = 'default';
}

function over(event){
var target = event.target != null ? event.target : event.srcElement;
if(target.id == 'tBar'){
$("#wnd").draggable({disabled: false});
}
else{
$("#wnd").draggable({disabled: true});
}
}
</script>

</head>
<body onmouseover="over(event);" onmousedown="press(event);" onmouseup="release(event);">
<div id="wnd" style="position:relative;left:10px;top:10px;wdth:220px;height:195px">
<div id="tBar" style="position:absolute;left:10px;top:10px;width:200px;height:25px;background-color:yellow;padding-left:3px;color:red">
Title
</div>
<div id="ctxt" style="position:absolute;left:10px;top:35px;width:196px;height:148px;background-color:white;border-width:2px;border-style:none solid solid;border-color:red;padding-left:3px">
Drag me?
</div>
</div>

</body>
</html>

I tried to add resizable() but the one I managed to find didn't work the way I'd like to :/

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

thanh_bkhn · Answer 1 · 2013-10-28T16:09:00

Solution 1

You are using event.clientX and event.clientY which aren't running on Firefox or Chrome.
If you want to get the mouse'position, refer to this link:
http://www.quirksmode.org/js/events_properties.html#position[^]

Posted 28-Oct-13 16:09pm

thanh_bkhn

Comments

StoyanovZ 29-Oct-13 16:35pm

Yup, I changed "client" to "screen" and added a condition checking the way of getting the event's targed. Now it still works great in IE, but in Firefox and Chrome the so-called-window div gets temporarily dropped if I move the mouse too fast and leave the div's contours :/

Oh, I also simplified the way of repositioning the div.

StoyanovZ · Answer 2 · 2013-11-06T08:42:00