Your script has a lot of missing } and ). Also a div will not usually respond to keypress events because it doesn’t usually receive keyboard focus; better to use e.g. document.
Furthermore it is better to animate using $('.divs') (instead of $('div')) to prevent other divs on the page from being animated.
The result is below; it may not yet do what you need in the end, I only fixed technical issues to make it run and animate.
$(document).ready(function() {
$(document).keypress(function(e) {
if (String.fromCharCode(e.which) == 'a') {
console.log("Key: a");
$(".divs").animate({
'top': '50px',
'width': '+=25px',
'height': '+=25px'
}, 1000);
}
});
$(document).keypress(function(e) {
if (String.fromCharCode(e.which) == 'b') {
console.log("Key: b");
$(".divs").animate({
'bottom': '50px',
'width': '-=25px',
'height': '-=25px'
}, 1000);
}
})
})
.divs {
position: absolute;
height: 100px;
width: 100px;
border: 2px solid red;
background-color: yellow;
}
#div1 { left: 40px; top: 125px; }
#div2 { right: 45px; bottom: 27px; }
#div3 { left: 85px; top: 352px; }
#div4 { right: 258px; bottom: 323px; }
#div5 { left: 450px; top: 587px; }
#div6 { right: 198px; top: 498px; }
#div7 { left: 375px; top: 450px; }
#div8 { right: 425px; bottom: 575px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divs" id="div1"><h3>Chris</h3></div>
<div class="divs" id="div2"><h3>Chris</h3></div>
<div class="divs" id="div3"><h3>Chris</h3></div>
<div class="divs" id="div4"><h3>Chris</h3></div>
<div class="divs" id="div5"><h3>Lynch</h3></div>
<div class="divs" id="div6"><h3>Lynch</h3></div>
<div class="divs" id="div7"><h3>Lynch</h3></div>
<div class="divs" id="div8"><h3>Lynch</h3></div>
So I am attempting to use the keypress function to when I press the ‘a’ key, I want all my divs to move up 50px and strech by 25px for both height and width over the course of 1 second; when I press the ‘b’ key to have the divs move down by 50px and shrink by 25 px. I readied the document for my script and I am not able to get the features to function. Beneath is a snipit of my code. Clearly something is wrong with my code and for some reason my 75 year old professor just yells when you as him questions. I have placed 8 divs in different areas on the screen and the goal is to shift them up and down. I clearly know something is wrong with my code but I am not sure where. The notes given to us in class also are not functioning and those are directly pulled from his blackboard layout. My script is not functioning at all. Am i using the wrong attributes?
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<style type="text/css">
.divs {
position: absolute;
height: 100px;
width: 100px;
border: 2px solid red;
background-color: yellow;
}
#div1 {
left: 40px;
top: 125px;
}
#div2 {
right: 45px;
bottom: 27px;
}
#div3 {
left: 85px;
top: 352px;
}
#div4 {
right: 258px;
bottom: 323px;
}
#div5 {
left: 450px;
top: 587px;
}
#div6 {
right: 198px;
top: 498px;
}
#div7 {
left: 375px;
top: 450px;
}
#div8 {
right: 425px;
bottom: 575px;
}
</style>
</head>
<body>
<div class="divs" id="div1">
<h3>
Chris
</h3>
</div>
<div class="divs" id="div2">
<h3>
Chris
</h3>
</div>
<div class="divs" id="div3">
<h3>
Chris
</h3>
</div>
<div class="divs" id="div4">
<h3>
Chris
</h3>
</div>
<div class="divs" id="div5">
<h3>
Lynch
</h3>
</div>
<div class="divs" id="div6">
<h3>
Lynch
</h3>
</div>
<div class="divs" id="div7">
<h3>
Lynch
</h3>
</div>
<div class="divs" id="div8">
<h3>
Lynch
</h3>
</div>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div').keypress(function(e) {
if (String.fromCharCode(e.which) == 'a') {
$("div").animate({'top': '50px',
'width': '+=25px',
'height': '+=25px' }, 1000);
$(document).ready(function() {
$('div').keypress(function(e) {
if (String.fromCharCode(e.which) == 'a') {
$("div").animate({'bottom': '50px',
'width': '-=25px',
'height': '-=25px' }, 1000);
}
</script>
</body>
</html>
If I recall correctly div objects don’t have a keypress function on them. What you want to look for isn’t div but global webpage state. a
If you want a div to “move down” then you need to increase it’s “top” value, not change the “bottom”. Likewise, to move “up” to decrease the “top” value. “top” is how far down it is from the top of the page, with 0 being right at the top, “bottom” is how far up it is from the bottom of the page, with 0 being at the bottom.
