Using NifyCube with Rails For Rounded Corners

May 29, 2007

Step 1: Download NiftCube from http://www.html.it/articoli/niftycube/NiftyCube.zip Basically You need only 2 files from this zip: niftycube.js and niftyCorners.css

Step2 : Copy niftycube.js to public/javascripts/ folder and niftyCorners.css to public/stylesheets/ folder in Rails

Step3:  As we are keeping css file in different directory than js file You need to change a line in niftycube.js 

Change line # 37 to l.setAttribute(“href”,”stylesheets/niftyCorners.css”);   This enables niftycube to include the correct stylesheet onthe fly in rhtml. Or If you prefer an easy way, simply copy niftyCorners.css to public/javascrips/ folder too. In that way you dont need to change js file.

Step4:  Include Js file using <%= javascript_include_tag “niftycube” %> in your rhtml file.

Step5: Finally in your javascript/application.js or page specific.js  Add
window.onload = function(){
Nifty(“div#content,div#nav”);
}
Where content, nav are div IDs I want to make rounded corners. You could add as many as you want and choose whether you want rounded corners allsides or only some side. See http://www.html.it/articoli/niftycube/index.html for excellent documentation.

My hatsoff to Alessandro Fulciniti writing excellent NiftyCube library and ofcouse to Rails team.

Advertisements

2 Responses to “Using NifyCube with Rails For Rounded Corners”

  1. Trung Ly Says:

    Following your instructions exactly, I was pulling my hari out trying to find out why it was working on some of my views, but not others. I was getting an exception with the following error:
    “ActionController::UnknownAction (No action responded to stylesheets):”

    Finally, I realized it was happening on all application URLs with more than one word in it.. i.e. that corresponded with controller methods other than the index. So for example, the failure was happening on http://my.site.com:3000/mycontroller/new, but it working fine on http://my.site.com:3000/mycontroller.

    The problem is the change niftycube.js. It should have a “/” before the stylesheets, like this:

    Change line # 37 to l.setAttribute(”href”,”/stylesheets/niftyCorners.css”);

  2. Mark Says:

    Thanks for tip. I also found the same problem as Trung Ly so thanks to him for fix as well. Not I have to find how to load the page after the rounded corners are applied to stop the change occurring while in view.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: