So I’ve been working on figuring out jQuery and have been poking around with a few prebuilt scripts (aka plugins) but was working my way through a guide on constructing selectors and put something of my own together:

$("a").not("[href*=<?php bloginfo('url'); ?>]").css("color", "red");

which changes the text color of all links leading away from your wordpress site to red.  Some sites highlight these links with a little icon, which would be easy enough to modify this snippet to accomplish.

For a few seconds I was concerned about putting the php inside the javascript, but quickly realized it would be replaced with the blog URL server-side, long before the browser would run the script.

Like I said… sometimes I get it. Maybe I’ll take this a step further and make a little wordpress plugin where you can upload your own icon or something.

Update:

I decided to go ahead and use the little wikipedia icon to links that take you to places outside of autumnrayne.net.  I changed the script a bit to add a class rather than creating the CSS since that’s more in line with the concept of CSS controlling all of your appearances:

$("#content a").not("[href^=<?php bloginfo('url'); ?>],[href*=javascript:],.liked ").addClass("external_link");

The additional things in the .not() bit are to exclude the “like this post” links which are javascript or empty <a class=”liked”> tags that the thumbs-up image hook into.  I’ve also narrowed the scope of the script to just the #content div so that the twitter links and anything else I decide to put in the side bar aren’t included. I changed the selector for the blog url to anything that starts with (http^=…) autumnrayne.net otherwise things like the facebook sharing links get included. (or should I say excluded?)

No Comments »