Re: [jQuery] how to disallow a div's 'left' property from exceeding a specified number

Sat, 12 Dec 2009 12:53:53 -0800

you may want to consider the jQueryUI draggable. It has containment option

http://jqueryui.com/demos/draggable/

you also benefit from a big support group for UI

exodusnicholas wrote: 
I'm using  http://dev.iceburg.net/jquery/jqDnR/ this  tiny drag plugin to
drag div.slider horizontally across it's div.container.
I do not want div.slider to be able to go past the bounds(don't want it to
exit) div.container.
so when div.slider reaches the very right side of it's container
div.container, i want it to not allow the user to drag it any further right,
so that it stays inside of it's container.

here's my jquery:

		$(".slider").mouseup(function() {
			var leftStyleValue = $('div.slider').css('left');
			$('.display_value').html(leftStyleValue);
				
		    if (parseInt($('.slider').css('left')) > 100) {
				$('#completion').text("YOU DID IT!");
			}
			else {
				$(".slider").animate({left: 0
				}, 500);
			}
 	   
		});

end of Jquery.

If i change "mouseup" to mousemove, then it wont allow you to even drag it
since it's checking on every pixel move. right now, i can drag div.slider
outside of div.container and when i let go of the mousebutton, since i'm not
doing a mouseup on div.container, it does nothing.

If you want to see the plugin code, go to the site above, copy the
compressed plugin code, then go to  http://jsbeautifier.org/
http://jsbeautifier.org/  and see the uncompressed version.

Thank you SO much!!!

Reply via email to