Rails and Nifty Corners

Having returned to my Rails application after some months of largely ignoring it, I'm implementing the new design and need to round some corners.  In the past, on non-Rails sites, I've used Alessandro Fulciniti's Nifty Corners and found them very simple and straightforward to use.  Alessandro now has a new version, Nifty Corner Cube, and this is even simpler to implement.

Using Nifty in a Rails application requires a few tweaks of course but the first thing to do is read the main page and grab the ZIP file from the link at the foot of the page. 

There are three things needed to implement Nifty: the JS file, the CSS file and a function call in your page.  As this is Rails, we'll need to do them differently to the way Alessandro describes.

1. Take the niftycube.js Javascript file out of the ZIP file and put it into /public/javascripts.  Then add it to the list of javascripts you are already including.  For me, this mean adding Nifty to the end of this line:
   
   <%= javascript_include_tag 'prototype', 'controls', 'dragdrop', 'effects', 'custom', 'niftycube' %>
2. Take the niftyCorners.css CSS file out of the ZIP and put it into /public/stylesheets.  Although the JS file will try to include this itself, it's not going to find it so you'll need to add it into your main layout file as well:
   
   <%= stylesheet_link_tag 'niftyCorners' %>
3. The third element is the Javascript function call to set the corners on your chosen elements.  The standard Nifty method redefines window.onload but we can't do that in Rails so we need to use the alternative method provided, a new NiftyLoad function.  So, to set rounded corners on every DIV that has the class 'infoblock', the call would be:
   
   NiftyLoad=function(){
   Nifty("div.infoblock");
   }
   
   This can be positioned in the main layout file but a better place is in the specific view by using the content_for("page_scripts") block.  So:
   
   <% content_for("page_scripts") do -%>
   <!-- Begin
   
   ... etc ...
   
   NiftyLoad=function(){
   Nifty("div.infoblock");
   }
   
   //  End -->
   <% end -%>

And that's it.  It just works.  Couldn't be much easier, could it?

Comments

[TAD]

Thanks! I didn't even know about the content_for("page_scripts") thingie!

[Nimo]

http://www.gizmomaker.com אבטיפוס
אב-טיפוס

You do the same thing in your blog I guess.

[Old Dog]

Oddly enough, I don't. This blog isn't Rails - I use good old Typepad.

[Duncan Beevers]

Nice, concise write-up. I looked around but didn't find a version of Nifty Corners Cube tuned to rely on Prototype's selectors and Event observers. With a just a little work, this library could be pared down pretty small and complement Rails even more nicely.

Alas, I am lazy and moving on to other things since this just works.

[steinar skeie]

Nifty Corners Cube doesn't work with background-color: white, you have to use background-color: #fff. So except that, it "just works" ;)

[james]

THANK YOU for this. I was beating my head against a wall.