Contact Lifestream



Nice Titles and CSS Switching

Actually at the moment, only “Nice Titles” has been implemented. Originally I came across the code here but later found an updated version here. What the snippet of javascript does is pretty obvious if you look around.
While simple to implement, there were a couple of quirks that I had to overcome. First of all, the code didn’t recognize all the title= attributes of all the html elements that I wanted. Just using <img alt= .. > and <a title= .. > weren’t enough for me and the other predefined tags like <acronym> and <abbr> were pretty useless. Especially since <abbr> doesn’t even work in IE.
So I created a new definition in the code for the <span> and <td> tags. That solves most of the immediate problems, like the Mp3Box for example.
Another thing that I did was to roll back the code concerning opacity. I’ve had no problems with it in either Firefox or IE under WinXP so for the majority of users it should be just fine. This is it basically:

filter:alpha(opacity=85);
-moz-opacity:0.85;
-moz-border-radius: 12px;

One thing that I haven’t been able to solve just yet is the linebreaks that I use for the <img alt= ..> tags in the Gallery SSI code. First of all the “Nice Title” scews it up and second of all it never worked in Mozilla browsers anyway. The way IE does this is by adding &#10 which constitutes a linefeed. Ahh, this is driving me crazy.
Also, the older code snippet was better in one aspect since the title popups were locked at a certain width. <Edit> Stupid me, the setting, although erratic was of course also in the CSS, duh. Must have been too sleepy. So what I did was to remove the width=auto setting and replaced it with a max-width=300px. This for some reason does not work on IE, only Mozilla. Well, sorry, I’m tired of browser quirks today, so IE will have to take one for the team. Unless this modified version which looks very flashy and flexible.

As for the CSS switching I hope it wont cause any problems with the site. The first time I ran the code the entire CSS system collapsed. But it hasn’t happened since so I’m hoping it was just a fluke like the .js file refusing to load or something.

8 Responses to “Nice Titles and CSS Switching”


  1. Ephraim F. Moya
    21:02 on March 5th, 2004

    Nice Idea.

    I tested your front page in four modern browsers. I thought you’d be interested in my findings. My computer is a 3 GHz Pentium 4 with XPPro.

    IE6.0:

    The pop-up titles work.

    The <title> tag does NOT work.

    The pop-up in the calendar works.

    Moz1.6, Firefox:

    The pop-up titles do NOT work.

    The <title> tag does NOT work.

    The pop-up in the calendar works.

    Opera7.23:

    The pop-up titles work.

    The <title> tag works.

    The pop-up in the calendar works.

    Note that in Opera the pop-up title is overlaid by the <title> itself. In Mozilla and Firefox the calendar pop-up is out of place.

    I like this stuff. Maybe I’ll put it on some of my pages.

    Regards,

    EFM

  2. Björn Hallberg
    08:18 on March 6th, 2004

    Thanks for pointing that out. Some of the things I am already familiar with:

    OPERA: Extra overlay.

    FIREFOX: Calendar Overlib popup is way off.

    I am not so sure what you mean by the title-property not working in IE and FIREFOX though. The title tag shouldn’t work if the popups are functioning.

    As for FIREFOX I changed the second CSS file a bit to see if it helps. I have had no problems here but I remember reading that the “-moz-opacity:0.85; -moz-border-radius: 12px;” caused FIREFOX to fail in some instances (http://neo.dzygn.com/code/n...).

    I’ll look into it.

    The main drawback as I see it is that the “nice titles” produce a tremendous CPU usage spike when activated. Not that it matters to modern PCs but some people might object.

  3. Mark Wubben
    11:47 on March 12th, 2004

    Hi,

    for some strange reason I decided to look for inbound links to my NiceTitle code with Technorati’s Link Cosmos.. and then I found this page :)

    While developing my version of NiceTitles I tried to make it work about the same as the older version. Therefore I decided not to include the title attribute for all tags. You found out how to do it, so I didn’t make it too hard, did I?

    Line breaks in alt tags.. hmm. You could write a JS function which replaces your newline indicator by a break tag. The NiceTitle text is included as HTML in the popup, so that’ll work.

    CPU usage, there are some processes started to find the exact position of the popup, other than that it’s pretty straightforward coding I think. One downside of the code I see now is the use of closures (variables existing in several function bodies), when I have time I might write a newer version without closures, that might as well solve the CPU problem (though it should be more memory related).

    As for that other version you linked to, I would advise against it because, well, I don’t like how it’s coded. Of course that’s my personal opinion.

    Good luck with the site,

    - Mark Wubben

  4. Björn Hallberg
    14:15 on March 13th, 2004

    Hey Mark,

    Well, no, it wasn’t that hard actually. I found it to be pretty much self-explanatory. And it’s a good way to let the user choose which tags to read and what to read from those tags.

    I’ll see if I can do a function to replace line breaks like you suggested. I guess I can, but I only have that problem with one section of the site and that is the Coppermine Gallery.

    Still, it would be nice and an even greater justification for people to use Nice Titles … since it would provide a hack for Opera and Mozilla and their inability to show line breaks in the first place.

    As for the other versions I’m not so crazy about them either. The functionality is limited for one.

    The only thing that is really bugging me is text wrapping in IE. Now the popups seem to grow until they hit the screen edge. And also, maybe really long URLs need to be cut as well?

    Looking forward to your next version ;)

    Cheers!

  5. Björn Hallberg
    14:28 on March 13th, 2004

    Oh yeah, btw, I set the width by CSS to be:

    width:expression(300 + &quot;px&quot;);

    width: auto;

    Really too bad IE doesn’t parse the max-width setting …

  6. Mark Wubben
    16:48 on March 13th, 2004

    There already is a line-wrapping option, however it seems you have set it to 160 characters instead of the 80 I set it too ;-)

    I’ll keep the line break thing in mind for a new version.

    - Mark

  7. Björn Hallberg
    20:01 on March 13th, 2004

    Ooops .. hehe. That helps a bit. I set it to 160 because obviously I wanted to display more text .. and that wasn’t a problem in Firefox since it understands max-width.

    I still can’t get the text to actually wrap in IE like it does in Firefox though. Unless I force the nicetitle to be a certain width of course. The script just adds “…” to the end of long strings .. instead of for example .. line break ;-) But after playing around with the other versions I realize they don’t handle this either. I.e. the popup box is set to a static value at best. Not dynamic at all. The best way would be if the script could have something similar to width:auto up to say 300 px and then start to wrap the text.

    Maybe you could take the string and, based on a set value, hack it into x number of even pieces. I hope this isn’t already in there and I for some reason screwed up the code ;) Like those people who call tech support and just forgot to plug in the power cord ;)

    Haha. I suppose I’m kind of stuck on line breaks today btw. And kind of picky ;)

    I guess it all depends on how you use the script. Most people probably don’t try to paste half an essay into the title of an element.

    Anyhow, I’m gonna switch back to your original version. The “mouse following” option introduced by one of your visitors is a CPU killer. Especially if you hover over an image and especially an alpha blended image in IE .. like my PNG logo. If you could smarten up the mouse following code, great, but I’m kind of expecting it to be a CPU hog anyway ;)

  8. Mark Wubben
    18:23 on March 14th, 2004

    The line break was actually added for extreme long URI’s, because I didn’t expect people to add essays in the title attribute ;-) . Splitting it up is a nice idea, though.

    It seems there are some things now which would valid yet another new version, however I’m just too busy doing some other coding at this moment and I’m busy with school (pretty strange how you can be busy wasting your time).

    I’ll have a look at NiceTitles when I have more time, so be patient :)

Comments are currently closed.


OpenDNS

Use OpenDNS

Worthy Causes