After finally getting this blog back up online, the next step was to upgrade to the latest blogCFC version (which ships with the awesome theme you see). After being done with that, I noticed this is the first time I had used the blog with Chrome, and the one thing that didn't work in Chrome is display of the RSS feed. And no better way to remind myself how to accomplish this again in the future than blogging it!

The RSS in IE/Firefox is styled (I believe because of the in built RSS reader?):

The RSS in Chrome is not styled:

One good solution to this would be to just use the Feedburner link for the RSS feed (http://feeds.feedburner.com/ColdFusionRIA) and it displays good in all browsers. But I saw it as a good opportunity to use jQuery to redirect the click based on the browser. So, now if you click the RSS link on the navigation, it will show the default blogCFC RSS in IE/Firefox but for Chrome it will go to the feedburner link.

Now the main issue I encountered (and the solution is documented at various places on the internet) is that the built in jQuery browser detection doesn't differentiate between chrome and safari. You can see this at work here (try it with different browsers)

On Chrome, the default output will detect safari. So some changes had to be made to that.

Really simple to do using jQuery too. Let's look at the code.

view plain print about
1<script type="text/javascript">
2$.each($.browser, function(i, val) {
3    $("<div>" + i + " : <span>" + val + "</span>").appendTo( document.body );
4        });
5                
6$("<p>Browser info (New):</p>").appendTo(document.body);
7
8//Making some changes to detection code to account for chrome...
9var userAgent = navigator.userAgent.toLowerCase();                
10// Figure out what browser is being used
11jQuery.browser = {
12    version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
13    chrome: /chrome/.test( userAgent ),
14    safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
15    opera: /opera/.test( userAgent ),
16    msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
17    mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
18};
19                    
20$.each($.browser, function(i, val) {
21     $("<div>" + i + " : <span>" + val + "</span>").appendTo( document.body );
22});
23</script>

As you see, first we just use the default jQuery library to push browser information to the document. If you open it on chrome, you will see it actually says "safari: true". To detect chrome properly we override the jQuery browser part in the code and the new result will detect the difference between safari and chrome.

After this, for the RSS link I just have to redirect the window opening based on whether it is chrome or not

view plain print about
1if($.browser.chrome){
2}else{
3}