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

  1. Ilya Ilya said on December 1st

    Works in Firefox, but not in IE.

  2. Tarellel 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.

  3. FruitBatInShades FruitBatInShades said on December 2nd

    Thats an awful lot of code for rounded corners! Sheesh!

  4. Necroscree 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.

  5. Justin Palmer 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!

  6. Michal Stankoviansky 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.

  7. Justin Palmer 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!

  8. Rich Rich said on December 7th

    What do you think about Nifty Corners as a rounding script?

  9. Justin Palmer 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.

  10. Marc Luzietti 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.”

  11. Ryan 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?

  12. Jerod Venema 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.
  13. riffraff 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 :)

  14. Josh Josh said on February 10th

    Has anyone figured out how to modify this to do bigger rounded corners?

  15. Cristiano Dias 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.

  16. Chad Chad said on March 25th

    Nice Work

  17. Guido Zeelen 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.

  18. Christopher Schick 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.
  19. wergdfg wergdfg said on May 30th

    sfgsdfgsdfg sdfg sdfg

  20. crirus 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?

  21. jimy jimy said on August 22nd

    Justin, great script, tnx u. But still not working in IE ):

  22. Legal Music 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.