Yahoo! Sirius Radio Widget mod
[UPDATED: Tuesday, October 20, 2009 at 4:27:19 PM]
Tanner Jepsen created a Sirius Radio widget I've been using for years. He's since upgraded the widget to a v3 status, but I've never cared for the new UI. I prefer the compact nature of the original version.
Sometime last year, I sent Tanner a mod I had done which adds the ability to post song information to a URL (which is how I get my "now listening to" on my blog updated with my Sirius listening.) He mentioned he'd add the feature to existing updates, but I don't think he ever got around to adding the feature.
However, I recently started using Yahoo! Widget v4.5 and the Sirius Widget v2.2.x stopped working. The reason is the KON file uses some depreciated syntax. So over the weekend I modded the Sirius Widget again so that it would work in Yahoo! Widgets v4.5.
So, I thought I'd go ahead and release my mod to the wild. My mod is based on the original v2.2.0 and does the following:
- Works with Yahoo! Widgets v4.5
- Adds the "Web Status URL" preference to the "IM Status" tab (this posts listening information to a URL)
- Adds new preference for toggle "Check for update" status (you can now disable this to speed initializing)
This mod is not support by Tanner and I make no guarantees the widget will work for you.
Tanner has updated his v2.2.x to include my mods in v2.2.3, but also removed some code that was hitting his server. I've updated the link on this site to point to his new version
Yahoo! Widget - Sirius Tuner v2.2.4
Version History
v2.2.4 [October 18, 2009]
+ This is a link to Tanner's v2.2.4 which includes changes to the code
v2.2.3 [September 30, 2008]
+ Added new preference for toggling the "check for updates" feature
Adding visual page breaks to your web page
Today I was working on a project where I needed to add some visual "page breaks" to the screen—very similar to the page breaks Microsoft Word shows in "Normal" view. The goal is for visual indicator to show on the screen, but actually trigger page breaks when printing.
After playing around with the HTML and CSS for a few minutes, here's what I came up with:
My BlogCFC mods for Windows Live Writer
When I re-launched my blog last year I mentioned that I made several changes to the XML-RPC code in order to make blogging from Windows Live Writer simpler. I didn't release the XML-RPC mods at the time, because I wanted to make sure they were nice and stable. Now that I've been using the mods for almost a year, I think their stable enough to share.
The changes I made most involved trying to simplify blog posting. My key objective was to try and avoid having to drop down to the "source code" mode altogether, but still be able to use the custom tags that BlogCFC supports such as the <more/>, <code> and <textblock> tags.
To solve this problem I build some parsing functions which look at the incoming HTML and look for these special tags written in escaped HTML. When it finds these tags, it then converts the escaped HTML into their unescaped format. This allows me to just cut-n-paste or type in my <code> blocks directly into Windows Live Writer and never have to go into "View Source" code. This means I can use the "Normal" (Design View) and just type into Live Writer:
<code>
<h1>Hello World!</h1>
</code>
To produce:
I can also just type in the <more/> tag into Live Writer in the place where I want to split text into two.
You may be wondering how I'm able to use the type in these special tags without the parsing functions picking them up. Since I knew I may want to actually blog these tags at some time, I build in some escape characters you can use to avoid processing and have the tags displayed correctly. In order to display one of the special tags, just write the tags with brackets (i.e. "[" and "]") just inside the < and > characters, for example: <[specialTag]>. This only works with the <code>, <more/> and <textblock> tags.
I have not tested this code with that latest BlogCFC code, but this should work with BlogCFC v5.9 (released Oct 12, 2007.) Either way, before implementing I recommend making a backup of your "xmlrpc" folder and even doing a diff on the folders to compare the changes.
The one change you'll need to make to your Live Writer setup, is you must add the query string "?parseMarkup=true" to your XML-RPC URL in order for BlogCFC to use the parsing functions. I did this to make it easy to toggle this functionality on or off on a per blog basis.
If you download my XML-RPC mods and use them, let me know how they work out for you! Perhaps if the mods are well received, I'll tidy them up even more to see if Raymond Camden wants to include them in the official release.
Using jQuery to determine if an element is a child of another element
I seem to be writing a lot of code as of late that needs to check if a certain element is a child of another element. This is extremely useful in drag and drop operations (for determine where an element is being dropped) or if you want to make sure that a global event was trigger on a specific set of elements (I use this to check if a document.click occurred on a specific container.)
While jQuery makes this easy enough to do, I don't find the code very readable or reusable so I started using the following snippet:
return (this.parents(b).length > 0);
};
What this does is checks to see if the current element is a child of the specified selector. For example:
$("#list > li > a").isChildOf("#list > li"); // return true
$("#list > li").isChildOf("#list > li > a"); // return false
This function definitely comes in handy when doing any sort of event delegation and I hope it eventually makes its way into the jQuery core in some form or another.
A quick and dirty swap() method for jQuery
A few weeks ago I needed a jQuery swap() function for some drag and drop code I was writing. While it would have been easy enough to whip up a quick little function, I found this little snippet courtesy of Brandon Aaron's blog:
b = jQuery(b)[0];
var a = this[0];
var t = a.parentNode.insertBefore(document.createTextNode(''), a);
b.parentNode.insertBefore(a, b);
t.parentNode.insertBefore(b, t);
t.parentNode.removeChild(t);
return this;
};
This particular method only works with the first DOM element in each of the jQuery objects. Using the code is easy enough, the following example would swap the first and last nodes in an unordered list who's id is "list".
Sorting DOM elements using jQuery
I'm working on an interface that uses drag-n-drop to arrange how some fields appear on the page. The page basically has two containers—a canvas and a toolbar. You drag fields from the toolbar to the canvas, and then you can position the fields in the canvas to order them anyway you want. To remove a field, just drag it from the canvas back to the toolbar.
One of the things I wanted to implement was to always make sure the fields in the toolbar stayed in alphabetically ordered. While I knew it would be easy enough to whip up a sorting function, I decided to first search the jQuery Plug-ins to see if I could find something that was already written. That's when I found the TinySort jQuery Plug-in.
This plug-in allows you to sort an number of sibling DOM elements and you can sort by either it's text, an attribute or even a child element. Here's some examples (taken from the Sjeiti website:)
$("ul#people>li").tsort();
// sort by a child's text
$("ul#people>li").tsort("span.surname");
// sort by the img element, order descending using the img's "alt" attribute
$("ul#people>li").tsort("img",{order:"desc",attr:"alt"});
// sort's element, but puts the sorted items at the end of the parent element
$("ul#people>li").tsort({place:"end"});
The "place" option (as seen in the last example) is interesting because it allows you to control how the matching siblings are ordered in context to their non-matching siblings. In most cases you're probably sorting all of the children items of an element, but there may be times when you're ignoring certain elements (like disabled items.)
There are lots of working examples on the authors home page. If you need a way to quickly sort some elements on the page, I definitely recommend checking this plug-in out. It seems to have every option one would need to implement some basic sorting to some generic elements on a page.