NBartomeli
Programmer
I have a table with a single row and 3 cells, first and last cell contain iframes, the middle cell is 5px wide, and when clicked allows the user to drag left/right and change the width of each frame.
My problem is that when the user moves the cursor too quickly, it moves off of the element (<td> tag) that they are dragging and over one of the iframes. Since the iframes have child pages loaded, the "resize" event is not there and therefore the size of the element doesnt change.
is there any way to "lock" the cursor over the element where the mousedown event occured? or is there some other javascript "splitter" control out somewhere I can look at the code for or use?
Thanks in advance, here is a quick-n-dirty sample page:
My problem is that when the user moves the cursor too quickly, it moves off of the element (<td> tag) that they are dragging and over one of the iframes. Since the iframes have child pages loaded, the "resize" event is not there and therefore the size of the element doesnt change.
is there any way to "lock" the cursor over the element where the mousedown event occured? or is there some other javascript "splitter" control out somewhere I can look at the code for or use?
Thanks in advance, here is a quick-n-dirty sample page:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FrameSize</title>
<script>
var frame;
function StartSize(event){
frame = document.getElementById('frame1');
document.attachEvent("onmousemove", SizeGo);
document.attachEvent("onmouseup", SizeStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
function SizeGo(event) {
var x, y;
x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
frame.style.width = x - 25;
window.event.cancelBubble = true;
window.event.returnValue = false;
}
function SizeStop(event) {
document.detachEvent("onmousemove", SizeGo);
document.detachEvent("onmouseup", SizeStop);
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<iframe id="frame1" style="width:500px; height:200px;" scrolling="no" frameborder="0" src="planningtool/loading.htm"></iframe>
</td>
<td onmousedown="StartSize(event);" style="background:black; width:5px; cursor:hand;"> </td>
<td>
<iframe id="frame2" style="width:500px; height:200px;" scrolling="no" frameborder="0" src="planningtool/loading.htm"></iframe>
</td>
</tr>
</table>
</body>
</html>