On February 13th, 2009 milburn wrote…

Instant Star Rating

Released earlier this week was my star rating tool. I’d actually started this about a year ago but only remembered last weekend that I had it gathering dust in my hard drive.

Instant Star Rating allows you to create 5 star ratings in several different styles to go on your website. Unlike other star raters it doesn’t use Ajax. This is because Ajax doesn’t work across domains. Instead it uses the dynamic script method. When the user clicks on a star it loads a new script from the server.

The tool actually gave me some grief since I checked it worked in Firefox and failed to check in IE presuming that it would work in IE too. This was not to be, the rating javascript failed in IE due to an obscure DOM issue. IE doesn’t support innerHTML on style elements. So I tried to look for an alternative. IE has a property called styleSheet which isn’t supported by other browsers. CSS can be written to this using the cssText method. An interesting find!

I therefore used the following method to add dynamic CSS:

IR1_h=document.getElementsByTagName("head")[0]
IR1_l=document.createElement("style")
IR1_l.type='text/css'
IR1_h.appendChild(IR1_l)
if(IR1_l.styleSheet){
IR1_l.styleSheet.cssText='#rate1{padding:10px 0}'
}else{
IR1_l.innerHTML='#rate1{padding:10px 0}'
}

Please try out instant star rating, it is completely free and should work on almost any website. Check out the example below:

You can leave a comment, or trackback from your own site.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Proudly powered by WordPress with plane theme by me! | © 2007 - 2019 Thomas Milburn | Valid CSS and HTML