CODEWITHSUNDEEP
javascripthtmlinternet-explorer-11
Raph Schim
Raph Schim

Reputation: 538

Internet explorer and one of its bug

Since my last post was difficult to understand, I'll try to explain again my problem but it will be more understandable!

I'm using Internet Explorer 11 (personally, but maybe clients won't use this version, I don't really know).

The context : I have a div on which I have an other page that manage a picture, and the picture is actually larger than the div. So I found a script that allow me to move on the picture by click-dragging (the best example I have of something similar is GoogleMap, the map move when you click-drag). On this image, I have a map with areas (actually, something like 400 areas), and when I click on one of those areas, it opens a new internet page (all areas contains hyperlinks).

The problem : Everything works fine except when my cursor move above an area. When I do this (even without clicking) the page seems to stop, the cursor transform to be the not-allowed cursor, and I can't move anymore for something like 4 seconds. After this 4 seconds, it seems that the page refresh herself and then the page works again like nothing happened, and sometimes, IE crash and I have to stop it. It's kinda handicapping because it makes the page less responsive.

Did someone already have this bug?

Thanks a lot!

(N.B : I will put the code if someone asks me to, but I'm not sure this is really important in that case :/)

And now the code : Page 1 : the page in which the div is placed :

<div id="one">
    <iframe src="index.htm" style="width:100%; height:100%;" alt=""   id="fram"> </iframe>
</div>

Page 2 :

function startDrag(e) {

    // determine event object
    if (!e) {
        var e = window.event;
    }
    // IE uses srcElement, others use target
    var targ = e.target ? e.target : e.srcElement;

    if (targ.className != 'dragme') {return};
    // calculate event X, Y coordinates
    window.offsetX = e.clientX;
    window.offsetY = e.clientY;

    // assign default values for top and left properties
    if(!targ.style.left) { targ.style.left='0px'};
    if (!targ.style.top) { targ.style.top='0px'};

    // calculate integer values for top and left 
    // properties
    window.coordX = parseInt(targ.style.left);
    window.coordY = parseInt(targ.style.top);

    drag = true;

    // move div element
        document.onmousemove=dragDiv;

}

 function dragDiv(e) {
    if (!drag) {return};
    if (!e) { var e= window.event};
    var img = "SiteMap.png";
    var targ=e.target?e.target:e.srcElement;
    // move div element
        if (coordX+e.clientX-offsetX < 0 && coordX+e.clientX-offsetX > -maxsizeX+divX){
            targ.style.left=coordX+e.clientX-offsetX+'px';
        }
        if (coordY+e.clientY-offsetY< 0 && coordY+e.clientY-offsetY > -maxsizeY+divY){
            targ.style.top=coordY+e.clientY-offsetY+'px';
        }

    return false;
}

function stopDrag() {
    drag=false;
}

</head>
<body>
<img src="SiteMap.png" usemap="#TruView" id="draggable" class="dragme">
<map name="TruView">

<area title="P96N-P-1" shape="circle" coords="5091,347,16" href="P96N-P-1/TruView.xml" target="_blank">
<area title="P96N-P-2" shape="circle" coords="5105,490,16" href="P96N-P-2/TruView.xml" target="_blank">
<area title="P96N-P-3" shape="circle" coords="5112,682,16" href="P96N-P-3/TruView.xml" target="_blank">
<area title="P96N-P-4" shape="circle" coords="5123,808,16" href="P96N-P-4/TruView.xml" target="_blank">
<area title="P604-P-1" shape="circle" coords="5105,933,16" href="P604-P-1/TruView.xml" target="_blank">
<area title="P604-P-2" shape="circle" coords="5029,968,16" href="P604-P-2/TruView.xml" target="_blank">
<area title="P604-P-3" shape="circle" coords="5033,1124,16" href="P604-P-3/TruView.xml" target="_blank">
<area title="P604-P-4" shape="circle" coords="5100,1168,16" href="P604-P-4/TruView.xml" target="_blank">
<area title="P98-P-1" shape="circle" coords="5096,1379,16" href="P98-P-1/TruView.xml" target="_blank">
<area title="P98-P-2" shape="circle" coords="5023,1322,16" href="P98-P-2/TruView.xml" target="_blank">
<area title="P98-P-3" shape="circle" coords="5094,1351,16" href="P98-P-3/TruView.xml" target="_blank">
<area title="P98-P-4" shape="circle" coords="5098,1507,16" href="P98-P-4/TruView.xml" target="_blank">
<area title="P98-P-5" shape="circle" coords="5086,1628,16" href="P98-P-5/TruView.xml" target="_blank">
<area title="P98-P-6" shape="circle" coords="5088,1592,16" href="P98-P-6/TruView.xml" target="_blank">
...

Upvotes: 1

Views: 105

Answers (1)

Raph Schim
Raph Schim

Reputation: 538

I will make this response because I checked out how to make it works without problems!

The problem come from :

function dragDiv(e) {
    if (!drag) {return }; // <- HERE! You have to return false, instead of just return
    if (!e) { var e= window.event};
    //var img = "SiteMap.png";
    var targ=e.target?e.target:e.srcElement;

If I understood well, it's used to stop the default working of the browser. Something in link with event.stopPropagation and event.preventDefault. I will make other search on it, but here's the solution, if you have something like this too! :)

Upvotes: 1

Related Questions