So I'm writing an html file that is loaded locally by a UIWebView on the iPad. Each image in the page has a "touchend" event handler that pretty much changes the src of the image to another image file. When I do this, $(glovesImage).attr("src","gloves.png"); inside of the event, for some reason it's arbitrarily changing its position and the positions of any other image elements below it in the HTML tree. Is there any reason for this?
<html>
<head>
<title>Index</title>
</head>
<body>
<img id="backgroundImage" alt="" src="image445.jpg" />
<img id="lockerImage" alt="" src="locker.png" />
<img id="guyImage" alt="" src="guy.png" />
<img id="capImage" alt="" src="cap.png" />
<img id="maskImage" alt="" src="mask.png" />
<img id="shieldImage" alt="" src="shield.png" />
<img id="glovesImage" alt="" src="foldedGloves.png" />
<img id="bootsImage" alt="" src="foldedBoots.png" />
<img id="underGownImage" alt="" src="foldedUnderGown.png"/>
<img id="gownImage" alt="" src="gown.png" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var guyImage;
var capImage;
var maskImage;
var shieldImage;
var gownImage;
var underGownImage;
var glovesImage;
var bootsImage;
var originalCapImageLocationX = 580;
var originalCapImageLocationY = 80;
var originalMaskImageLocationX = 720;
var originalMaskImageLocationY = 80;
var originalShieldImageLocationX = 650;
var originalShieldImageLocationY = 70;
var originalGownImageLocationX = 750;
var originalGownImageLocationY = 300;
var originalUnderGownImageLocationX = 600;
var originalUnderGownImageLocationY = 200;
var originalGlovesImageLocationX = 560;
var originalGlovesImageLocationY = 400;
var originalBootsImageLocationX = 620;
var originalBootsImageLocationY = 400;
var originalGuyImageLocationX = 150;
var originalGuyImageLocationY = 0;
$(document).ready(function () {
//Position the background and locker in the right positions
var backgroundImage = $("#backgroundImage");
backgroundImage.offset({ left:0, top:0});
var lockerImage = $("#lockerImage");
lockerImage.offset({left:$(document).width() - lockerImage.width(), top:0});
//Prevent the webview from scrolling
document.body.addEventListener("touchmove", function (event) {
event.preventDefault();
}, false);
//Get referneces of the images in html
guyImage = $("#guyImage");
capImage = document.getElementById("capImage");
maskImage = document.getElementById("maskImage");
shieldImage = document.getElementById("shieldImage");
gownImage = document.getElementById("gownImage");
glovesImage = document.getElementById("glovesImage");
bootsImage = document.getElementById("bootsImage");
underGownImage = document.getElementById("underGownImage");
//Add the drag event listeners to the images
capImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(capImage));
}
}, false);
maskImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(maskImage));
}
}, false);
shieldImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(shieldImage));
}
}, false);
gownImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(gownImage));
}
}, false);
underGownImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(underGownImage));
}
}, false);
glovesImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(glovesImage));
}
}, false);
bootsImage.addEventListener("touchmove", function (event) {
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
moveImageCenterTo(touch.pageX, touch.pageY, $(bootsImage));
}
}, false);
//Add the finger up events to the images
capImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(capImage));
var y = getCenterLocationY($(capImage));
if (isWithinGuysHead(x, y)) {
moveImageToLocation(getGuysHeadLeft() - 8, getGuysHeadTop(), $(capImage));
} else {
moveImageCenterTo(originalCapImageLocationX, originalCapImageLocationY, $(capImage));
}
}
}, false);
shieldImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(shieldImage));
var y = getCenterLocationY($(shieldImage));
if (isWithinGuysHead(x, y)) {
moveImageToLocation(getGuysHeadLeft() - 10, getGuysHeadTop() - 20 + (getGuysHeadBottom() / 2), $(shieldImage));
} else {
moveImageCenterTo(originalShieldImageLocationX, originalShieldImageLocationY, $(shieldImage));
}
}
}, false);
maskImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(maskImage));
var y = getCenterLocationY($(maskImage));
if (isWithinGuysHead(x, y)) {
moveImageToLocation(getGuysHeadLeft() - 5, getGuysHeadTop() - 5 + (getGuysHeadBottom() / 2), $(maskImage));
} else {
moveImageCenterTo(originalMaskImageLocationX, originalMaskImageLocationY, $(maskImage));
}
}
}, false);
gownImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(gownImage));
var y = getCenterLocationY($(gownImage));
if (isWithinGuysBody(x, y)) {
moveImageToLocation(getGuysXLocation() + 5, getGuysHeadBottom() - 8, $(gownImage));
} else {
moveImageCenterTo(originalGownImageLocationX, originalGownImageLocationY, $(gownImage));
}
}
}, false);
underGownImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(underGownImage));
var y = getCenterLocationY($(underGownImage));
if (isWithinGuysBody(x, y)) {
$(underGownImage).attr("src", "underGown.png");
moveImageToLocation(getGuysXLocation() + 25, getGuysHeadBottom() - 8, $(underGownImage));
} else {
$(underGownImage).attr("src","foldedUnderGown.png");
moveImageCenterTo(originalUnderGownImageLocationX, originalUnderGownImageLocationY, $(underGownImage));
}
}
}, false);
glovesImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(glovesImage));
var y = getCenterLocationY($(glovesImage));
if (isWithinAnyGuysHand(x, y)) {
$(glovesImage).attr("src","gloves.png");
moveImageToLocation(getGuysXLocation(), getGuysHandsTopEdge() - 28, $(glovesImage));
} else {
$(glovesImage).attr("src","foldedGloves.png");
moveImageCenterTo(originalGlovesImageLocationX, originalGlovesImageLocationY, $(glovesImage));
}
}
}, false);
bootsImage.addEventListener("touchend", function (event) {
if (event.changedTouches.length == 1) {
var x = getCenterLocationX($(bootsImage));
var y = getCenterLocationY($(bootsImage));
if (isWithinGuysFeet(x, y)) {
$(bootsImage).attr("src","boots.png");
moveImageToLocation(getGuysFeetLeftEdge() + 5, getGuysFeetTopEdge() - 5, $(bootsImage));
} else {
$(bootsImage).attr("src","foldedBoots.png");
moveImageCenterTo(originalBootsImageLocationX, originalBootsImageLocationY, $(bootsImage));
}
}
}, false);
//Move the images to their original locations
moveImageCenterTo(originalCapImageLocationX, originalCapImageLocationY, $(capImage));
moveImageCenterTo(originalMaskImageLocationX, originalMaskImageLocationY, $(maskImage));
moveImageCenterTo(originalShieldImageLocationX, originalShieldImageLocationY, $(shieldImage));
moveImageCenterTo(originalGownImageLocationX, originalGownImageLocationY, $(gownImage));
moveImageCenterTo(originalUnderGownImageLocationX, originalUnderGownImageLocationY, $(underGownImage));
moveImageCenterTo(originalGlovesImageLocationX, originalGlovesImageLocationY, $(glovesImage));
moveImageCenterTo(originalBootsImageLocationX, originalBootsImageLocationY, $(bootsImage));
moveImageToLocation(originalGuyImageLocationX, originalGuyImageLocationY, $(guyImage));
});
</script>
I just posted the relevant code. Thanks in advance :-)
So the problem ended up being in the css. By default the position for each item is "static", so all I did was change it to "absolute" so that when the src of the image changes and thus its width and height, it doesn't mess with the position of the other elements.