notarypublic
New Member
Working on my personal website - expect a post on it soon!
However, in the meantime I've been trying to teach myself jquery. For this challenge, I want to make the blue div move up or down a certain distance based on which list item is clicked on. I don't have anywhere to host this at the moment, so here is the code in its entirety:
I had this working previously, when the values were hard-coded in.. But now, I want it to work now if I pass a variable to the function - am I going about this the wrong way?
However, in the meantime I've been trying to teach myself jquery. For this challenge, I want to make the blue div move up or down a certain distance based on which list item is clicked on. I don't have anywhere to host this at the moment, so here is the code in its entirety:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.block {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
.sandbox {
width: 800px;
height: 800px;
background-color: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<ul>
<li id = "writing">writing</li>
<li id = "math">math</li>
<li id = "science">science</li>
<li id = "english">english</li>
<li id = "you">you</li>
</ul>
<div class = "sandbox">
<div class="block"></div>
<script>
/*
There is a current distance, a new distance to move to, and the distance the user has chosen.
*/
var currentDistance;
var newDistance;
var inputDistance;
$("#writing").click(function(){
inputDistance = 1;
});
$("#math").click(function(){
inputDistance = 2;
});
$("#science").click(function(){
inputDistance = 3;
});
$("#english").click(function(){
inputDistance = 4;
});
$("#you").click(function(){
inputDistance = 5;
});
newDistance = inputDistance - currentDistance;
$(".block").animate({marginTop: "+=newDistance"}, "slow");
currentDistance = newDistance;
</script>
</body>
</html>I had this working previously, when the values were hard-coded in.. But now, I want it to work now if I pass a variable to the function - am I going about this the wrong way?
