Soltalostuple
New Member
I have a div with an image and want the user to move it about inside a div but i dont want it to go outside the div.As the div moves it will still go outside the parent area div and move over the rest of the page which i dont wantHere is my style used\[code\]<style>#area{ width: 500px; height: 500px; margin: auto; clear: both; background-color: red; position: absolute;}#one{ width: 29px; height: 29px; background-image: url("images/fighter.png"); position: relative; top: 50px;}button{ float: left; width: 50px;}.gameControls{ margin: auto; width: 150px;}.gameUp{ margin: 0 0 0 50px;}.clear{ clear: both;}\[/code\]Here is my jQuery script used\[code\]<script> $(document).ready(function(){ $('.gameUp').click(function(event){ $("#one").animate({"top": "-=50px"}, "slow"); }); $('.gameLeft').click(function(event){ $("#one").animate({"left": "-=50px"}, "slow"); }); $('.gameDown').click(function(event){ $("#one").animate({"top": "+=50px"}, "slow"); }); $('.gameRight').click(function(event){ $("#one").animate({"left": "+=50px"}, "slow"); }); });</script>\[/code\]And my body code\[code\]<div class="gameControls"> <button class="gameUp">↑</button> <div class="clear"></div> <button class="gameLeft">←</button> <button class="gameDown">↓</button> <button class="gameRight">→</button> </div><div id="area"><div id="one"></div></div> \[/code\]