views:

485

answers:

1

hey all,

i've created a very iphone-y slider element that is both restricted in overall movement horizontally (0-400px and it does not move vertically) and "snaps" to either side of the 400px "container" when it has passed the 200px mark and the drag has ended. It works perfect in firefox. In Safari, the onEnd function that positions the element to either end of this 400px container, is never called. Whats more, the draggable element "sticks" to the mouse cursor and i have to reload the page to end the animation.

Here's my code

<div style="width:100px;height: 60px;background-color:#000;z-index:999" id="dragtest" />
<script language="JavaScript" type="text/javascript">
new Draggable('dragtest', { constraint: 'horizontal',
 onEnd: function(e, me) {
  console.debug("!!!")
  element = e.element
  x = element.style.left
  x = x.gsub('px','')

  if (x >= 200) {
   $('dragtest').style.left = 400+'px';

  }

  if (x < 200) {
   $('dragtest').style.left = 0+'px';
  }

  console.debug("Snapping to ", element.style.left, " (x was ", x, ")")
  return true;

    },
 snap: function(x, y) {
  ret_x = x
  ret_y = y

  if (x >= 400) {
   ret_x = 400
  }

  if (x <= 0) {
   ret_x = 0
  }

  return [ret_x,ret_y]

 }
});
</script>

thanks! andrew

A: 

For your future reference (couldnt google anything out of this), uncommenting console.debug() calls from within the onEnd handler resolved this. Weird.

pgn
Do you mean commenting out console.debug()? If you use firebug, go to their website and make sure to use their stub file which defines functions like "console.debug()" so browsers /w-out firebug don't blow up.
Cory R. King
Thanks, i did have firebug-lite loaded though..
pgn