Post #58

You are currently only viewing posts within the category: Site news
You are here: Home → Archive → Site news → 2003 → November → 21st → this post

Nice Titles revised

21st November 2003, late afternoon | Comments (31)

Code information
Status
Code usage No longer in use on this blog
Updates Available
Demo Available
Downloads Available

You may have noticed I’m using Stuart Langridge’s Nice Title script on this site. With the help of Ethan I’ve made a couple of modifications to the original version, so I thought I’d highlight them here and let you grab a copy if you wanted.

The pause

A common complaint when Stuart’s script was originally launched was the lack of delay present between mousing over a link and having the pop-up appear. (Browsers tend to have a pause before showing their pop-ups, letting you waft your mouse over groups of links without multiple boxes flickering madly on screen.)

Ethan put his Magic Brain™ to work and solved this problem with a neat little timer function. So now we have a customisable delay between mousing over a link (or tabbing focus to it), and having the pop-up appear. It’s currently set to 0.6 seconds on this site, which seems to be the same as the browser’s own delay. Please Let me know if that’s too much, or not enough.

Access keys

Screen shot of the modified Nice Titles in action

Access keys are a handy way to access web site links via the keyboard. Some of the links on this site have access keys associated with them (specifically the main navigation links) and I wanted to be able to show this information in the pop-ups. In the image that accompanies this post you should be able to see that the access key (the letter ‘c’ in this case) is displayed in the pop-up. (It’s also shown beside the menu item itself, but that’s down to some CSS in my main style sheet.)

img, ins and del

This version of the code also works for images that are linked, sections that have been inserted and marked with the ins tag, and sections that have been deleted and marked with the del tag. I must admit to simply bringing a couple of different versions of the code together for that, mainly from the work of Peter Janes.

Anyway, that’s the lot. Thanks again to Stuart (for starting it), and to Peter and Ethan (for doing the bits I couldn’t). Feel free to grab the code here and improve on anything we’ve done.

Update: After comments from Jeremy I discovered that something about my CSS (the weather header) causes IE to offset the pop-up display by 175px. Rather than spend forever messing about, I’ve just blocked IE from running this script. It will run happily on other sites, just not on mine.

Jump up to the start of the post ↑

Comments (31)

Jump down to the comment form ↓

  1. Dunstan:

    If anyone's wondering, I removed the transparent PNG from the CSS and replaced it with a solid background colour. I then applied Moz-only opacity to it.

    Why? Well, the image was taking too long to load for my liking, leaving users with an un-usable popup for a few seconds.

    I prefer that everyone gets usable, and a few get fancy.

    Posted 10 minutes after the fact
  2. Jeremy C. Wright:

    Hey,

    I'm not sure if I'll use this on my site or not, however there are some bugs to this it seems.

    I'm on XP Pro (patched) running IE6 (patched) and get some buggy behaviour for links in the body of comments: the popup appears at or near the bottom of the screen...

    Actually, trying it out it seems like a pixel-offset, though I'm too lazy to open PhotoShop and see how many pixels it is.

    Good luck fixing the bug.

    J

    Posted 10 minutes after the fact
    Inspired: ↓ Dunstan, ↓ Dunstan
  3. Dunstan:

    Hey, that's odd - you're right J, it does it to me as well on IE6 - but it works fine on my off-line test pages :o/

    There must be something odd in my site making it freak out. (It's fine in Moz.)

    Posted 15 minutes after the fact
    Inspired by: ↑ Jeremy C. Wright
    Inspired: ↓ Dunstan
  4. Dunstan:

    Yes, it turns out IE is offsetting the popups by the height of my weather header. It only happens in the main body of the page, not on the navigation menu.

    It only seems to do this on my site, which is helpful :o)

    I think I'll block IE from running the script here, but leave the downloadable version unchanged.

    Why don't I ever spot these things during testing?...

    Posted 46 minutes after the fact
    Inspired by: ↑ Jeremy C. Wright, ↑ Dunstan
    Inspired: ↓ Dunstan
  5. Dunstan:

    IE6 duly blocked... shame, but there we are.

    Posted 1 hour, 22 minutes after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Matt
  6. Matt:

    I love the new "screw IE" mentality amoung web developers on independent sites. It's a natural backlash to the way we must bow down to it in professional work.

    Posted 1 hour, 56 minutes after the fact
    Inspired by: ↑ Dunstan
  7. Matt:

    Oh, another reason why this is useful is Moz seems to trunucate long titles and end them with a "..." where IE will just display everything in the title. This is espescially annoying on link blogs (such as Anil Dash's) where the commentary in the link titles is some of the best stuff but to see it all I have to view source, at which point nothing is clickable anymore so I have to bounce between windows if I feel the link is worth following.

    Posted 2 hours after the fact
  8. Stefan:

    This is a very nice approach to style the normal pop-up (although pop-up isn't the right word for it, I like hove-over more) of links.

    But there is one problem: the pop-up is positioned relatively to the link itself, as opposed to the mouse position what would seem more logical.

    But there is a real problem too: when the same link resides on two lines (like the 'let me know' link in your post) the pop-up is located at the right side of the link. Thus giving some strange results when hovering over the word 'know'.

    Posted 3 hours, 36 minutes after the fact
  9. Stuart:

    I have been entirely lax in not thanking you chaps for hacking on nicetitles to make it better, I must admit. Sorry; tied up frantically at the moment, if you'll excuse the phrasing. Excellent work, I say. I vacillate myself between a PNG background and an opacity setting; the opacity method allows rounded corners on the titles, but you can't (easily) set the opacity of the background but not the text thereupon. These things are sent to try us, I suppose. :-)

    Posted 6 hours, 34 minutes after the fact
    Inspired: ↓ Dunstan
  10. Dunstan:

    Hey Stuart - not a problem, it's great to have the script to start with, I'd never be able to write it from scratch :o)

    The opacity thing isn't hard though - just set one opacity for the div, and then another for the text - that's all, only two lines of css. E.g.:

    div.nicetitle {-moz-opacity: .87;}
    div.nicetitle p {-moz-opacity: 1;}

    Posted 6 hours, 43 minutes after the fact
    Inspired by: ↑ Stuart
    Inspired: ↓ Stuart
  11. Stuart:

    Do you know, if I had half a brain, I'd be dangerous. Naturally I was just about to think of styling the paragraphs *inside* the div, but, er, er, I was getting a cup of tea, yeah, that sounds plausible... :-)

    Posted 6 hours, 49 minutes after the fact
    Inspired by: ↑ Dunstan
  12. Michael Heilemann:

    I am having problems with nicetitles and image links (you can try out the images on the sidebar of my blog [1]). I don't know if this is a general problem or something I'm missing, but if anyone has a suggestion or two I'd be more than willing to try it out :)

    [1] http://binarybonsai.com

    Posted 17 hours, 29 minutes after the fact
    Inspired: ↓ Dunstan, ↓ Dreado
  13. Robert Castelo:

    Good work!

    You also seem to have fixed the problem with Mac OS X Safary - befor it poped up a JavaScript Alert each time I went over a link - which somewhat degraded usability ;-)

    Posted 1 day, 7 hours after the fact
  14. Marten:

    Great script. I was wondering, wouldn't it be handy to do this on the acronym tag as well?

    Posted 1 week, 4 days after the fact
    Inspired: ↓ Marten
  15. Dunstan:

    Michael, (I think you're moving house or something right now) I too had image-link problems with the old version, but I think I fixed it in my version - did you try that yet?

    I think I had to add in some extra code - anyway, it works on this site, lemmie know it my version falls over at your place.

    Posted 1 week, 6 days after the fact
    Inspired by: ↑ Michael Heilemann
    Inspired: ↓ Dreado
  16. Marten:

    Just send dunstan the update I did myself. It now supports all tags (still user-selected, but extendible by editing an array). Hope he posts it, I don't have a blog to host it.

    Posted 2 weeks, 1 day after the fact
    Inspired by: ↑ Marten
    Inspired: ↓ Randy Walker
  17. Greg:

    This is good stuff. I remember seeing a few months ago an implementation of NiceTitles that displayed the title text in a box something like cartoons use to show dialog - a "bubble" box with an arrow pointing to the link. I've searched and can't find the site that used it.

    Has anyone seen this, and if so could you point me to it?

    Posted 1 month, 1 week after the fact
    Inspired: ↓ Dunstan
  18. Dunstan:

    Sorry Greg, never seen that before. I'll be posting about a new version of Nice Titles that another chap has produced some time today, or tomorrow, so hang around to see that.

    Posted 1 month, 1 week after the fact
    Inspired by: ↑ Greg
  19. Randy Walker:

    Where can I get a copy of this? I was fiddling with trying to get nicetitles for <acronym>, but javascript isn't a strong point of mine.

    Posted 1 month, 2 weeks after the fact
    Inspired by: ↑ Marten
    Inspired: ↓ Dunstan
  20. Dunstan:

    Randy, I blogged about a new version of this script [1] that a chap called Mark Warren has produced.

    Go to his site to get the new version [2].

    [1] http://www.1976design.com/blog/archive/2004/01/04/nicer-titles/
    [2] http://neo.dzygn.com/archives/individual/34

    Posted 1 month, 2 weeks after the fact
    Inspired by: ↑ Randy Walker
  21. Debbera:

    I like the way you set up that your info is the homepage, nicely done. Thanks! Many greetings

    Posted 2 months, 1 week after the fact
  22. Bjoern:

    Exactly what I've been looking for, thx!

    Posted 1 year, 3 months after the fact
  23. Jan Meeus:

    I love these nice titles, except I would like to have it to a particular link, not all the links on the page:
    I mean, is it possible that only links with a certain class
    (E.g. <a class="nice" title="blabla">Lalala</a>) have the 'nice titles' ?

    If yes, what do I have to change in the script?

    Many thanks in advance.

    Posted 1 year, 3 months after the fact
  24. Jan Meeus:

    Nevermind, a colleague already fixed it as I am not a coding type of guy :]

    If anyone is interested;

    replace
    if (lnk.title){}

    with
    if (lnk.title && lnk.className=="nicetitle") {}

    Posted 1 year, 3 months after the fact
  25. David Russell:

    The CSS for NiceTitles does not validate as W3C Standard. Mainly because the validator doesn't like the mozilla-specific stuff.

    Posted 1 year, 6 months after the fact
  26. Dreado:

    I've downloaded this script (I assume the latest version) and I am having trouble with it and image links in IE, the Nice Title will appear in the first spot you hover over, but then disappear as soon as you move the mouse, making it it pretty much unusable. Is there a fix for this?

    Posted 1 year, 6 months after the fact
    Inspired by: ↑ Michael Heilemann, ↑ Dunstan
  27. Eli Cochran:

    Well, after nicetitles working, well, nicely for quite some time, I am experiencing a rather nasty bug with Firefox 1.5. If I have two elements with title attributes right next to each other, when mousing from one to the other I get double text in the tooltip.
    Anyone seen this?
    Anyone have a fix?

    Posted 2 years after the fact
  28. Egot:

    When you use a rollover with dreamweaver mx, nice titles don't appear.
    The only way to solve this pb is to delete the "on load" attribute.

    Posted 2 years after the fact
  29. Curtis Gale Weeks:

    Gee, commenting 2 years after the fact...

    Just to say that I'm experiencing the same problem Eli's experiencing with Firefox 1.5. Since I'm no coding expert, I can't isolate why this is happening. It seems to be a bit random, sometimes doubling the text, sometimes only displaying an empty box without text, sometimes working the way it has worked (well) for months...

    Posted 2 years after the fact
  30. Curtis Gale Weeks:

    I have a work-around to the Firefox 1.5 problem. It's a CSS trick actually, utilizing the first-child pseudo-element to hide the duplicated title/address.

    In the Nice Title CSS, add these two lines at the end of the file:

    ---------------

    div.nicetitle > p {display:none;}

    div.nicetitle > p:first-child {display:block;}

    ---------------

    IE doesn't recognize this format, so nothing will be changed for IE users. Essentially, the first line hides all the tooltip paragraphs in Firefox, and the second line then displays the first paragraph only -- which means the link title. The duplicated titles/addresses won't be displayed. Since I use the pop-up titles quite extensively on my site, this works out pretty well; but for Firefox users, the link address, since it's the second paragraph of the tooltip, will not be shown, only the link title.

    Posted 2 years after the fact
  31. Charlie C:

    Here is a Greasemonkey script that adds support for multiline tooltips/titles in Firefox:

    http://userscripts.org/scripts/show/2619

    It works in Firefox 1.5+ too.

    Posted 2 years, 1 month after the fact

Jump up to the start of the post ↑

Add your comment

I'm sorry, but comments can no longer be posted to this blog.