jsmorris wrote:
I recently found the following JavaScript library Nifty Corners Cube at Nifty Corners Cube - freedom to round.
I am having trouble integrating it with my rails application. I am confident that it is loading properly in the page, but the effect of rounding the corners doesn't occur. I am not sure what the problem may be. Maybe there is something with integrating the library into a rails application since all the examples from the site are straight html pages.
Has anyone had any success getting Nifty Corners Cube integrated into a RoR appliation? Is there an alternative that is easier to integrate and does the same rounding of <div> elements without the need for small corner images?
Thanks in advance for any help.
Jason
PS Here is what I have done so far. I have delayed adding the style to my stylesheet and using the javascript_include_tag() method to include the JavaScript library until I see it work.
In my applicaiton.rhtml layout and in the <head> section I have placed this code
<style type="text/css"> body{padding: 20px;background: #FFF;color: #333;text-align: center; font:85%/1.45 "Lucida Sans Unicode","Lucida Grande",Arial,sans-serif} h1,h2,p{margin: 0;padding: 0 10px} p{padding: 0 10px 1em} h1,h2{letter-spacing: -1px;font-weight:100;color: #111} h1{font-size: 200%} h2{font-size: 140%;line-height:1.05} div#container{width:450px;margin: 0 auto;padding:10px 0;text-align:left} div#content{float:left;width:300px;padding:10px 0;background: #BAFB80} div#nav{float:right;width:145px;padding:10px 0;background:#DBCAEE } </style> <script type="text/javascript" src="/javascripts/niftycube.js"></script> <script type="text/javascript"> window.onload=function(){ alert("oload catched: now nifty corners are ready to round!"); } </script> <script type="text/javascript"> NiftyLoad=function(){ Nifty("div#nav","big"); } </script>
Next, I placed in the <body> section this
<div id="container"> <div id="content"> <h1>Nifty Corners</h1> <p>Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p> <h2>Rounded corners without images</h2> <p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p> <p>Iiuiuaea ouea ieuuio o eoo iaoa euiaou uoia uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p> </div> <div id="nav"> <h2>Simple. Just Javascript and CSS.</h2> <p>Aoioeou eeeu ueeiuiii uoauiioi uae eoeoioe ouiui oieouoo uioo uaieeoe oe eouoiea a oou uiu.</p> </div> </div>
I haven't used this library at all, but my guess is that you need to call 'NiftyLoad' or 'Nifty(somediv)' at some point after they have been defined.
Probably something like this at the end should work...
<%= javascript_tag 'Nifty("div#nav","big");' %>
