mouseup problems with small area

[russthebarber]

I'm new to javascript and jquery so rather than using a set plug-in for this, I decided to program it myself to get some practice. I have a slidebar that controls the opacity of a div on my site. The bar itself works fine. Running a function based on my mouse position on mouseup works fine too, if I am careful not to move my mouse away from the bar. The problem is when I move my mouse slightly out of the div while sliding and then release the mouse, my function is not triggered. Any ideas how to correct this. Here is my code:

<div id="slider" style="position: absolute; top: 200px; left: 10px;">
	<div id="sliderBase" style="position: absolute; top: 0px; left: 0px; width: 180; height: 10; border: 1px solid #cccccc;">
		<div id="sliderKnob" style="position: absolute; top: 0px; left: 0px; width: 11; height: 11; background: #cccccc;"></div>
	</div>	
</div>

<script language="javascript" type="text/javascript">

$("#sliderKnob").draggable({ containment: 'parent' });
$("#sliderKnob").mouseup(defineAlpha);

var refAlpha;

function defineAlpha(e) 
{
	var knobRange = 180-11;//width of area is width of slider div - width of knob
	var mouseXPos = (e.pageX-10);//get x position of mouse relative to sliderBase
	refAlpha = (Math.round((mouseXPos/(knobRange*1.055))*100))/100 // converts to opacity value with a small tweak
	$("#reference").css({"opacity":refAlpha});//changes opacity of reference div
	
}

[html-tutorials]

Hope this message finds you well,

Do not use mouseup, this is like doing patchwork to something that already has that function.

You need to bind a function to the "draggable" element's event.

This event is likely to be something like "on update" or "update"... as I just found out below, in your case you need the stop, or dragstop event.

Google "jQuery draggable" and you will find a page that has tabs for source code and other details. On that page, they list all events and how to bind functions to them. That's pretty much what a plug-in is for, they provide you a number of events.

So, start thinking in terms of events Just figure out what they are and how to bind them to a function that does whatever.

This function is usually passed a parameter that contains some data about the "target" element, like mouse position x/y, etc.

here is a little help directly from jQuery documentation of draggable, under "Events" tab:

//Event: stop   Type:dragstop
//This event is triggered when dragging stops.

//Code examples

//Supply a callback function to handle the stop event as an init option.
$( ".selector" ).draggable({
   stop: function(event, ui) { ... }
});

//Bind to the stop event by type: dragstop.
$( ".selector" ).bind( "dragstop", function(event, ui) {
  ...
});

Use one of those ways to determine when the dragging has stopped, and event + ui parameters will contain the objects/data you need.