2

This question seems somewhat related to

but still not quite. Here's the thing: I'm writing a small gallery and at some point the user clicks on a thumbnail. The large version of the image shows as an inside of a full-screen . So far, so good. When the mouse hovers over that I show three images: close, left, right, intended to navigate through an album; when the mouse leaves the image or the navigation images, the three navigation images fade.

These three navigation images partially overlap with the main image, e.g. the close image is a circle in the upper left corner. And that's the tricky part.

The mouseleave triggers whenever the mouse moves from the main image off the side, or from the main image onto one of the three small overlapping images. The mouseenter triggers for each of the small overlapping images as expected.

However, this creates a funky blinking effect because on mouseleave of the main image I hide() the three small images, which immediately triggers a mouseenter for the main image because of the overlap and the mouse still being on top of the main image.

To avoid that, I tried to determine if, upon mouseleave of the main image, the mouse has moved onto one of the small overlapping images. For that, I used this code:

main_img.mouseleave(function() {
  if (!hoverButtons()) {
    doHideButtons();
  }
});

function hoverButtons() {
  return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover"));
}

This works great on Safari and Chrome, but not on FF and IE where the images still blink. Further noodling around posts, it seems that ":hover" is the problem here as it is not a proper selector expression but rather a CSS pseudo class?

I tried to work with switches that I flip on/off as I mouseenter/mouseleave the various images, but that doesn't work either because the events seem to trigger in different orders.

How do I go about this? Thanks!

EDIT: I might have to clarify: before the navigation buttons are shown, I set their respective left and top attributes in order to place them in dependence of the main image's position. That means I need to do some work before I can call .show() on a jQuery selector. I tried to add a new function .placeShow() but that didn't quite work with respect to selectors like $(".nav-button:hidden").placeShow().

Community
  • 1
  • 1
Jens
  • 8,423
  • 9
  • 58
  • 78
  • try to make a fiddle at http://jsfiddle.net – The System Restart May 18 '12 at 05:52
  • Try this one: [http://jsfiddle.net/WVeDs/](http://jsfiddle.net/WVeDs/) It works fine on Safari and Chrome, but hover on the small image in FireFox and it'll flicker like crazy. – Jens May 18 '12 at 06:45
  • This is not just a jQuery issue, it is a common sense issue and it is driving me nuts. You'd think there would be some way to distinguish between leaving the object as opposed to still being inside it, just with another object over it. I would very much appreciate a general solution to this problem. – puk Oct 12 '12 at 20:05

2 Answers2

2

You can try with this:

$("#main, #small").mouseenter(function() {
    $("#small:hidden").show();
}).mouseleave(function(e) {
    if(e.target.id != 'main' || e.target.id != 'small') {
      $('#small').hide();
    }
});

DEMO

The System Restart
  • 2,873
  • 19
  • 28
  • Thanks, the demo works on FF too. Let me adapt this to my code and see how it goes. One question though: is it faster to use a jQuery selector $("#main, #small") like above, or the direct reference as returned from var img = $("")? – Jens May 18 '12 at 14:22
  • @TheSysRestart: See my edit to the original question. Your approach works; however, instead of .show() I would first need to place the smaller image. – Jens May 18 '12 at 17:31
1

Here is what I ended up doing. There are four images I use in my slide show: the main image, and then left, right, close button images.

main_img = $("<img ... class='main-photo slide-show'/>");
close_img = $("<img ... class='nav-button slide-show'/>");
left_img = $("<img ... class='nav-button slide-show'/>");
right_img = $("<img ... class='nav-button slide-show'/>");

The classes here are essentially empty, but help me to select based on above answers. The main image then shows without navigation buttons, and I attach these event handler functions:

$(".slide-show").mouseenter(function() {
  $(".photo-nav:hidden").placeShow();
});
$(".slide-show").mouseleave(function() {
  $(".photo-nav").hide();
});

where the placeShow() moves the navigation buttons into their respective places. This function is defined as follows:

$.fn.placeShow = function() {
  var pos = main_img.position();
  var left = pos.left;
  var top = pos.top;
  var width = main_img.width();
  var height = main_img.height();

  close_img.css({ "left":"" + (left-15) + "px", "top":"" + (top-15) + "px" }).show();
  left_img.css({ "left":"" + (left+(width/2)-36) + "px" , "top": "" + (top+height-15) + "px" }).show();
  right_img.css({ "left":"" + (left+(width/2)+3) + "px", "top":"" + (top+height-15) + "px" }).show();
}

This worked so far on Safari, IE, FF, Chrome (well, the versions I've got here...)

Let me know what you think, if I can trim this code more, or if there are alternative solutions that would be more elegant/fast. The final result of all this is on my website now.

Jens

Jens
  • 8,423
  • 9
  • 58
  • 78
  • Dang. Works great on screens, but not at all on mobile devices where there's no real ":hover" or mouseenter/leave. Dang again. Now what? The Apple proposed approach of adding a onclick="void(0)" handler ([link](http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)) doesn't make a difference here either. And not sure I want to have the navigation buttons visible all the time. Conditional code on mobile devices? – Jens May 19 '12 at 16:38
  • That's what I ended up doing: if I detect the code runs on a mobile device then the buttons show all the time. Works just fine. – Jens Oct 09 '12 at 14:09