[thelist] JS and Dragging in IE5

Fri May 24 16:49:01 CDT 2002

Whoops, I just realized where you removed the targElem var declaration in all but engage. Why does
it matter that you take out var=? I get variable undefined if I put it in. It must have something
to do with var scope? I feel like this is a basic concept I am missing here... (thanks so much by
the way.)

Tom
--- Richard Bennett <richard.bennett at skynet.be> wrote:
> Hi,
> Try this version:
>
> <html xmlns:v ="urn:schemas-microsoft-com:vml">
> <head>
> <title>3D VML</title>
> <style>
> v\:* { behavior: url(#default#VML); }
> </style>
> <SCRIPT LANGUAGE="JavaScript">
> var engaged = false
> var offsetX = 0
> var controlOffset = 20
>
> function dragIt(evt) {
> evt = (window.event) ? window.event : ""
>  if (engaged) {
>   if (targElem.className == "draggable") {
>    targElem.style.left = evt.clientX - offsetX - controlOffset + "px"
>    return false
>   }
>  }
> }
>
> function engage(evt) {
>  evt = (window.event) ? window.event : ""
>  targElem = evt.srcElement
>  if (targElem.className == "draggable") {
>   engaged = true
>   offsetX = evt.offsetX - document.body.scrollLeft
>   return false
>  }
> }
>
> function release(evt) {
> evt = (window.event) ? window.event : ""
> if (targElem.className == "draggable") {
> while (targElem.id != "knob" && targElem.parentNode) {
> targElem = targElem.parentNode
> }
> if (engaged && targElem.id == "knob") {
> engaged = false
>
> }
> }
> }
>
> //handle events
> document.onmousedown = engage
> document.onmouseup = release
> document.onmousemove = dragIt
> //document.onmouseout = release
> </SCRIPT>
> </head>
>
> <body>
>
> <!-- slider control -->
>
> <div id="viewerControl" style="display: block; position: absolute; top: 100;
> left: 20;
> border-style: solid; border-color: silver; border-width: 1px; width: 400;
> height: 350;">
>
> <v:rect id="slider"
> fillcolor="white"
> strokecolor="black"
> style="position:absolute; top:10; left:10; width:300; height:10">
> </v:rect>
>
> <v:rect id="knob" class="draggable"
> fillcolor="red"
> strokecolor="black"
> style="position:absolute; top:10; left:250; width:55; height:10">
> </v:rect>
>
> </div>
>
> <input type="button" value="Hide" onclick="javascript:
> document.getElementById('viewerControl').style.display = 'none';"> <input
> type="button"
> value="Show" onclick="javascript:
> document.getElementById('viewerControl').style.display =
> 'block';">
>
> </body>
> </html>
>
> --
> For unsubscribe and other options, including
> the Tip Harvester and archive of thelist go to:
> http://lists.evolt.org Workers of the Web, evolt !

__________________________________________________
Do You Yahoo!?
LAUNCH - Your Yahoo! Music Experience
http://launch.yahoo.com