firefox issue

**TinmanIII** · 01-29-2011, 02:28 AM

Hi all.
In a nutshell, I have a page with colour swatches.
I have implemented some JS and CSS in order for a user to "move" the swatches around so they can take different colours and move them next to each other in order to see how they look side by side on the site.

I reference the js in the head, and call it in a CSS class.
works in IE but not in Firefox.
any help?

JS file:

Code:

var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}

function selectmouse(e)
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }
  if (fobj.className=="dragme")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0,10);
    ty = parseInt(dobj.style.top+0,10);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

HTML head:

Code:

<script type="text/javascript" src="dragAndDrop.js"></script>

body CSS call:

Code:

<img src="Images/colours/standard_colours/polar_white.png" alt="Polar White" width="114" height="75" class="dragme" />

IE 7 and 8 work fine, FF 3.5.14 and 3.6.13 do not work.

appreciate the help and understanding,
thanks,
Tin

**vwphillips** · 01-29-2011, 10:08 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
if (isdrag)
{
dobj.style.left = (nn6 ? tx + e.clientX - x : tx + event.clientX - x)+'px';
dobj.style.top = (nn6 ? ty + e.clientY - y : ty + event.clientY - y)+'px';
return false;
}
}

function selectmouse(e){
 var fobj = e.target||event.srcElement;
 var topelement = nn6 ? "HTML" : "BODY";
 while (fobj.tagName != topelement && fobj.className != "dragme"){
  fobj = nn6 ? fobj.parentNode : fobj.parentElement;
 }
 if (fobj.className=="dragme"){
  isdrag = true;
  dobj = fobj;
  tx = parseInt(dobj.style.left+0,10);
  ty = parseInt(dobj.style.top+0,10);
  x = nn6 ? e.clientX : event.clientX;
  y = nn6 ? e.clientY : event.clientY;
  document.onmousemove=movemouse;
  return false;
 }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

/*]]>*/
</script></head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Polar White" width="114" height="75" class="dragme" style="position:absolute;left:100px;top:100px;"/>

</body>

</html>

**TinmanIII** · 01-30-2011, 11:44 PM

Not exactly sure why the small changes worked, thank you.
I would appreciate the understanding if anyone wants to bother.

But thank you again vwphillips

**TinmanIII** · 01-31-2011, 12:05 AM

Thank you.
I would appreciate the understanding if anyone wants to bother.

alright, I made the changes, then it would work in firefox, but not in IE
so I kept this change:

Code:

function movemouse(e)
{
if (isdrag)
{
dobj.style.left = (nn6 ? tx + e.clientX - x : tx + event.clientX - x)+'px';
dobj.style.top = (nn6 ? ty + e.clientY - y : ty + event.clientY - y)+'px';
return false;
}
}

but this edit seems to disable IE from working:

Code:

function selectmouse(e)
{
function selectmouse(e){
 var fobj = e.target||event.srcElement;
 var topelement = nn6 ? "HTML" : "BODY";

But thank you again vwphillips

**TinmanIII** · 04-11-2011, 09:55 PM

Ok, I just noticed a bug.
Using IE V.8 the scrollbars do not work. I can scroll with my mouse wheel, but not the browser's scroll bar.
Here's the code:

Code:

var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = (nn6 ? tx + e.clientX - x : tx + event.clientX - x)+'px';

    dobj.style.top  = (nn6 ? ty + e.clientY - y : ty + event.clientY - y)+'px';
    return false;
  }
}

function selectmouse(e)
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }
  if (fobj.className=="dragme")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0,10);
    ty = parseInt(dobj.style.top+0,10);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

Not a clue as to why this is happening, would appreciate some help.
Thanks,
Tin.

**jscheuer1** · 04-12-2011, 12:13 PM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
(function(){
	var isdrag = false, x, y, dobj;

	function movemouse(e)
	{
	  e = e || event;
	  if (isdrag)
	  {
	    dobj.style.left = tx + e.clientX - x + 'px';
	    dobj.style.top  = ty + e.clientY - y + 'px';
	    return false;
	  }
	}

	function selectmouse(e)
	{
	  e = e || event;
	  var fobj = e.target || e.srcElement;
	  while (fobj.parentNode && fobj.className !== "dragme")
	  {
	    fobj = fobj.parentNode;
	  }
	  if (fobj.className === "dragme")
	  {
	    isdrag = true;
	    dobj = fobj;
	    tx = parseInt(dobj.style.left || dobj.offsetLeft, 10);
	    ty = parseInt(dobj.style.top || dobj.offsetTop, 10);
	    x = e.clientX;
	    y = e.clientY;
	    document.onmousemove = movemouse;
	    return false;
	  }
	}
	document.onmousedown = selectmouse;
	document.onmouseup = function(){isdrag = false;};
})();
</script>
<style type="text/css">
.dragme {
	position:absolute;
}
</style>
</head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img src="Images/colours/standard_colours/polar_white.png" alt="Polar White" width="114" height="75" class="dragme">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Notes:

Why browser detect when you can feature detect? Checking for document.all is no guarantee that you have an IE browser. And the assumptions (most notably the parentElement object, and picking an arbitrary topelement by perceived browser type) the original script made about IE haven't been entirely true since I believe IE version 4, which almost no one uses. We can safely drop support for it. The version of the code in this post works in IE 5 through and including IE 9, as well as Firefox, probably all modern browsers.
Why expose your variables to the global scope? In this case, by enclosing the code in a self executing function all variables become local.
The scrollbar problem was (best I can determine) that when you mousedown on the scrollbar using the antiquated parentElement object and the arbitrary topelement, the script threw an error. I changed to check to see if there was a parentNode. That way, if there is no perceived parentNode, it stops looking without checking for class or tag names on something that might not exist or might not have them.
I separated style from content by adding the initial check for the element's offsetLeft/Top in lieu of specified inline style values. Inline style may still be used if desired for the initial positioning. Or the element may be given an id to set it's left and top coordinates in a stylesheet. Using the offsets as I have might not work in some browsers if the dragme element is not a direct descendant (immediate childNode) of the body.

Thread: firefox issue

Thread Tools

Search Thread

firefox issue

Thanks Vic

Bug in IE8

Bookmarks

Bookmarks

Posting Permissions