Div resize problem i JavaScript
Er løbet ind i et mindre problem angående det nedenstående script. "Vinduerne" det skaber kan dragges, lukkes, og resizes. Men der opstår en fejl når jeg først flytter mit vindue og derefter forsøger at resize det. Dette har holdt mig vågen alt for lang tid , så besluttede mig for at prøve at søge hjælp her.På forhånd tak, Jens.
P.S. Scriptet virker lige pt, kun i delvist i firefox (min beta gik ned og har først lige installeret det gamle igen). Men ellers fuldt funktionelt i IE 7.0, udover den ovenstående fejl.
<html>
<head>
<title>
test
</title>
<script type="text/javascript">
var windowContainer;
var currentlyFocused;
var currentDrag;
var currentDragStartPosX;
var currentDragStartPosY;
var currentResize;
window.onload = function ()
{
windowContainer = document.getElementById("windowContainer");
}
document.onmousemove = function ()
{
if(currentDrag != null)
{
currentDrag.style.top = event.clientY - currentDragStartPosY;
currentDrag.style.left = event.clientX - currentDragStartPosX;
}
if(currentResize != null)
{
currentResize.style.width = event.clientX - currentResize.style.left;
currentResize.style.height = event.clientY - currentResize.style.top;
}
}
function windowMouseUp(window)
{
}
function windowMouseDown(window)
{
windowFocus(window);
}
function windowStartResize(window)
{
currentResize = window;
}
function windowRemove(window)
{
windowContainer.removeChild(window);
}
function windowStopResize(window)
{
currentResize = null;
}
function windowStartDrag(window)
{
currentDrag = window;
currentDrag.style.filter = "alpha(opacity=50);";
currentDragStartPosX = event.offsetX;
currentDragStartPosY = event.offsetY;
}
function windowStopDrag(window)
{
currentDrag.style.filter = "alpha(opacity=100);";
currentDrag = null;
}
function windowFocus(window)
{
if(currentlyFocused != null)
{
currentlyFocused.style.zIndex = 0;
currentlyFocused.style.borderColor = "black";
}
window.style.borderColor = "green";
window.style.zIndex = 100;
currentlyFocused = window;
}
</script>
<style>
div.window {
height: 200px;
width: 200px;
border: solid black 1px;
}
#one {
background-color: #FF00FF;
position: absolute;
top: 10px;
left: 10px;
}
#two {
background-color: #FF0000;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="windowContainer">
<div class="window" id="one" onmousedown="windowMouseDown(this);" onmouseup="windowMouseUp(this);">
<div onmousedown="windowStartDrag(this.parentNode);" onmouseup="windowStopDrag(this.parentNode);" style="background-color:black; width:100%; height: 20px;"> </div>
<div onclick="windowRemove(this.parentNode);" style="background-color:blue; position:absolute; right:0px; top:0px; width: 20px; height:20px;"> </div>
<div onmousedown="windowStartResize(this.parentNode);" onmouseup="windowStopResize(this.parentNode);" style="width: 20px; height: 20px; right: 0px; bottom:0px; background-color: black; position: absolute;"></div>
</div>
<div class="window" id="two" onmousedown="windowMouseDown(this);" onmouseup="windowMouseUp(this);">
<div onmousedown="windowStartDrag(this.parentNode);" onmouseup="windowStopDrag(this.parentNode);" style="background-color:black; width:100%; height: 20px;"> </div>
<div onclick="windowRemove(this.parentNode);" style="background-color:blue; position:absolute; right:0px; top:0px; width: 20px; height:20px;"> </div>
<div onmousedown="windowStartResize(this.parentNode);" onmouseup="windowStopResize(this.parentNode);" style="width: 20px; height: 20px; right: 0px; bottom:0px; background-color: black; position: absolute;"></div>
</div>
</div>
</body>
</html>
