Resize a span

[werD420]

Hello,
im attempting to add the ability to resize a table of contents. but i seem to be running into a problem with it. Im using the MOUSEMOVE Event to capture the x posistion of the mouse but i lose the x position as soon as the Drag event begins. does anyone know of a way i can capture the current mouse x when item is dropped or when dragging(to make it a real time view)?

<script type="text/javascript">
function ResizeTOC(x1)
{
{
toc.style.width = x1;
appliedx.innerText = x1;

}
}

window.onload = init;
function init() {
  if (window.Event) {
    document.captureEvents(Event.MOUSEMOVE);
  }
  document.onmousemove = getXY;
}

function getXY(e) {
  x = (window.Event) ? e.pageX : event.clientX;
  y = (window.Event) ? e.pageY : event.clientY;
currentx.innerText = x
}


</script>
Cur:<span id="currentx"></span><br/>
App:<span id="appliedx"></span><br/>
<span style="width:50px; border:medium; background-color:gray; display:block;" id="toc" 
ondragend="ResizeTOC(x)"

Thanks in advance

MCP, .Net Solutions Development <%_%>

 

[werD420]

I think that im going to end up doing a rollover type resize for it now. Ill allow incremental and a mouseover sizing option as well. I have narrowed this down to two core questions both related

1. Im not sure why i receive invalid argument on this line below setTimeout(runRight(toc2.style.width, maxwidth), 1000)

2. Is there a better way than setTimeout to continually call the runRight method while the mouse is rolled over it? I would like for the sizing to stop when the mouse leaves

function runRight(thiswidth, maxwidth){
str = thiswidth.replace("px","");
if(parseFloat(str) < maxwidth){
toc2.style.width = parseFloat(str) + 2;
setTimeout(runRight(toc2.style.width, maxwidth), 1000)
}
}
[/code

MCP, .Net Solutions Development <%_%>

 

[werD420]

well something like this appears to work for expanding it but id like to create this by a rollover effect any thoughts on how to stop the settimeout on mouseout or a better way to do it?

function runRight(thiswidth, maxwidth){
str = thiswidth.replace("px","");
if(parseFloat(str) < maxwidth){
toc2.style.width = parseFloat(str) + 2;
setTimeout('runRight(toc2.style.width,' + maxwidth + ')', 5)
}
}
</script>
<img src="arrow-expand_16.gif" alt="edit" onmouseover="runRight(toc2.style.width, 400)" width="16" height="16" /><br>
<div id="toc2" style="height:672px; width:96px; display:block; background-color:ButtonFace;">
<br />
</div>

MCP, .Net Solutions Development <%_%>

 

[werD420]

wish i could edit my threads sometimes...

function runRight(thiswidth, maxwidth){
str = thiswidth.replace("px","");
if(parseFloat(str) < maxwidth){
toc2.style.width = parseFloat(str) + 2;
run = setTimeout('runRight(toc2.style.width,' + maxwidth + ')', 5)
}
}
function quitRunning(){
clearTimeout(run)
}

html

<img src="arrow-expand_16.gif" alt="edit"
 onmouseover="runRight(toc2.style.width, 400)" 
 onmouseout="quitRunning()"
 width="16" height="16" />

MCP, .Net Solutions Development <%_%>