EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

Tuesday, December 16, 2008

JQuery for Everyone: Dressing-up Links Pt1

Comments: 11

We had a request from Ari in our last installment of JQuery for Everyone! Ari wants to know how to add fancy “this is an external link” icons to his page. Since that was basically written for me by Karl Swedberg at Learning jQuery, I decided to take it up a notch (using some AJAX and JSON tricks).

But, if you only need the external link icons:

Add jQuery to your page (see previous article for different methods)
Download a good icon (WSS doesn’t seem to have a good one)
Add the icon to your server (document library or the 12\TEMPLATE\IMAGES directory)
Place the following script on your page (replacing the image path with your own)

<script type="text/javascript">
$(function() {
  $('a').filter(function() {
	return this.hostname && this.hostname !== location.hostname;
  }).after(' <img src="/PaulGrenier/images1/external.png" alt="external link">');
});
</script>

If you want to do more with this idea, of dressing up links, come back tomorrow and I’ll show you how to add the file size for those external links.

View all entries in this series: PaulGrenier-JQuery for Everyone»

Entries in this series:

I recommend SharePoint resources daily on my twitter account here.

Posted by AutoSponge on Tuesday, December 16, 2008 at 7:51 am
Filed under Tips and Tricks · Tagged with

Please Join the Discussion

11 Responses to “JQuery for Everyone: Dressing-up Links Pt1”

Ari says:

December 17, 2008 at 7:14 am

Thanks Paul, works fine and just the thing I wanted.

Reply
Steven Brough says:

December 18, 2008 at 10:02 am

Cool article, I’ve also modified your script slightly to work around the annoying problem of not being able to open external links in a new window from within the Quick Launch (WSS not MOSS)!

Slightly hacky, but works none the less!

Steve.

Reply
AutoSponge says:

December 18, 2008 at 7:22 pm

That’s the kind of creativity I like to see :)

Overcome the annoyances of the UI. If you have ext links in your nav, you may want to replace my “file not found” with an icon when you get to pt-3 of this series:
http://www.endusersharepoint.com/?p=1043

Reply
JohnnyM says:

October 2, 2009 at 9:34 am

Simple! Thank You Paul.
Question: Is there a way to skip running this for certain web parts?
For instance, I have a page I want ot use this on but there is a calendar opened up on the page and all the utility links on the Cal get that image tagged to the link, like prev and next month links.
How can I skip that Webpart? I tried adding a conditional but thats not working:

if $(”div:contains(’WebPartWPQ6′)”) {
return;
}else{
$(’a').filter(function() {
blah blah blah

Reply

Trackbacks

Check out what others are saying about this post...

Michael Greth MVP SharePoint Blog says:

January 5, 2009 at 4:57 am

SharePoint Kaffeetasse #98…

Tools und Addons Custom Content Editor Web Part for SharePoint jQuery http://jquery.com/ jQuery is a…

Reply
Mirrored Blogs says:

January 5, 2009 at 5:28 am

SharePoint Kaffeetasse #98…

Tools und Addons Custom Content Editor Web Part for SharePoint jQuery http://jquery.com/ jQuery is a…

Reply
JQuery for Everyone: Dressing-up Links Pt3 | End User SharePoint says:

January 16, 2009 at 12:43 pm

[...] part 1, we added some nifty icons to external links. However, because we only compared the anchor’s [...]

Reply
German Blogs says:

January 18, 2009 at 4:29 pm

SharePoint Kaffeetasse #98…

Tools und Addons Custom Content Editor Web Part for SharePoint jQuery http://jquery.com/ jQuery is a…

Reply
OneOfSix says:

January 22, 2009 at 4:03 pm

Add Links to SharePoint Wiki Toolbar using jQuery…

…

Reply
Free web part download: Show Icons for External Links | End User SharePoint says:

January 30, 2009 at 12:51 am

[...] found the article from Paul Grenier concerning managing external links so compelling that I packed up a web part for use on sites. Here are the [...]

Reply
Ultimate Collection of 40+ jQuery Tutorials and Resources | The Theme Blog says:

February 18, 2009 at 3:25 pm

[...] JQuery for Everyone: Dressing-up Links Pt1 [...]

Reply