Guest Posted April 13, 2011 Share Posted April 13, 2011 Here's my function: var cropPic = document.getElementById('cropPic'); var cropFrame = document.getElementById('cropFrame'); var cropPicWidth = cropPic.clientWidth; var cropPicHeight = cropPic.clientHeight; var cropFrameWidth = cropFrame.clientWidth; var cropFrameHeight = cropFrame.clientHeight; var maxX = cropPicWidth - cropFrameWidth; var maxY = cropPicHeight - cropFrameHeight; cropFrame.style.left = (cropPicWidth / 2) - (cropFrameWidth / 2); cropFrame.style.top = (cropPicHeight / 2) - (cropPicHeight / 2); Obviously, it cropFrame in the middle center of cropPic. Thing is, it totally doesn't work unless I delete the doctype declaration from the head of my HTML! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Why on Earth would the doctype kill my function? Makes no sense at all to me... Quote Link to comment Share on other sites More sharing options...
nogray Posted April 13, 2011 Share Posted April 13, 2011 When you set the style you need to add "px" after the top or left. e.g. cropFrame.style.left = ((cropPicWidth / 2) - (cropFrameWidth / 2))+"px"; cropFrame.style.top = ((cropPicHeight / 2) - (cropPicHeight / 2))+"px"; Quote Link to comment Share on other sites More sharing options...
Guest Posted April 13, 2011 Share Posted April 13, 2011 Awesome! Thanks, nogray. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.