Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Thanked 0 Times in 0 Posts

    mouseup problems with small area

    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>
    <script language="javascript" type="text/javascript">
    $("#sliderKnob").draggable({ containment: 'parent' });
    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

  • #2
    New Coder
    Join Date
    Dec 2011
    San Francisco, CA
    Thanked 5 Times in 5 Posts
    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.
    Last edited by html-tutorials; 12-17-2011 at 01:47 AM.

  • Users who have thanked html-tutorials for this post:

    russthebarber (12-21-2011)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts