I recently found the following JavaScript library Nifty Corners Cube
at http://www.html.it/articoli/niftycube/index.html.
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>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk
-~----------~----~----~----~------~----~------~--~---
jsmorris wrote:> I recently found the following JavaScript library Nifty Corners Cube > at http://www.html.it/articoli/niftycube/index.html. > > 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");'' %> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk -~----------~----~----~----~------~----~------~--~---
Kevin...thanks for the help...
I was worried about that too, so I modified my script tag to be something like
<script type="text/javascript">
window.onload=function(){
alert("right before Nifty is executed");
Nifty("div#nav", "big");
alert("right after Nifty is executed");
}
</script>
I see the alert box before and after Nifty(), but Nifty never seems to
do what it says it should do....However, if I copy the same code into
just a regular html examples it works.
When I do refresh the page, I see a small movement of the text on my
page, but no rounded corners.
Is there a difference between hand coding the <script /> element
compared to the <%= javascript_tag %>?
On 10/30/06, _Kevin
<kevin.olbrich-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
>
> jsmorris wrote:
> > I recently found the following JavaScript library Nifty Corners Cube
> > at http://www.html.it/articoli/niftycube/index.html.
> >
> > 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");'' %>
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk
-~----------~----~----~----~------~----~------~--~---