Anyone know why jquery scale removes the right and bottom border of the div when scaling it down? Is there a fix for this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game</title>
<link rel="stylesheet" type="text/css" href="inc/css/global.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<style>
.hit-wraooer { position: relative;}
#hit { height: 98px; width: 98px; margin: 300px auto; border: 1px solid #000; }
.box { height: 600px; width: 600px; position: absolute; top: 55px; left: 500px; z-index:-1;}
.inside-box { height: 598px; width: 598px; border: 1px solid #000; position:relative; z-index:-1;border: 5px solid #000;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var myvar;
$("#clickme").click(function(){
myvar = setInterval(function(){toggle()}, 2000);
});
function toggle(){
$(".box").show();
$(".box").toggle( "scale", {scale: 'box'}, 5000 );
clearInterval(myvar);
}
$("#hit").click(function(){
var alertme = $(".box").offset();
var alertme2 = $("#hit").offset();
if (alertme.top > alertme2.top){
alert("hit");
}
else if (alertme.top < alertme2.top){
alert("missed");
}
});
});
</script>
<div class="box">
<div class="inside-box"></div>
</div>
<div class="hit-wrapper">
<div id="hit"></div>
</div>
<a id="clickme" href="javascript:void(0)">Click Me</a>
</body>
</html>
That's because your border is in the .inside-box, which gets cut out when you resize its wrapper.
Pass the border CSS from the .inside-box to .box and it will work as expected.