/************************************************************
Dragable layer creator
By Mark Wilton-Jones 14/10/2002
v1.0.1 updated 7/12/2003 for strict doctype bug fix
*************************************************************
Please see http://www.howtocreate.co.uk/jslibs/ for details and a demo of this script
Please see http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use
To use:
Inbetween the tags, put:
To create a dragable layer put:
#ZoomRect {
POSITION: absolute; LEFT: 400px; TOP: 665px; HEIGHT: 20px; width:300px;
background-color: #ffff00; //the background
filter:alpha(opacity=50); // Internet Explorer
-moz-opacity:0.5; // Mozilla 1.6 and below
opacity: 0.5; // newer Mozilla and CSS-3
}
___________________________________________________________________________________________*/
function createDragableLayer(lID, layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {
if( document.layers ) {
document.write( ''+layerContent+'' );
} else {
document.write( ''+layerContent+'
' );
}
}
function createDragableRule(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {
if( document.layers ) {
document.write( ''+layerContent+'' );
} else {
document.write( ''+layerContent+'
' );
}
}
function createDragableRule1(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {
if( document.layers ) {
document.write( ''+layerContent+'' );
} else {
document.write( ''+layerContent+'
' );
}
}
function createDragableDLG(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {
if( document.layers ) {
document.write( ''+layerContent+'' );
} else {
document.write( ''+layerContent+'
' );
}
}
/// while arrow moves
function dragMousePos(e) {
//get the position of the mouse
if( !e ) { e = window.event; } if( !e || ( typeof( e.pageX ) != 'number' && typeof( e.clientX ) != 'number' ) ) { return [0,0]; }
if( typeof( e.pageX ) == 'number' ) { var xcoord = e.pageX; var ycoord = e.pageY; } else {
var xcoord = e.clientX; var ycoord = e.clientY;
if( !( ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) || ( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 ) || window.navigator.vendor == 'KDE' ) ) {
if( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) ) {
xcoord += document.documentElement.scrollLeft; /*ycoord += document.documentElement.scrollTop;*/
} else if( document.body && ( document.body.scrollTop || document.body.scrollLeft ) ) {
xcoord += document.body.scrollLeft; /*ycoord += document.body.scrollTop;*/ } } }
var zL0 = findObj("lleft").style.left;
if (zL0.indexOf("px") > 0)
zL0 = zL0.substring(0,zL0.indexOf("px"));
var zL = eval(zL0) + 17;
var zR0 = findObj("rright").style.left;
if (zR0.indexOf("px") > 0)
zR0 = zR0.substring(0,zR0.indexOf("px"));
var zR = eval(zR0) + 17;
var w = Math.abs(zR-zL)
if (zR > gLeft && zL > gLeft )
{
if (zR >= zL )
findObj("ZoomRect").style.left = zL;
else
findObj("ZoomRect").style.left = zR;
findObj("ZoomRect").style.width = w;
/// chamge date pos
zL = eval(zL)-35;
zR = eval(zR)-35;
var objDate;
var i= 40, k=0;
if (arrowLeft == 1)
{
i = zL0 - gLeft - 40 + 5;
if (i >= 0 )
{
k = i/deltaX + "";
k = parseInt(k);
objDate = findObj("DateLeft");
ChangeObjContent(objDate, formatDate(sDate[k]));
findObj("DateLeft").style.left = zL;
}
}else{
i = zR0 - gLeft - 40 + 5;
if (i >= 0 )
{
k = i/deltaX + "";
k = parseInt(k);
objDate = findObj("DateRight");
ChangeObjContent(objDate, formatDate(sDate[k]));
findObj("DateRight").style.left = zR;
to = sDate[k];
}
}
}else{
if (zR >= zL )
findObj("ZoomRect").style.left = gLeft + 40;
else
findObj("ZoomRect").style.left = gLeft + 40;
}
return [xcoord,ycoord];
}
/// while click arrows
function dragIsDown(e) {
if (this.id == "lleft")
{
arrowLeft = 1;
arrowRight = 0;
}else if (this.id == "rright")
{
arrowLeft = 0;
arrowRight = 1;
}
//make note of starting positions and detect mouse movements
if( ( e && ( e.which > 1 || e.button > 1 ) ) || ( window.event && ( window.event.which > 1 || window.event.button > 1 ) ) ) { return false; }
window.msStartCoord = dragMousePos(e); window.lyStartCoord = this.style?[parseInt(this.style.left),parseInt(this.style.top)]:[parseInt(this.left),parseInt(this.top)];
if( document.captureEvents && Event.MOUSEMOVE ) { document.captureEvents(Event.MOUSEMOVE); document.captureEvents(Event.MOUSEUP); }
window.storeMOUSEMOVE = document.onmousemove; window.storeMOUSEUP = document.onmouseup; window.storeLayer = this;
document.onmousemove = dragIsMove; document.onmouseup = dragIsMove; return false;
}
/// to determine arrow moves position
function dragIsMove(e) {
//move the layer to its newest position
var msMvCo = dragMousePos(e); if( !e ) { e = window.event ? window.event : ( new Object() ); }
var newX = window.lyStartCoord[0] + ( msMvCo[0] - window.msStartCoord[0] );
if (newX < gLeft + 40 )
newX = gLeft + 40 ;
else if (newX > gLeft + width+40)
newX = gLeft + width+40;
var newY = window.lyStartCoord[1] + ( msMvCo[1] - window.msStartCoord[1] );
//reset the mouse monitoring as before - delay needed by Gecko to stop jerky response (hence two functions instead of one)
//as long as the Gecko user does not release one layer then click on another within 1ms (!) this will cause no problems
if( e.type && e.type.toLowerCase() == 'mouseup' ) { document.onmousemove = storeMOUSEMOVE; document.onmouseup = window.storeMOUSEUP; }
if( navigator.product == 'Gecko' ) { window.setTimeout('dragIsMove2('+newX+','+newY+');',1); } else { dragIsMove2(newX,newY); }
}
function dragIsMove2(x,y)
{
var oPix = ( document.childNodes ? 'px' : 0 ), theLayer = ( window.storeLayer.style ? window.storeLayer.style : window.storeLayer );
theLayer.left = x + oPix; /*theLayer.top = y + oPix;*/
}