Enhance your Sweet Titles
Now although I’ve promised myself I wouldn’t be releasing anymore updates to the Sweet Titles
package, but I thought I’d post one little trick for those wanting personalize them for your own website. Of course there are endless hacks you can do to the script to make it your own (which is what this is all about!), so here is one of mine.
Clip internal URL’s
One thing I’ll definitely be adding to this site within due time is this little modification which will trim your host name from the ‘href’ inside the toolTip. This is extreamly helpful for internal links - those links that point to other parts of your own website.
First things first, locate this line within the tipShow() method
tipShow() method of the sweetTitles Object
if ( anch.nodeName.toLowerCase() == 'a' ) {
... code here
} // end of if statementAnd now what we’re going to do is replace the entire block with the following piece of code:
Replacement code for Sweet Titles
if ( anch.nodeName.toLowerCase() == 'a' ) {
var host = location.hostname.toString();
var pattern = new RegExp("(http://?)"+host,"gi");
var fullPath = anch.href.toString();
var path = fullPath.replace(pattern,'');
addy = (path.length > 25 ? path.toString().substring(0,25)+"..." : path);
var access = ( anch.accessKey ? " ["+anch.accessKey+"]" : "" );
}With the above code, we’ve now trimmed out URL’s that would have looked like this:
- http://www.dustindiaz.com/udasss/
- http://dustindiaz.com/sweet-titles/
- http://www.dustindiaz.com/downloads/ajax-contact.zip
to look like this:
- /udasss/
- /sweet-titles/
- /downloads/ajax-contact.zip
Which in practicality, is all you need to know! Anyone else want to share a tip? Please post code on your own sandBox, and not in the comments (it’ll look ugly and I don’t feel like playing clean up).
February 8th, 2006 at 7:05 pm
Tried it but did not work:
this line has some *odd* quotes?
var access = ( anch.accessKey ? ' [’+anch.accessKey+’] ‘ : ‘’ );
February 8th, 2006 at 7:12 pm
oh. woops. i’ll correct that.
February 8th, 2006 at 8:30 pm
Thanks! I was wondering about that. :)
February 8th, 2006 at 11:03 pm
For string manipulation stuff, I’d prefer to use regex’s power over the string functions (substr and such). Here’s my stab at it
It’s not any shorter and certainly not the prettiest regex in the world, but it seems to work ok.
February 9th, 2006 at 1:26 am
Hmm… Cool Justin. I definitely like the “I want to help you out, so I will extract the Javascript for you. If all goes well, it will be displayed below…” hehe.
February 9th, 2006 at 8:32 am
Love your new design Dustin, I can’t find a single aspect of it that reminds me of any of your previous designs. When you can do that, you’ve got something good going.
Did you see *how* that Javascript was extracted? I spent way more time on that than the actual code sample ;)
February 9th, 2006 at 10:23 am
Dustin: you have been busy!
Like the lay-out, only the green is a little flashy on a black background.
February 10th, 2006 at 12:13 pm
Hey with the Opera 9 beta there is now an option on the advanced tab of the preferences to show tooltips. If I uncheck it I can now see your sweet titles. Previously, I was thinking of modifying it to show them a little lower if the browser was Opera.
February 17th, 2006 at 6:03 am
Here is my attempt to do the same thing except it removes all the forwards slashes including the last one.
// trims address of http:// and limits it to 25 characters
var anchstr = anch.href.toString().substr(7,25)
// trims trailing forward slash in address
var length = anchstr.length - 1;
// If the orinal address is greater than 32 chars ( our 25 limit and 7 for http:// ) add a … to the end
if ( anch.href.length > 32 ) {
addy = anchstr.toString().substr(0,length)+”…” ;
} else {
addy = anchstr.toString().substr(0,length);
}
February 20th, 2006 at 10:36 pm
How about disabling them for internal links? :)
April 3rd, 2006 at 2:40 pm
Does anyone know why using this in the link loop works in FireFox but not in IE? I’m trying to restrict Sweet Titles to only apply in the #content div versus the entire page (such as navigation):
Original:
var current = document.getElementsByTagName(this.tipElements[i])
Modified:
var current = document.getElementById(’content’).getElementsByTagName(this.tipElements[i]);