permaculture playing cards*
The moose likes HTML, CSS and JavaScript and the fly likes JQuery flickering popup window on hover Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "JQuery flickering popup window on hover" Watch "JQuery flickering popup window on hover" New topic
Author

JQuery flickering popup window on hover

Greg Charles
Sheriff

Joined: Oct 01, 2001
Posts: 2771
    
  10

I have an HTML table, one column of which contains multiple lines of text on each row. I'm trying to display only the first line of the text in each row in the table, but when the user mouses over the cell, I pop up a window showing the full text. I'm doing this by populating a hidden div with the text, calling the jQuery show() method, and then calling hide() when the user mouses out of the cell. The problem is if part of the window pops up under the mouse pointer, then this is interpreted as leaving the cell, which closes the window. Then the mouse is back in the cell, so window is re-shown. The result is a flickering popup window ... on, off, on, off, etc.

The advice I've seen for this issue is to make sure the window doesn't pop up under the mouse pointer, but that's not always practical, depending on where the cell is and how big the popup window needs to be. I get the same problem whether I use mouseover and mouseout, mouseenter and mouseleave, or hover. It seems like this would be a common problem. Has anyone solved it?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60050
    
  65

Dismiss the flyout (I hate the word "popup" as too ambiguous) when the mouse leaves the flyout rather than the cell.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Greg Charles
Sheriff

Joined: Oct 01, 2001
Posts: 2771
    
  10

Thanks for the update in terminology. Half the challenge in Googling for information is just figuring out what things are called.

For this advice, I'd have to guarantee that the flyout does appear under the mouse pointer, yes? Now that I think about it, that's probably an easier problem than guaranteeing it doesn't. Ideally though, I'd like it to look like SQL Developer (unfortunately the best example I can think of at the moment), where as you move from cell to cell, the flyout content and position changes ... even if the two cells are both underneath the old flyout. I'm guessing that might involve working out boundaries myself and defining mousemovement handlers. Does that sound right?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60050
    
  65

Without playing around with it, I'm thinking some structuring might help. When you create the flyout div are you creating it as a child of the cell? I'm wondering if it would still consider the cursor leaving the parent cell if the flyout is a child of the cell. (Using mouseenter and mouseleave events).

This, by the way, has nothing to do with jQuery per se, but with how the browsers handle events.
Greg Charles
Sheriff

Joined: Oct 01, 2001
Posts: 2771
    
  10

Hmm, no I'm not. I have a div completely separate from the table and I fill it in as needed. Turning a div inside the cell into a flyout didn't even occur to me, but it might make the event handling easier at that. It also seems a bit cleaner to me. At the moment, I'm doing good with mouse movements. I save the top, left, bottom, and right of the td as I enter it, then bind a mousemove to ... well, I wanted to use body, but I didn't seem to get any events from that ... so, to a top level div that contains both the table and my flyout div. When I move outside the the td's boundaries, I hide the flyout and unbind the mousemove.

I'm finding it a bit tricky to position the flyout so it doesn't go outside the browser window. I'm letting the height and width vary by content, but those don't seem to be calculated until the flyout is shown. I don't really want to show it first and then position it, but is that the best option?

Bear Bibeault wrote:
This, by the way, has nothing to do with jQuery per se, but with how the browsers handle events.


Yeah, I'm really a server-side app guy, so many of the finer points of browser user interfaces are still a bit murky to me. I'm having fun though!
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15286
    
    6

There are tons of jquery plugins that already do what you want. I'd take a look at some of those. One of my favorites has always been qTip


GenRocket - A Test Data Generation Platform
Greg Charles
Sheriff

Joined: Oct 01, 2001
Posts: 2771
    
  10

I take it back about height and width not being available before show(). I'm not sure what I was doing wrong before, but they're there now.

Gregg Bolinger wrote:There are tons of jquery plugins that already do what you want. I'd take a look at some of those. One of my favorites has always been qTip


Good advice! My old manager used to say, "Good developers write good code, but great developers steal good code." I did play with the Tooltip plugin for awhile, and it couldn't do what I wanted. I just clicked through the qTip demos and I don't think it can either. I'll play around with it more tomorrow though. On the other hand, I'm very close to get it working on my own. Just some more tweaks to the positioning logic and I should have it. I might have to settle for "good" this time.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60050
    
  65

Gregg Bolinger wrote:There are tons of jquery plugins that already do what you want. I'd take a look at some of those. One of my favorites has always been qTip

It's actually rather rare that there isn't already a jQuery plugin to do just about anything. You need to be careful though -- some are better than others (which is a nice way of saying that some can suck).
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: JQuery flickering popup window on hover
 
Similar Threads
Javascript child window
Pass Info to a popup window
Question on MouseOver
PopupMenu & popupwindow
Dynamic Table rows/cells etc..