I am experimenting with an idea. I have a block of HTML text, including inline images. Some of the images will have (what I think are called) flyouts. That is, hover over the image to bring up a control panel to its left. In the future the control panel will toggle display mode, change image size, etc. For now, I just want it to appear. And to disappear when the mouse leaves either the image or the control panel.
jQuery UI has the handy "position" function which does almost exactly what I want.
When I use it on Safari 5.0.1, it works the first time but subsequent mouseovers cause the control panel to be increasingly shifted by what looks to be the same delta. It looks like position() applies an offset each time to the panel, when I expected it to go to a fixed/static position.
When I use it on Firefox 3.6.7 there's a 1 pixel gap between the image and the control panel. I want the img and the div to be perfectly aligned, which I thought was the point of position.
What do I need to do to make it go to the right position every time? And, is this technique called a "flyout", "flyover" or some other term?
Here is my code
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<style>
.flyover {
border: 1px solid green;
position: absolute;
display: none;
}
img {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="flyover">*</div>
<P>Here is an image
<img width=30 height=30 src="http://www.dalkescientific.com/writings/diary/alcohol_terse.png">
Mouse over to get the flyover.
</P>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script>
var is_shown = 0;
var check_for_close = function () {
if (!is_shown) {
$(".flyover").hide();
}
};
// Don't check right away because the mouse might have
// moved from the image to the flyover or vice versa
var check_exit = function () {
is_shown = 0;
setTimeout(check_for_close, 0.0);
};
$(document).ready(function () {
$("img").mouseenter(function() {
$(".flyover").position({my: "right top",
at: "left top",
of: $("img")});
$(".flyover").show();
is_shown = 1;
}).mouseleave(check_exit);
$(".flyover").mouseenter(function() {
is_shown = 1;
}).mouseleave(check_exit);
});
</script>
</body> </html>