CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nTuply
nTuply

Reputation: 1374

How to prevent image from going out of the window with JQuery

I'm trying to make a simple image move on the screen with the arrow keys up, down, left and right. It works fine except that the image keeps going out of the window and I can't see. What I want to do is keep the image within the window bounds and not go out of it.

Here's my code:

let height = $(window).height();
let width = $(window).width();

$(document).keydown(function(key) {
  switch (parseInt(key.which, 10)) {
    // Left arrow key pressed
    case 37:
      if ($('img').position().left > 0) {
        $('img').animate({
          left: "-=20px"
        }, 'fast');
      }
      break;
      // Up Arrow Pressed
    case 38:
      if ($('img').position().top > 0) {
        $('img').animate({
          top: '-=20px'
        }, 'fast');
      }
      break;
      // Right Arrow Pressed
    case 39:
      if ($('img').position().left < width) {
        $('img').animate({
          left: '+=20px'
        }, 'fast');
      }
      break;
      // Down Arrow Pressed
    case 40:
      if ($('img').position().top < height) {
        $('img').animate({
          top: '+=20px'
        }, 'fast');
      }
      break;
  }
});
body {
  width: 100%;
  height: 100%;
  background: blue;
  overflow: hidden;
  /*This is the solution*/
}

img {
  position: relative;
  left: 0;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img src="http://pngimg.com/uploads/mario/mario_PNG129.png" />

Upvotes: 3

Views: 1172

Answers (2)

trust trinity
trust trinity

Reputation: 33

i hope my code will bring you some clues

    $(document).ready(function(){
//alert("This page has loaded!");
//Below is code which hides a paragraph when the button is clicked
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
//let width=Math.max($(document).width(), $(window).width());
//let height=Math.max($(document).height(), $(window).height());
let height=$(window).height();
let width=$(window).width();

var w =document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
   
//Below is code which allows for the character to move - why not try craft your own
//version?
$(document).keydown(function(key) {
//document.write(Math.max($(document).height(), $(window).height()));
// document.write(Math.max($(document).width(), $(window).width()));
switch(parseInt(key.which,10) ) {
// Left arrow key pressed
case 37:
if($('img').position().left>1 ){
$('img').animate({left: "-=70px"}, 'fast');}
break;
// Up Arrow Pressed
case 38:
    if($('img').position().top >1 ){
$('img').animate({top: '-=20px'},'fast');}
break;
// Right Arrow Pressed
case 39:
if($('img').position().left<(w-185) ){
$('img').animate({left: '+=70px'},'fast');}
break;
// Down Arrow Pressed
case 40:
    if($('img').position().top<(h-185) ){
$('img').animate({top: '+=70px'},'fast');}

break;
}
});
});
img {
position: relative;
left: 0;
top: 0;
right: 0;
}
body{
   width: 100%;
height: 100%;
background: cyan;
overflow: auto; 
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Including jQuery -->
<script type='text/javascript' src="script.js"></script> <!-- Including the scripting file -->
</head>
<body>
<img
src="http://staublicht.net/wordpress/wp-content/uploads/2011/08/walk_animation.gif"/>
</body>
</html>

Upvotes: 0

Chris
Chris

Reputation: 4810

Seems like you just need to account for one more calculation. Using the right movement as an example, what happens if the current right position of the image is 5px from the edge of the screen? Then ($('img').position().right > width) would compute to true and it would move 20px, putting it 15px off the screen.

So, you simply need to account for this potential.

if($('img').position().right > 0){
    distance = ( ($('img').position().left - width) < 20 ) ? ($('img').position().left - width) : 20;
    $('img').animate({left: "+="+distance+"px"}, 'fast');
}

Here we are saying, if the current position of the image is less than 20px from the right edge, only move it that difference, otherwise, move it 20px.

Similar logic would need to be applied to the bottom to ensure the image does not move more than the height of the screen.

I would recommend applying the same logic to the bottom and left as well. The reason it doesn't move off the screen currently is because you are starting from 0,0 and move 20px at a time. It will always come back to 0,0. However, if you have to move it to the right 12px to stay within bounds, then when you move it back, you could run into the same issue on the left. Hope that makes sense.

Upvotes: 2

Related Questions