I have created a basic webpage using JavaScript that aims to scale an element from the center of the page over time when clicked. It is functioning properly for the SVG element I tested it with.
However, when I use an image, it initially appears outside of the centered div and gradually moves towards it as it enlarges, eventually getting centered as intended. Despite setting overflow to hidden, the image remains visible outside of the div. The div is always resized first and should be large enough to contain the image.
Could this issue be due to the small size values I am utilizing, or is there a flaw in my code?
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
}
#maindiv {
position:absolute;
background-color:#141414;
width:100%;
height:100%;
overflow: hidden;
}
#face {
width:109px;
/* height: auto !important; */
}
#facediv {
position: absolute;
top: 50%;
left: 50%;
}
</style>
<script>
function sizeUpdate (elem){
var sf = 1
function frame(){
sf++ <!-- increment scale factor
var fwidth = 0.1;
var scaledwidthface = (fwidth * sf); <!-- scaled width - width-constant*scale-factor
var face_var =document.getElementById("face");
var facediv_var = document.getElementById("facediv");
facediv_var.style.width = ""+scaledwidthface+"px"; <!-- set containing div to same width as object
facediv_var.style.marginLeft = ""+(-1 * scaledwidthface/2 )+"px"; <!-- set the container div to x-offset half object-width (centres horizontally)
face_var.style.width = ""+scaledwidthface+"px"; <!-- set width of object
var face_ht = face_var.clientHeight; <!-- get integer-form of object height (?)
facediv_var.style.height = ""+face_ht+"px"; <!-- set container div to same height as object
facediv_var.style.marginTop = ""+(-1*face_ht/2)+"px"; <!--set container div y-offset half object-height (centres vertically)
if (sf == 500)
clearInterval(id) <!--stop when incr reaches this maximum
}
var id = setInterval(frame, 50)
}
</script>
</head>
<body>
<div id="maindiv" onclick="sizeUpdate(this.children[0])">
<div id="facediv">
<img id="face" src="http://goo.gl/6xLiC">
</div>
</div>
</body>
</html>