[ka-Map-users] keymap drag/drop workaround for IE6

Jon Fatula jonf at cruzio.com
Tue Jan 24 20:30:19 EST 2006


Hi, all,
  Keymap drag and drop currently doesn't work under Internet Explorer 6.
>From playing with it a bit, it seems that the 'div' element domExtents
will trigger a mousedown event only from its non-transparent region: the
mousedown is only generated if the user clicks on the 1-pixel wide red
border of the div.
   A first cut at a workaround follows below: at update time, the background
color of the div is changed to white, with a 30% opacity, so that most of
the underlying keymap image is still visible, and the border is thickened to
2 pixels for improved visibility.  If the size of the drag box is small
enough,
the alternate domCross crosshair image is displayed, and the div opacity is
set
to 100%.
   It's not as clean as the behavior under Firefox, but I'm sure that those
of you
who are deeper DCOM hackers than I am can come up with a more elegant
solution...
-jon

// ---------begin: cut here --------------------------------------
// workaround replacement for function kaKeymap.prototype.update()
// from kaKeymap.js,v 1.18 2006/01/19 20:35:32
//
// jon fatula (jonf at cruzio.com) v 0.1 2006/01/24 23:00 GMT
//

kaKeymap.prototype.update = function( eventID, extents )
{
    if (!this.aExtents || !this.domExtents)
    {
        this.initialExtents = extents;
        return;
    }
//commentato da Cappu non è strettamente necessario e talvolta non
aggirnava il div
//  if(this.pxExtent && eventID == 5)
//  { /*evaluate if div position is different from map position*/
// 	mgcX=(((extents[2]-extents[0])/2)+extents[0]);
// 	mgcY=(((extents[3]-extents[1])/2)+extents[1]);
// 	kgc=this.geoCentCoord();
// //	if((mgcX-kgc[0])== 0 && (mgcY-kgc[1])==0) return;
//  }

    var left = (extents[0] - this.aExtents[0]) / this.cellWidth;
    var width = (extents[2] - extents[0]) / this.cellWidth;
    var top = -1 * (extents[3] - this.aExtents[3]) / this.cellHeight;
    var height = (extents[3] - extents[1]) / this.cellHeight;

    this.pxExtent = new Array(left,top,width,height);
    this.domExtents.style.top = parseInt(top+0.5)+"px";
    this.domExtents.style.left = parseInt(left+0.5)+"px";

    if (parseInt(width+0.5) < parseInt(this.domCross.style.width) ||
        parseInt(height+0.5) < parseInt(this.domCross.style.height) )
    {
        //show crosshair and center on center of image
		var ix = parseInt(this.domCross.style.width)/2;
		var iy = parseInt(this.domCross.style.height)/2;

		var ox = width/2;
		var oy = height/2;

		this.domExtents.style.width = this.domCross.style.width;
        this.domExtents.style.height = this.domCross.style.height;

		this.domExtents.style.top = (parseInt(this.domExtents.style.top) - iy +
oy) + 'px';
		this.domExtents.style.left = (parseInt(this.domExtents.style.left) - ix +
ox) + 'px';
		this.domCross.style.visibility = 'visible';
		this.domExtents.style.border = '1px solid white';
            // begin IE drag-drop workaround block 1
	      if (this.kaMap.isIE4)
            {
                this.domExtents.style.backgroundColor = 'white';
                this.domExtents.style.filter = "Alpha(opacity=100)";
            }
     		// end IE drag-drop workaround block 1
    }
    else
    {
    	this.domExtents.style.width = parseInt(width+0.5) + "px";
	    this.domExtents.style.height = parseInt(height+0.5) + "px";
		this.domCross.style.visibility = 'hidden';
		this.domExtents.style.border = '1px solid red';
		// begin IE drag-drop workaround block 2
	      if (this.kaMap.isIE4)
            {
                this.domExtents.style.backgroundColor = 'white';
                this.domExtents.style.filter = "Alpha(opacity=30)";
                // border thickened for visibility
		    this.domExtents.style.border = '2px solid red';
            }
		// end IE drag-drop workaround block 2
     }
}
//------------------- end:  cut
here ------------------------------------------




More information about the ka-Map-users mailing list