ansaurus

Question

Answer 1

+1 A:

You don't really define what the problem is and its difficult to debug anything without being able to run the website.

However, it might be that function main() can't find the image control. ASP.NET automatically renames your ids to ensure that they are unique. So that MapImage element id will actually be Callback_Mapimage.

function main() {
        alert("foo");
        initWheelZoomEventhandler();
        makeDraggable(document.getElementById("Callback_Mapimage"));
    }

In Asp.net 4 you can set ClientIdMode="static" on the image to prevent this renaming.

geoff 2010-10-25 07:30:15

Thanks for your reply geoff. It's really hard to define the problem if you don't know what could be the problem... :) I already checked the call you named at. I get my element with the ID 'Mapimage', so it's not null. Seems i forgot to say that I use ASP.Net V3.5. Of course you are right with your debugging-statement. Just thought you might know about some complications when using Javascript and ASP.Net/devExpress components.

Alex 2010-10-25 07:40:01

@Alex - Are you sure? Asp.net will definitely rename that id. Have a look in Firebug. Otherwise I dont know of any complications with DX controls, except that they often render a lot of extra markup over the standard controls to enable their extra functionality. Although in your example, they do just rendera standard `<img>` element.

geoff 2010-10-25 07:50:52

@geoff: Yeah you are right with the renaming of the ID. I checked the Image on being null now again, ones with the simple unrenamed Id 'Mapimage' and with the renamed Id 'Callback_Mapimage' as you said. Both were not null and the element was received when calling it per 'document.getElementById(...)'. This seems kind a strange.. With the 'Callback_Mapimage' call panning now works in IE, but not in Firefox. Thanks so far geoff!

Alex 2010-10-25 08:11:08

@Alex - I'm sorry I don't know what might be causing Firefox not to work. I suggest you try using Firebug to debug.

geoff 2010-10-25 08:51:28

Answer 2

A:

@geoff: Okay fixed it after some headbanging on my table. The key to the solution was the renaming of the ID which I didn't know and the correct alignment of the divs/DevExpress components. I also had to deal with the different browser-types.

This is the working JavaScript code, tested in Chrome, Opera, IE and Mozilla:

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

var dragObject = null;
var mouseOffset = null;
var imgStartLoc = null;


function mouseCoords(ev)
{
  if (ev.pageX || ev.pageY)
  {
    return { x: ev.pageX, y: ev.pageY };
  }
  return {
    x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y: ev.clientY + document.body.scrollTop - document.body.clientTop
  };
}

function getMouseOffset(target, ev)
{
  ev = ev || window.event;

  var docPos = getPosition(target);
  var mousePos = mouseCoords(ev);

  return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y };
}

function getPosition(e)
{
  var left = 0;
  var top = 0;

  while (e.offsetParent)
  {
    left += e.offsetLeft;
    top += e.offsetTop;
    e = e.offsetParent;
  }

  left += e.offsetLeft;
  top += e.offsetTop;

  return { x: left, y: top };
}

function mouseMove(ev)
{
  ev = ev || window.event;
  var mousePos = mouseCoords(ev);


  if (dragObject)
  {
    dragObject.style.position = 'absolute';
    var mouseDelta = { x: mousePos.x - mouseOffset.x, y: mousePos.y - mouseOffset.y }
    dragObject.style.top = (imgStartLoc.y + mouseDelta.y).toString() + 'px';
    dragObject.style.left = (imgStartLoc.x + mouseDelta.x).toString() + 'px';

    return false;
  }
}

function mouseUp()
{
  dragObject = null;

}

function makeDraggable(item)
{
  if (!item)
  {
    return;
  }

  item.onmousedown = function(ev)
  {
    dragObject = this;
    ev = ev || window.event;
    mouseOffset = mouseCoords(ev);

    imgStartLoc = {
      x: isNaN(parseInt(dragObject.style.left)) ? 0 : parseInt(dragObject.style.left),
      y: isNaN(parseInt(dragObject.style.top)) ? 0 : parseInt(dragObject.style.top)
    };

    return false;
  }

}

And the use in HTML:

 <script type="text/javascript">

        // initialize the eventlisteners for user-interaction
        function init()
        {
          makeDraggable(document.getElementById("Callback_Mapimage"));
        }

  </script>

Thanks geoff for your aid!

Greets, Alex

Alex 2010-10-25 14:27:54

ansaurus

tags:

views:

answers:

JavaScript Panning on ASP Image

related questions