Is there a good practice to organizing stylesheet/javascript asset files specifically for IE browsers with asset pipeline enabled in Rails 3? For example, I do not want to litter my .html.erb files with conditional comments similar to below for browser detections.
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
You could put them into a partial in app/views/layouts/. This is also what Michael Hartl does with HTML5 Shim his tutorial: http://ruby.railstutorial.org/chapters/filling-in-the-layout#sec-partials
Related
At the point in Ch. 5 of the Hartl tutorial where he's showing off CSS/SCSS/Bootstrap styling for the first time (ch. 5.1.2), you're supposed to see the page transformed from an unstyled HTML page to a nifty styled page. But I wasn't seeing the change. It stayed unstyled.
I typed in the listings carefully (and even copied and pasted them from the website, just to be sure, after encountering this problem), tried switching to different gem version numbers (as other advice on similar problems said to do), etc.
Then I decided to insert in my application.html.erb layout the <link> to the Bootstrap CDN, as well as <div class="bootstrap-fluid"> (which I'm glad I learned from FreeCodeCamp) and that fixed the problem:
<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
...
</div>
</body>
Apparently I had done nothing wrong otherwise...my guess is that the bootstrap-sass gem (or some other gem) was not supplying this information correctly.
I'm concerned that if I've put this code in my layout, stuff might break later on. Like, it's supposed to work without what I added, right? Any ideas how to make it work the way Hartl wants it to work?
UPDATE: Ugh. Typo! It turns out that I had misnamed custom.css.scss to custom.css.cscc. Well, that'll do it!
The only reason the Bootstrap CDN link helped was that my layout made use of some Bootstrap. When I started adding custom CSS to custom.css.cscc (sic!) I knew the file wasn't even being read. Lesson learned...type even more carefully.
I'm fairly new to rails. I have a Rails 3.2.13 app running ActiveAdmin. I'm trying to integrate tinyMCE as my editor for the text areas. I want to use the quick install CDN hosted by Cachefly.
I'm able to add the reference to the minified tinymce javascript on the cdn by adding
config.register_javascript 'http://tinymce.cachefly.net/4.0/tinymce.min.js'
that renders the script tag below in my header.
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
How can I add the initializer script below to my head in activeadmin on all the pages?
<script>
tinymce.init({selector:'textarea'});
</script>
I'm a Rails noob. It's probably something simple, but I searched everywhere and I can't seem to figure it out.
Any help would be greatly appreciated.
You can simply add a javascript file as well after you add tinymce to the config. So it would look like:
config.register_javascript 'http://tinymce.cachefly.net/4.0/tinymce.min.js'
config.register_javascript 'admin/custom.js'
Where custom.js would be located in:
app/assets/javascripts/admin/custom.js
And the contents would be your desired js code that will execute on all pages:
(function() {
tinymce.init({selector:'textarea'});
})();
I am trying to use Stylus with a Rails 4 project, but the asset pipeline seems to be naming the compiled CSS wrong and/or linking to the wrong file. If I generate some assets (rails g assets static_pages) the served pages all end up trying to link to a file that doesn't exist:
<link data-turbolinks-track="true" href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" />
I'm using the stylus gem and I've removed the default one for SASS from my Gemfile. I've also tried stylus_rails, but that seems to be deprecated and it didn't change anything anyways. Has anyone else encountered this issue when using stylus with rails?
I'm really at a loss here; any help would be appreciated. Thanks!
I'm a rails newbie trying to follow a howto on how to perform some Ajax calls (after switching to jQuery), but I've run into a problem.
Whenever I trigger the ajax code (new Ajax.Request()), I get "Ajax is not defined" in firebug. Anyone with more skills than me know what's up here?
update:
For anyone else having this problem, the code that was generating the the above code, was a call to remote_function()
What I have done to set things up:
Added "gem 'jquery-rails', '>= 1.0.12'" to my gemfile, and run bundle install
Run rails generate jquery:install
My public/javascripts/ folder thus has the following files:
application.js
jquery.min.js
jquery-ui.min.js
jquery.js
jquery-ui.js
jquery_ujs.js
The scripts included in my HTML look like this:
<script src="/javascripts/jquery.js?1312911234" type="text/javascript"></script>
<script src="/javascripts/jquery-ui.js?1312911234" type="text/javascript"></script>
<script src="/javascripts/jquery_ujs.js?1312911234" type="text/javascript"></script>
<script src="/javascripts/application.js?1312911234" type="text/javascript"></script>
I'd guess that your tutorial uses Prototype as Ajax.Request is for Prototype, you should be using $.ajax with jQuery. And switching to a jQuery based tutorial might be a good idea too.
You say that you're using remote_function but that's Prototype-specific:
Usage
To be able to use these helpers, you must first include the Prototype JavaScript framework in your pages.
Prototype used to be the default JavaScript library for Rails so I suspect that PrototypeHelper is a leftover. You probably want to look at things like the :remote option on link_to and similar for new code.
I am using Ruby on Rails 3.0.10 and I would like to auto-build and load different CSS stylesheet files depending on if I am running my application in the development or in the production mode.
I would like to auto-"minimize" CSS files for performance reasons and to load those related "minimized" files because I do not want to show to the "public audience" the content of my comments present in my CSS file (note: users can access theme, for example, by using the FireBug plugin for the Mozilla Firefox browser). I would like to do that also for javascript files.
How can I do that?
P.S.: I am planning to switch to the Ruby on Rails v3.1...
In your layout you probably have something like:
<%= stylesheet_link_tag "production.css" %>
Just add another stylesheet there but wrap it in a conditional that checks the rails environment.
<%= stylesheet_link_tag "development.css" if Rails.env.production? %>
For Rails 3.0 there are many plugins to minify your css and javascript.
I use smurf.
gem "smurf"
Part of the process of minification is that it removes comments.
In Rails 3.1 production will uglify your javascript, so comments should be removed by default.
But if you insist on using a different stylesheet, take a look at the other answer.