[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