I'm attempting to make a page that allows panning of a large image
inside a smaller div using the mouse. I used the draggable interaction
to achieve this effect. Here is a sample of the HTML:
<!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" >
<html>
<head>
<style>
#div1
{
border: solid 1px Black;
width: 635px;
height: 100%;
overflow:auto;
cursor:move;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#testImage').draggable({ revert: true, scroll:
true });
});
</script>
<div id="div1">
<img src="047692-0022-03-0000-100.jpg" name="testImage"
id="testImage">
</div>
</body>
</html>
You can substitute whatever image with a width larger than 635 pixels
that you have handy.
In IE8 this works wonderfully. However, in IE7 the image is not
clipped by the boundaries of the div. This appears to be related to
the jQuery UI code, because if I comment out the "ready" script the
image is clipped correctly.
You can see this in action in IE8 compatibility mode as well. Just
add:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
to the <head> section to see the problem. Then comment out the call to
init draggable to see the correct clipping.
Is there a workaround for this issue?
Thanks,
Bob Mc