Well, I hope not :-)

The default position for the popups is to the right and below the mouse pointer. I played around with the Javascript so that they will appear to the right and/or above the mouse - but only in the case that there is not enough space right and/or below. (That was not so easy, considering that I don\'t know the height...)

Anyway, probably you always have enough horizontal space to the right of your links?

Here is the CSS I am currently using for my popups:

#pup {
    position                : absolute;
    width                   : 375px;
    padding                 : 5px;
    margin                  : 25px auto auto 10px;
    font-size               : 11pt;
    color                   : #fff;
    background-image        : url(pics/bg-pup.png);
    font-family             : "courier new", tahoma, verdana, arial, sans-serif;
    font-weight             : bold;
    text-align              : left;
    border                  : 2px solid #333;
    z-index                 : 200; /* aaaalways on top*/
}

The transparent pic is here: http://www.nicolashoening.de/style/pics/bg-pup.png 

Can you email me the .js file that you used on your site navigation on the right side.  The problem i have is that there is no space to the right of where i want these popups to go, so i need them to come out to the left side of the mouse.  I guess I didn't understand from your explanation.

thanks again

ryan

No, you're right. Something is different on your site compared to mine and the edge overflow code doesn't really work. I looked at both on Firefox.  But the link to the .js file on this page actually links to the .js I am using, so that can't be it. That's awkward.

Maybe you can have a look at the nudge() function and find out what's so different. For instance, the code uses window.innerWidth (if you're on FF) to find out how much horizontal space it has ...

Hey, thanks alot for providing the code to this.  I have a question though!  If i have links at the bottom of my page and i have to scroll down to them, the hover popup eventually stops following my mouse and always pops up in a static position near the top of the page, and if i scroll far enough down it becomes out of sight.  There is a lot of room for it to pop up beside the mouse pointer though.

Do you know how to fix this?

Thanks, Jon

Im using the latest firefox browser.  I can actually show you what I mean using your own webpage. 

If you're on this current page: http://www.nicolashoening.de/?twocents&nr=8

If you hover over the links that you have on the right, the ones that start at 'Knols: identify and show controversial definitions' and end at 'Salsa', well from 'Knols' down to 'Mind mapping with polypager' it works great, the layover popup  always appears to the right and below the mouse, but from 'Nigeria' to 'Salsa', the popup layover stops appearing relative to the mouse and only appears in a fixed position. 

Does this happen to you as well or is something just messed up on my end?

Yes, I saw the issue and fixed it. The code to regulate overflowing has become a lot nicer now. So Jon - you might download the script again if you care.

Controlling the vertical overflow is not easy. For instance, I can't access margin and padding of the stylesheet. Be careful about those, don't use too high values.

Thanks alot man, works great, sure you already knew that though.

Hats off to you and Cheers

Do you have support for IE7?

I have some data in a table thats hoverable, and in IE7 the hover messes stuff up.  Stuff jumps and flickers.

Any words of wisdom?

Hi Jon, I have added some support for IE7 considering edge overflow. Thanks for the report!

Anyway, I can\'t reproduce "jumping and flickering" behavior by hovering over tables. What exactly is your setup? Maybe you have example code somewhere...

Otherwise, I will upload the IE7-edge-overflow-enhanced script tomorrow.

Hey, have you put the updated script up yet?  I dont have IE7 myself but someone told me the bug was happening to them.

Go to brunobooks.com/index.php, select a department and course then click Go.  Click on "Add all used books to cart", then hover over the elements in the "comments" column of the table.  This should reproduce it.

Thanks,

Jon

No, sorry. I try to fix this in between doing other stuff and I still have some errors. I *hate* JavaScript development with IE...

Thanks for the bug description. I'll keep you updated.

I updated the script. This adds full support for IE7 (mostly concerned edge overflow) and fixes some glitches for Opera and IE6.

@Jon: Your flickering issue is a styling/CSS problem. This script just switches the popup on and off... However, I investigated a little and made that issue disappear in IE7 by removing the line: "min-width:120px" from the selector: "#contentinternal".

Well, it works for me (I have Safari 3.1.1).

Try this page: Do the popups work in your Safari? If yes, you have a different problem. If not, then I have a problem.

Gee, I don't know Safari history so well. So you're saying that the popups on this very page do not work?

Well, I'd sure love to support as many browsers as possible, but first I would need to have a Safari 1 to test this on. Requires some googling, I guess....

Do you happen to know if there are a lot people besides you who still use Safari 1?

@Shant: Interesting. I never tried to put it in a dropdown menu. There must be some interference that I can't understand right now. If you want to send me your code in an email (see my resume for the address), I might find something.

@Ray: When this popup displays, the servers work is done. This is just HTML and Javascript. While Javascript is only working on the client, I suggest you put the images already in the HTML when you build it on the server. I got a similar question some coments above. here is my answer to that: http://www.nicolashoening.de/?twocents&nr=8#comment172

Cheers!

Hello. Thanks for the answer. Will the pictures load with the website or in the moment when you hover with the mouse? Thanks

I think the latter.

Hi Shant,

I can confirm your problem after you sent me the code.
It works for me as soon as I give it the styling I suggested in step 4
- especially the "position:absolute;" value is important so that the
popup window doesn't mess with the layout.

Hi there,

I came across this piece of code and it's amazing!

I'm trying to use it in a calendar though, so when you hover over an entry it pops up with the appointment details.

When i'm trying to format the content of the popup with a table <table></table> i'm getting the popup appearing in different positions, depending on where abouts on the screen the anchor is...

Can you suggest a better way for me to format contact details, etc, inside the popup?

Cheers,

Steve

Hey Steve,
have you tried <div> and <span>? I'd use a div replacing the table and one for each row, spans for the cells. Might do the trick.

Hi,

Just a little fix to this terrific code.

I was getting my tooltips jumping all over the place, when the font size was smaller than the script expected. i.e. the nudge code which approximates the height of the box gives back an incorrect value.

My tip is to change teh code to use "offsetHeight" for the pup element. e.g.

Comment out:

 /*
  est_lines = parseInt(document.getElementById("pup").innerHTML.length / (parseInt(skin.width)/15) );
  est_lines_to_decide = max(est_lines,2);
  if((y + parseInt(est_lines_to_decide * 20)) > (dims[1] + scroll_x_y[1])) {
    y -= parseInt(est_lines * 20) + 20;
 */

and replace with :

var heightOfBox = document.getElementById("pup").offsetHeight;
   if( (y + heightOfBox) > (dims[1] + scroll_x_y[1])) {
      y -= heightOfBox ;
   }

p.s. You comments page doesn't work with Firefox 3

:-0

Hi Robert,

Is offsetHeight supported by all browsers? I couldn't find information on that by googling 5 minutes... It would be a better solution, of course. Thanks for sharing.

I am also experiencing hickups in commenting. Will investigate, but actually I did the last comment with FF 3.0.10, so the problem is sthg else...

I have three words in my online resume that I would love to learn how to make the hyperlink pop up ans show the picture wiht our taking them to the next page.. like a preview button.. how do I do this?

Hi, I have applied your script to an image. Its fine on Mac Safari and on PC Firefox, but PC IE6 & IE7 the image does not display and no popup! any ideas? 

No, sorry. Sounds just like a CSS problem on IEs. Remember that my script will only play with the position, size and display property of the box.

 To save time for those dummies like me that could not get this work for an hour despite going over instructions again and again and again, the browser_detect.js script MUST be called up before the popup.js script <sigh>.

Great work Nic, thanks. Jen

Sorry for that broken last post. I have successfully implemented it with your custom background, and it looks great! Thank you so much for this.

Thank you for this, it was very useful... but i'm a noob at this stuff so I had trobel using it (I did get to work, finaly)... so, Thank You so much for the script and and (somewhat) easy 5 part tort.

 I tried all the steps and it just doesn't seem to want to work on my homepage. Can you help?

Thanks,

Bill P.

Not really, Bill, sorry. I know nothing about your website.

Very nice.  Just one problem:

When I try to display this:

Transcription key: <table>  <tr><td><span class=erasure>xx</span></td><td>Erased text</td></tr> <tr><td><span class=erasure>[..]</span></td></td><td>Erased unreadable text</td></tr> <tr><td><font color=green><sup>&#x005c;&#x005c;xx/</sup></font></td><td>Interlinear insertion</td></tr><tr><td><span class=erasure>[xx]</span><font color=green>yy</font></td><td>Erased text replaced</td></tr><tr><td><span class=plus><sup>&#x2190;&#x005c;&#x005c;xx/</sup></span></td><td>Text written in right margin</td></tr></table>'
It works fine.
But if I try to add one more row to the table, like so:
Transcription key: <table>  <tr><td><span class=erasure>xx</span></td><td>Erased text</td></tr> <tr><td><span class=erasure>[..]</span></td></td><td>Erased unreadable text</td></tr> <tr><td><font color=green><sup>&#x005c;&#x005c;xx/</sup></font></td><td>Interlinear insertion</td></tr><tr><td><span class=erasure>[xx]</span><font color=green>yy</font></td><td>Erased text replaced</td></tr><tr><td><span class=erasure>[xx]</span><font color=green>yy</font></td><td>Erased text replaced</td></tr><tr><td><span class=plus><sup>&#x2190;&#x005c;&#x005c;xx/</sup></span></td><td>Text written in right margin</td></tr></table> It does not work!!! help...

Hi Peter

Your table is wider than 250px with that row. Specify more than that for #pup in the CSS and it works.

Cheers,

-Nic

Yes, it does work when you widen the pup.  But a few problems..

1. Can you have different pups with different widths? sometimes you just want a real narrow one; nuisance to have to have to make it wide to meet the few cases where you need it

2. When you expand the font, the pup disappears.  This is a real pain.  I have tried using floating divs instead of tables; same problem.

It would be nice to have a solution for this!

@Peter

1. well, you can, if you reprogram the javascript a little (which wouldn't be too much work), but not like it is.

2. Like the problem I helped you with (you're welcome by the way), this is a CSS problem. Font resizing works for me. Anyway, the CSS I gave here is just a suggestion, what I actually provide is the javascript.

Yes, I see it is working in your example.  Obviously, it is a matter of getting the css right -- but there seem to be complex interactions between the js and css which makes it hard.  When I use a simple string, as in your example, no problems. But introducing tables or divs clearly does create problems.  maybe a few examples of more complex html in the popups would help.

The only style things touched by the script are position (top, left) and if it is shown (display, visibility).

I think the reason that (the very few) people who want to have something inside the popup beyond text (for which they want to have their own layout) is that the popup is maybe positioned out of view.

As I have explained on this page already, the hard part is the estimation how big the popup will be rendered (as the width is fixed, the height is still open). I need this to position the popup, so that the user sees everything (if it would be too low, the script raises it). The script counts characters and estimates the height.

When you put a lot HTML in there, the counting goes wrong of course. However, counting only the chars (and not the HTML) is of no use. If people want to layout the popup themselves and maybe put pictures in there, there is now way the script can guess the height.

There is no perfect solution if you want to do those fancy things (as a hover-over popup  is by default not scrollable). The best I can think of is that if the height is given via CSS, the script doesn't estimate it. The only disadvantage is then of course that you need to define both width and height.

That solution would also be reasonable in amount of work for me to put in, because this is not my day job.

Thank you a lot for the provided code, Nic!

But I have a problem with it on my site: when there is a flash object located on the right side of a link, the popup box drops below the layer of the flash object and is hidden.

The z-index in css isnt changed, and on highest level.

This problem occurs in IE, Opera and FF, except FF 3.6 (popup ontop only with a defined background color, a png as background lets the popup drop behind the flash object again)

Is there any way to fix this problem?

Any changes to the js file to display the popup box on the left side would help too.

Thanks

R.

I've got it fixed, by adding

position: relative; z-index: 0

to the css of the flash containing div, and

<param name="wmode" value="transparent" />

to the flash object tag.

R.

Congrats, R. Very helpful tips, indeed :) (I didn't know that)

I love you.

Sorry for the triple post, but I noticed that if you click out of the comment box in FF 3.6, it posts with nothing in it (as you saw in my first post)

 This is nice.. definitively bookmarking it but I've been working hard on titles already. Some say it's good for SEO so with this one displaying blank titles and generating the boxes through Javascript I'm a little worried that the search engines won't pick up the titles.

If anyone can convince me otherwise I'd be glad to hear it.

This is perfect! Thanks you very much, i find to any time this.

Thanks you wonderful working any browsers. Perfect sharing!