Wednesday, February 01, 2006
by Nik Kalyani
Wednesday, February 01, 2006 7:53:24 PM (Pacific Standard Time, UTC-08:00)

The IE7 toolbar has an RSS icon that is ordinarily grayed-out, but lights up when visiting certain web pages.

Clicking the icon displays a list of feeds available on the page. When you select a feed you see a formatted version of the feed along with options to subscribe to the feed and change the sort order of items. Once you subscribe to the feed, it gets added to the “Favorites Center” which you can open to organize your feeds or view them.

If you are a web developer and have made RSS feeds available on your web pages, you can make discovery and subscription of these feeds easier for IE7 users by adding a few elements to your page that announce the presence of the feeds. Adding a <LINK> tag to the page Head with the correct attributes will do the trick. For example, my blog has the following:

<link rel="alternate" type="application/rss+xml" title="My RSS Feed" ref="http://blogs.speerio.net/peerio/SyndicationService.asmx/GetRss" /> 

As you can see, this is quite simple; you just have to add the attributes “rel,” type,” “title,” and “ref”. This is a simple addition that will instantly make your RSS feeds easier to consume. 

by Nik Kalyani
Wednesday, February 01, 2006 6:59:35 PM (Pacific Standard Time, UTC-08:00)

I just downloaded and installed the IE Developer Toolbar and am in developer browser heaven. I have previously used the Web Accessibility Toolbar, but I think the developer toolbar is way better. Here are some of my favorite features:

DOM Browser: Browse the entire DOM hierarchy of a page using a tree control, then for individual nodes, view its attributes and also edit them. This last bit is a nice touch. If you’re trying to tweak something so it’s just right…this is perfect. You can make it work and then go fix the source.

View Class and ID Information: This is extremely useful when debugging CSS, especially for DotNetNuke skins. You see an overlay of CSS classes and element ID’s on the page making it easy to visually detect the “cascade” that might be contributing to CSS issues.

Show Ruler: This feature was not what I expected, but once I saw it I loved it. Instead of the usual horizontal and vertical rulers what happens is that your cursor becomes a cross-hair. You can then drag it from one point to another on your browser and it draws a virtual ruler between the two points (and you can create as many of these as you want). You can also click anywhere and find the coordinates of the point.

Definitely a useful toolbar to have if you are a web developer.

by Nik Kalyani
Wednesday, February 01, 2006 11:25:26 AM (Pacific Standard Time, UTC-08:00)

Sometimes, it is necessary to override stylesheets defined on a page or to add additional stylesheets, perhaps for different media. The script below defines a JS object that allows you to define stylesheets for screen/print for IE/Other browsers. It then adds them to the page dynamically.

In the code below, you can ignore the portion from //BEGIN to //END. The snippet at the end is all that needs to be changed. Se the desired values for “picker.ieScreen,” “picker.iePrint,” “picker.otherScreen,” and “picker.otherPrint” and the code will take care of the rest.

<script language="javascript">

// BEGIN: styleSheetPicker object definition
function styleSheetPicker()
{
   this.ieScreen = this.iePrint = this.otherScreen = this.otherPrint = "";
}

styleSheetPicker.prototype.render = function()
{
   if (document.createStyleSheet)
   {
    if (this.ieScreen)
     document.createStyleSheet(this.ieScreen);

    if (this.iePrint)
        {
     var ieP = document.createStyleSheet(this.iePrint);
            ieP.media = "print";
        }
   }
   else
   {
        var head = document.getElementsByTagName("head")[0];
    if (this.otherScreen != "")
            head.innerHTML += "<link rel=\"stylesheet\" href=\"" + this.otherScreen + "\">";

    if (this.otherPrint != "")
            head.innerHTML += "<link rel=\"stylesheet\" media=\"print\" href=\"" + this.otherPrint + "\">";

   }
}
// END: styleSheetPicker object definition


var picker = new styleSheetPicker();

// IE stylesheets
picker.ieScreen = "ie.css";
picker.iePrint = "other.css";

// Other browser stylesheets
picker.otherScreen = "default.css";
picker.otherPrint = "other.css";

picker.render();

</script>

 

#    Comments [1] - Trackback    

CSS | Javascript

RSS feed
Search and Links
Bling

View Nik Kalyani's profile on LinkedIn

TechBubble
www.flickr.com
This is a Flickr badge showing public photos from techbubble. Make your own badge here.
Statistics
Total Posts: 216
This Year: 19
This Month: 0
This Week: 0
Comments: 226
About the author/Disclaimer

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008
Nik Kalyani
Sign In
All Content © 2008, Nik Kalyani