bgStretcher (jQuery) in Ruby on Rails - ruby-on-rails

I came across the following code online:
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
It works like a charm on HTML & Javascript & CSS.
Now the question is how do I implement this kind of code in Ruby on Rails Environment.
I have split off this question in multiple questions:
where do I place the CSS & jQuery
how do I implement the javascript into the erb file
how do I link to my css & jQuery files (like in HTML)
Kind regards,
Vincent

Your best bet is to go through asset pipleline which will clear up a lot of things
http://guides.rubyonrails.org/asset_pipeline.html
http://railscasts.com/episodes/279-understanding-the-asset-pipeline

Related

How to make text edit function by Rails

Same as title the following, thx~
It is called RTE, or Rich Text Editor. There're many RTEs, and one of them for rails is wysiwyg-rails, it provides the Froala WYSIWYG HTML Editor javascript and stylesheets as a Rails engine for use with the asset pipeline.
You can follow this tutorial to install it: https://github.com/froala/wysiwyg-rails

How do I use Twitter Bootstrap with Ruby on Rails 3.2.12?

I'm switching from PHP to Ruby on Rails and I'm loving it, the only thing is I'm so used to Twitter Bootstrap for most of my designs and now I feel crippled without it, I followed some tutorials like adding bootstrap-sass and what not to my Gemfile, but I still appear to be missing important things like input-block-level I'm just curious if there is an updated version or a easier tutorial to follow? Thanks.
AFAIK, the easiest and most rails way to integrate the twitter bootstrap to rails is via
twitter-bootstrap-rails gem, they have a pretty good documentation too.
check these screen casts, and this (premium) to get an idea.
and welcome to Rails :)
To to the input-block-level in ERB do something like this
"input-block-level" => "hello_world"
Same as you, I'm coming from PHP and love RoR ;)
With bootstrap you need to import it in your manifest. Read a bit about the assets pipeline in RoR guide.
To import bootstrap, create a file in your app/assets/stylesheets directory, with the name you want, but with the extension .css.scss, and place in it the following line:
#import "bootstrap";
Also if you need to use the javascript helpers from bootstrap, you need to add the following line in your app/assets/javascript/application.js file:
//= require bootstrap
Just download the bootstrap ( CSS, JS ) file and make the updation in that file at regular interval from his official site : Bootstrap
For Bootstrap Tutorials : Click Here
Or you can refer the sample code for reference, because sometimes we dnt get the way to implement such functionality like tooltip.

How to use Bootstrap from Twitter in a Rails 3.0 application?

In my rails 3.0.10 I would like to use Bootstrap from Twitter but I only found examples using Rails 3.1 and the Asset Pipeline. How would add it to my 3.0 application? Do I just download it from the main site and put the files inside of my public folder? What about using LESS?
The absolute simplest way is to drop the boostrap.css file into your public folder and then reference it in your layouts/application.html.erb file. Then you can start using it right away. You're a bit limited at that point in what you can modify but that will get you started.
What is your question about LESS? bootstrap uses LESS but you don't have to worry about that since you're just using a plain ole css file.
See this railscasts video: Twitter Bootstrap Basics. There is another follow-up screencast after you finish this one.
We converted bootstrap to use SASS (think I found it in a github repo somewhere), and included it in the lib/assets/ folder.
Our application.css includes the partials. We've made a few custom modifications to the partials, works just fine.
Version 2 will be converted to SASS pretty sure I'm sure, but in the meantime there are asset pipeline modules available for LESS which you could add so that your rails app understands less files:
A quick search found this (can't vouch for it at all)
https://github.com/metaskills/less-rails
If it works as described you could just drop in bootstrap as it is and reference it in your application.css file.

Rails mixing templating languages

I'm working with a large project where the templates are written in erb. We're getting more and more into client side rendering of parts of the project and we have lots of exact duplicates in mustache of our erb templates.
I'd like to change the erb templates that are replicated in mustache to mustache and print the js templates out from those templates.
I haven't been able to figure out how to mix templating languages in rails though, is this possible? I'd rather not rewrite all the erb templates in mustache.
Thanks!
Maybe Isotope could be useful for you? I never tried it though.
I fear you'd have no direct solution...
An alternative:
You could reuse your good old html created by ruby if you insert in handlebars templates. But it's another js library...
http://www.handlebarsjs.com/

What's the difference between Rail's AssetTagHelper and Scott Becker's AssetPackager?

I want to compress all my js and css files for a project and bundle into one file (one js and one css file). Which one do you recommend for a Rails 3.0 out of http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html and http://synthesis.sbecker.net/pages/asset_packager and why?
I recommend using Jammit from DocumentCloud (if you don't know DocumentCloud, they are behind some very good open source projects like Underscore.js, Backbone.js...) :
http://documentcloud.github.com/jammit/
See the docs for the features, it's very powerful...

Resources