MicFin/gist:13e3f9b147c711e4ea3e

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.slide-ruler{
			background-color: green;
			height: 50px;
			width: 500px;
		}
		.slider{
			background-color: orange;
			height: 50px;
			width: 50px;
			margin: 0 auto;
		}
	</style>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>

<div class="slide-ruler">
    <div class="slider"></div>
</div>
<script>

// 0. Set variables we will need and functions we will need
//  - originalMousePosition;
//  - allowMovement = false;
//  - function to subtract mouse positions
// 1. User presses mouse
// 	- save originalMousePosition
// 	- allowMovement = true
// 2. Do something when the mouse moves left
// 	- determine if mouse moves left
// 	- change margin by that number
// 3. Do something when the user releases mouse
// 	- stop moving

// 0. Set variables we will need
//  - var originalMousePosition;
var originalMousePosition;
//  - var allowMovement = false;
var allowMovement = false;
//  - function to subtract mouse positions
function change(original, current){
	return current-original;
};

// 1. User presses mouse
$('.slider').on("mousedown", function(e){
// 	- save originalMousePosition
		originalMousePosition = e.clientX;
// 	- allowMovement = true
    allowMovement = true;
});

// 2. Do something when the mouse moves left
$('body').mousemove(function(e){
	if (allowMovement) {
		currentMousePosition = e.clientX;
		difference = change(originalMousePosition, currentMousePosition);
		originalMousePosition = e.clientX;
	// 	- determine if mouse moves left
		if (difference < 0){
	// 	- change margin by that number
			$(".slider").css("margin-left", "+="+difference+"px");
		};
	};

});
// 3. Do something when the user releases mouse
$('.slider').on("mouseup", function(){
// 	- stop moving
    allowMovement = false;
});


</script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	.slide-ruler{
	background-color: green;
	height: 50px;
	width: 500px;
	}
	.slider{
	background-color: orange;
	height: 50px;
	width: 50px;
	margin: 0 auto;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	</head>
	<body>

	<div class="slide-ruler">
	<div class="slider"></div>
	</div>
	<script>

	// 0. Set variables we will need and functions we will need
	// - originalMousePosition;
	// - allowMovement = false;
	// - function to subtract mouse positions
	// 1. User presses mouse
	// - save originalMousePosition
	// - allowMovement = true
	// 2. Do something when the mouse moves left
	// - determine if mouse moves left
	// - change margin by that number
	// 3. Do something when the user releases mouse
	// - stop moving

	// 0. Set variables we will need
	// - var originalMousePosition;
	var originalMousePosition;
	// - var allowMovement = false;
	var allowMovement = false;
	// - function to subtract mouse positions
	function change(original, current){
	return current-original;
	};

	// 1. User presses mouse
	$('.slider').on("mousedown", function(e){
	// - save originalMousePosition
	originalMousePosition = e.clientX;
	// - allowMovement = true
	allowMovement = true;
	});

	// 2. Do something when the mouse moves left
	$('body').mousemove(function(e){
	if (allowMovement) {
	currentMousePosition = e.clientX;
	difference = change(originalMousePosition, currentMousePosition);
	originalMousePosition = e.clientX;
	// - determine if mouse moves left
	if (difference < 0){
	// - change margin by that number
	$(".slider").css("margin-left", "+="+difference+"px");
	};
	};

	});
	// 3. Do something when the user releases mouse
	$('.slider').on("mouseup", function(){
	// - stop moving
	allowMovement = false;
	});





	</script>
	</body>

	</html>