AlternateIdea: Rico rounded corners without all of Rico

December 1st, 2005

Rico rounded corners without all of Rico

22 comments on 203 words

UPDATE (Feb, 09 2006): I’ve posted an updated script that uses the new $$ function in Prototype. This means you can now pass a css selector to the round function and round corners based on that.

View and download it here

—- I extracted and made very minimal changes to Rico’s rounded corner implementation so I could use it without needing all of Rico. Currently I’m using Script.aculo.us in all of my projects and didn’t need all of Rico, but Script.aculo.us doesn’t have a Rounded Corners implementation. All credit to the talented guys over at OpenRico for this!

View an example and download it here.

Discussion

Ilya said on December 1st

Works in Firefox, but not in IE.
Tarellel said on December 1st

Believe it or not, thats because IE sucks, giganto Balas. Its a terrible shame that when your developing a web application, you have to take into account IE’s redundent procedures a crapply made script handeling. For years IE has encouraged bad scripting because of their crap, now is the time we should forget about their obsolete garbage and encourge the development of standard based browsers for the introduction and development of Web2.0’s AJAX applications. Hopefully with the introduction of IE7 coming, we’ll see some of these issues corrected.
FruitBatInShades said on December 2nd

Thats an awful lot of code for rounded corners! Sheesh!
Necroscree said on December 2nd

How funny I was just starting to extract all the Rico rounding of corners methods last night. Thanks for beating me to the task. You rock.
Justin Palmer said on December 2nd

Ilya, thanks for pointing that out. Hmm, I’m wondering if Rico’s original implementation works in IE. I’ll see what can be done.

FruitBatInShades, thats very true and it’s not perfect, but without the use of Javascript you either have to use a combination of extra markup and a load of CSS, especially for liquid rounded corners.

This has problems the CSS approach doesn’t though, try setting a default height for something your using this on and it breaks.

Ncroscree: I assumed others wanted the same, thanks!
Michal Stankoviansky said on December 2nd

Did you know that the method Rico.Color.RGBtoHSB has a typo?

There’s this statement at the top of the method body…
var saturaton;
...while the rest of the code is of course using variable named saturation.
Justin Palmer said on December 2nd

Wasn’t aware of that Michal, that error must also exist in Rico itself. Thanks for the heads up!
Rich said on December 7th

What do you think about Nifty Corners as a rounding script?
Justin Palmer said on December 8th

Rich, I don’t mean to be disrespectful to the authors of Nifty Corners, but it’s the worst looking Javascript I’ve seen in a while. The coding conventions are bad, variable names aren’t descriptive and it was just poorly implemented compared to Rico’s method.
Marc Luzietti said on December 22nd

Actually, the RICO guys borrowed the rounded corners idea from http://pro.html.it/esempio/nifty/

“The rounding corners technique that we use was inspired by Nifty Corners JavaScript. While the bordering technique is the same, we take a completely different approach in Rico.”
Ryan said on December 29th

There is a prototype function that allows you to run this on all elements of a certain class.:

Element.childrenWithClassName(document, “tab”).each(Rico.Corner.round.bind(Rico.Corner));

This however initiates the default behaviour. Anyone know how to pass params to this?
Jerod Venema said on January 24th
This does actually work in IE, although there’s a small bug due to IE’s crappy box model. On line 94, we see this:
```
 inStyle.height            = "0px"; // assumes css compliant box model 
```
So, just add the following line afterwards…
```
 if(/MSIE/.test(navigator.userAgent)){
     inStyle.height        = "1px"; // so make IE use 1px
 }
```
Seems to work for me.
riffraff said on February 9th

nice, I was gpoing to do the same thing. Serendipity again :)

Terellel: if you don’t care about IE you can just use -moz-border-radius and live happier :)
Josh said on February 10th

Has anyone figured out how to modify this to do bigger rounded corners?
Cristiano Dias said on March 8th

Funny… even with the modification suggested by Jerod Venema the code still doesn’t work on IE. But the full Rico does work. I guess I’ll try to extract the JS myself and see what happens.
Chad said on March 25th

Nice Work
Guido Zeelen said on March 29th

The reason why it is not working in IE is that Rico.Color.createColorFromBackground return an undefined color. If you change the background colors #222 in #222222 and #444 in #444444 in the example round.html it works in IE.
Christopher Schick said on May 26th

Has anyone found a condensed version or script to do this? Like the other fellow said, sure seems like a lot of code for a rounded corner…
Contact me at Home.
wergdfg said on May 30th

sfgsdfgsdfg sdfg sdfg
crirus said on May 30th

Hi guys,

I’ve just tested and Firefox rock, and IE sucks as usual. It happend to need a small floating div in the page with rounded corners and a fixed 400px width table within. Looks like IE expand the rounded external div on x axis to the right margin, not keep it tight around the tabel.

Any suggestion?
jimy said on August 22nd

Justin, great script, tnx u. But still not working in IE ):
Legal Music said on September 2nd

I got it to work on a modified version of IE 6.0

Sorry, comments are closed for this article.

Justin is the Design Director for entp, the company behind Lighthouse, Warehouse, and Mephisto. You can check out his shiny stuff for proof of his super powers.

Beautifully simple issue tracking and project management. With a beautiful Mac-like interface, email and subversion integration, Lighthouse is the perfect project management tool. We took the suck out of issue tracking.
Web-based Subversion Interface. Manage Subversion permissions and browse through your changesets and files with ease. Warehouse takes the complicated and mundane tasks of Subversion and makes it easy.

May06

With the release of Opera’s DragonFly, IE 8’s Developer tools, Safari’s/Webkit’s Web Inspector and Drosera; and the Grand Daddy of them all, Firebug – we’ve now come full circle.
permalink

Feb08

permalink

DoubleClick and Define using Apple Dictionary


var selection;
if(window.getSelection)
  selection = window.getSelection();
else if(document.selection)
  selection = document.selection.createRange();

document.observe("dblclick", function() {
  if(navigator.userAgent.include("Macintosh")) {
      location.href = "dict://" + selection;
    }
});

A quick (and probably dirty) Prototype-based hack allowing Mac users to get the definition of any word by double clicking it.

Feb08

permalink

A strftime for Prototype


Object.extend(Date.prototype, {
  strftime: function(format) {
    var day = this.getUTCDay(), month = this.getUTCMonth();
    var hours = this.getUTCHours(), minutes = this.getUTCMinutes();
    function pad(num) { return num.toPaddedString(2); };

    return format.gsub(/\%([aAbBcdDHiImMpSwyY])/, function(part) {
      switch(part[1]) {
        case 'a': return $w("Sun Mon Tue Wed Thu Fri Sat")[day]; break;
        case 'A': return $w("Sunday Monday Tuesday Wednesday Thursday Friday Saturday")[day]; break;
        case 'b': return $w("Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec")[month]; break;
        case 'B': return $w("January February March April May June July August September October November December")[month]; break;
        case 'c': return this.toString(); break;
        case 'd': return this.getUTCDate(); break;
        case 'D': return pad(this.getUTCDate()); break;
        case 'H': return pad(hours); break;
        case 'i': return (hours === 12 || hours === 0) ? 12 : (hours + 12) % 12; break;
        case 'I': return pad((hours === 12 || hours === 0) ? 12 : (hours + 12) % 12); break;
        case 'm': return pad(month + 1); break;
        case 'M': return pad(minutes); break;
        case 'p': return hours > 11 ? 'PM' : 'AM'; break;
        case 'S': return pad(this.getUTCSeconds()); break;
        case 'w': return day; break;
        case 'y': return pad(this.getUTCFullYear() % 100); break;
        case 'Y': return this.getUTCFullYear().toString(); break;
      }
    }.bind(this));
  }
});

UPDATE: Bugs fixed. Thanks Andrew and Stephen

Also, some of my old and new code has been posted on GitHub. You might find something useful.

Feb04

A beautiful, organic animation by Flight404 created using Processing.

Processing in Action
Jan08

Aaron Patterson shows us how to define ruby methods which can be called from JavaScript using RKelly.
permalink
Jan07

Dustin might not surprise you at your house with a book in hand, but he’ll damn sure send you his innermost fu in the form of a shiny yellow and black book. It’s an excellent read if you’re looking to put more funk in your functions and class in your classes. Check out “Pro JavaScript Design Patterns” by Dustin and Ross Harmes.

—I’m Justin Palmer and I approve this message.
permalink
Dec23

IE 8 PAsses the Acid 2 Test for those not keeping tabs on things.
permalink
Oct24

Mislav has written up an excellent overview on upgrading Radiant (which used 1.5) to Prototype 1.6. The article does a great job of showing how 1.6 is superior to 1.5.
permalink
Oct19

According to the New York Times, the Daily Show Archives, with over 7,000 videos are online—free and searchable.
permalink
Oct11

Telemarketer gets owned
Oct10

—Erik Kastner shows us how it’s done.

Making an iPhone app in about a minute
Oct09

Defining classes and inheritance in Prototype–Incase you’ve missed it, Prototype 1.6 has a new inheritance model.
permalink
Aug21

Hurricane Dean’s projected path. The most awesomest hurricane ever.
permalink
Aug07

How Ninjas Work

Who would’ve thought Howstuffworks would be able to uncover the secrets behind these illusive creatures.
permalink
Jul27

Chuck Norris does not apply for jobs, jobs compete for Chuck Norris

—via Ajaxian
permalink