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
v开发者_JAVA技巧ar 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>
I found a jquery forum thread which suggests that this is a "bug in jQuery core that has already been fixed, but not released". I have a workaround for the Safari problem, which is to use nmyvision's comment and reset the position each time before calling position, as in
$(...).css({left:0,top:0}).position({ ... });
I'm still off by a pixel in Firefox but I'll work around that some other way.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论