I am trying to use a plugin called Shuffletext to give my text a shuffling effect that iterates through different strings. this is the code for it (just have it in the .erb file while trying to get it how to work cause its easier)
<div id="wrapper"></div>
<script type="text/javascript">
$('#wrapper').ShuffleText([
'Hello world !',
"I'm a jquery plugin",
"I like to <strong>shuffle text</strong> !"
],{loop: true, delay: 5000, shuffleSpeed: 50});
</script>
In a simple folder that just has a .html file and the plugin file it works fine, but when I put it into ruby it throws me this error
home:24 Uncaught TypeError: $(...).ShuffleText is not a function
at home:24
I've been trying for a few hours to try and fix this and I am stumped, any help is really appreciated, here is a link to the plugin if it helps
https://github.com/Nyl000/ShuffleText
I suppose, you didn't plug in this library correctly. I didn't find a gem that integrates this plugin into Rails asset pipeline, so you should put plugin file into vendor/assets/javascripts directory. Just copy shuffletext.jquery.js to this folder.
Then you can either add //= require shuffletext.jquery.js to manifest file (usually it's app/assets/javascripts/application.js) after jQuery, or manually add javascript_include_tag 'shuffletext.jquery' to required pages.
If you decided to require plugin in manifest, you can use it on every page where the manifest is plugged. Usually it is plugged in layout, so all pages that use this layout will have it.
If you decided to use javascript_include_tag, you also should add Rails.application.config.assets.precompile += %w( shuffletext.jquery.js ) to your config/initializers/assets.rb file. In this case you will get your plugin only on those pages where you have specified javascript_include_tag.
Related
Specifically, I am trying to add a video player to my web app..
The javascript manifest file has in it:
//= require bitmovinplayer.min
//= require bitmovinplayer-core.min
//= require bitmovinplayer-controls.min
and in the css manifest:
#import "bitmovinplayer-core.min";
#import "bitmovinplayer-controls.min";
When viewing the concatenated .js file after asset compilation, I see that these files are there properly getting included.
However, when attempting to instantiate a player, there are 404s which I see in the console:
vendor-d8cd0ac….js:38 GET https://myapp.com/assets/bitmovinplayer-core.min.css
vendor-d8cd0ac….js:38 GET https://myapp.com/assets/bitmovinplayer-core.min.js
So apparently this player code is adding html that with src attributes that is pointing to files that are not accessible-- because they are available in the main js & css files generated from the manifest.
So I thought by manually adding these files to the assets precompile array, this would solve the problem.............
config.assets.precompile += [
'bitmovinplayer-core.min.css',
'bitmovinplayer-core.min.js',
]
However, after doing this and precompiling, I still cannot go to:
/assets/bitmovinplayer-core.min.css
I have to go to:
/assets/bitmovinplayer-core.min-78b88b860ccc407fd131639914ecd692.css
Which is no good.. I need to be able to access this asset without the hash in the url.
How do I do this?
the issue here is that whenever Rails precompiles an asset through the asset pipeline it appends a hash to the files to improve caching. Since bitmovin-player expects these files to be named in a certain way by default it will run into a 404 error.
There is however a configuration setting that lets you override the paths bitmovin-player will load these files from as documented here.
location : {
html5 : '<%= asset_path('bitmovinplayer-core.min.js') %>',
css : '<%= asset_path('MY_CSS_FOLDER/bitmovinplayer-core.min.css') %>',
flash : '/bitmovinplayer.swf',
vr : '<%= asset_path('bitmovinplayer-vr.min.js') %>',
ctrls : '<%= asset_path('MY_JS_FOLDER/bitmovinplayer-controls.min.js') %>',
ctrls_css: '<%= asset_path('MY_CSS_FOLDER/bitmovinplayer-controls.min.css') %>'
}
Unfortunately there is no way at the moment to tell the player that all files are bundled together into one and it should not reload any js/css. So until then you need to add each individual file to the config.assets.precompile list.
If you don't really need to use the self-hosted player, I wrote a Rails gem yesterday that makes embedding and configuring the bitmovin-player quite a bit easier. You can check it out on GitHub. I am thinking about adding the self-hosted option to the gem - but at the moment don't have time to go into that. (The helper for embedding the player still works if you remove the <%= bitmovin_player_script %> that gets added to the head of the page.
Hope this helps.
I have a working edit view to which I'm trying to add CKEditor. I've downloaded the CKEditor folder/files and placed them in my_app/vendor/assets/ckeditor/. I'm using Rails 4 and this folder is included in the asset pipeline. To application.js I've added //= require ckeditor.js and to application.css #import "contents";.
In my edit view I have (I'd like to use the inline option):
<%= f.text_area :page, contenteditable: 'true' %>
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'image_page' );
</script>
Problem: Now when loading the edit view, the text field is not displayed as an editable field but just as plain text. There's no way to edit this text and no sign of CKEditor. Any idea what I'm doing wrong?
The page's source code that is being generated, includes:
<textarea contenteditable="true" name="image[page]" id="image_page">
Arbor cubo vel.
</textarea>
<script>
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'image_page' );
</script>
Update: I got it working by moving the CKEditor files from the vendor folder to the public folder. Could someone perhaps confirm whether or not CKEditor is compatible with the asset pipeline?
I would prefer to place it in the vendor folder if anyway possible. This old post as well as this one refer to something similar (if I place <% var CKEDITOR_BASEPATH = '/ckeditor/'; %> as a header line in application.html.erb my app crashes with the error dynamic constant assignment '.freeze). Could someone with more experience with CKEditor provide a more definitive answer than these old posts?
Try adding the ckeditor assets under either vendor/assets/javascripts for the JavaScript files and vendor/assets/stylesheets for the CSS files (separate the ckeditor assets among those folders)
The whenever an asset is referring to another asset use the asset-url helper instead of url so that this asset is served through the asset pipeline
You also need to include all the assets that you'll put in vendor.... folders in the asset pipeline by //require or import
On a side not you can use the ckeditor gem https://github.com/galetahub/ckeditor it will save you a lot of time also it handles some features out of the box like images upload and gallery of ckeditor
May be the script is executing before the textarea is fully loaded on the DOM. Try to use a post load wrapper to your script like the jquery's:
$(function(){
// ... your code
})
I've recently had a trouble making Galleria plugin work with Rails 4 Pipeline and it took me a while to figure out how to make it work, so I wanted to share the solution in case somebody has the similar problem.
1) After downloading the plugin, put galleria-1.3.3.js ( it's the current version on the day I write it ) and galleria.classic.js ( or other style js file ) to vendor/assets/javascripts
2) Put galleria.classic.css ( or other theme stylesheet) to vendor/assets/stylesheets
3)Add //= require galleria-1.3.3 and //= require galleria.classic to your application.js file and *= require galleria.classic to application.css file
4) Asset pipeline adds fingerprints to the images and that makes it difficult to access them via usual css, so it's needed to add 'scss' to your galleria stylesheet, like this galleria.classic.css.scss and change url(classic-map.png) to asset_url("classic-map.png");and the same with the second image.
5)Open galleria.classic.js file and find there css:"galleria.classic.css" or something like that, and change it to css: false
6) Now you just need to add Galleria.run('#galleria'); or something different for other elements in some js file` and that should work :)
PS I am a noob in Rails and might have made some foolish mistakes, but I hope this will be helpful for anybody :)
I've just used this in Rails 4.1 as well with Galleria version 1.3.5. Copy the files from the main galleria folder into the various parts. Note that I'm using the classic/default (free) theme.
# app/assets/images
classic-loader.gif
classic-map.png
# app/assets/javascripts
galleria-1.3.5.js
galleria.classic.js
# app/assets/stylesheets (rename with .scss extension)
galleria.classic.css.scss
Open up galleria.classic.js and edit the line css: '...' to be css: false (around line 17 if you don't alter the code).
That's all I had to do in order to get it working with Rails 4. I played around with placing the files in the vendor/assets folders, but that became a nightmare fairly quickly. I found the above solution to be the simplest/cleanest.
Update: 2016-02-02
I'm still using this same setup with a Ruby 2.2.3, Rails 4.2.4, Galleria 1.4.2 setup.
Make sure in your galleria.classic.scss stylesheet you use the image-url("classic-map.png") helpers. No problems with this current setup.
Thank you this was absolutely amazing and exactly what I needed (I wish I'd found this before the 18 hours of hair pulling trying to get this to freaking work)!
I'll add some more things that might be helpful to whomever:
1) I had to change to galleria.css.scss.erb, so that it would interpolate the class-loader like this: background: url(<%= asset_path "/galleria/classic-loader.gif" %>) (not sure why, but the asset_url didn't work for me)
2) Related, I also had to take the classic-map and loader images and put them in app/assets/images
3) Per Galleria, the files I moved were the min.js files, not regular .js
4) In the header of the view, I added:
<script src="<%= asset_path "/galleria-1.3.5.min.js" %>" ></script>
<script src="<%= asset_path "/galleria.flickr.min.js" %>" ></script>
<script src="<%= asset_path "/galleria.classic.min.js" %>" ></script>
5) In the script on each view to load Galleria, I modified their instructions like such:
Galleria.loadTheme("<%= asset_path "/galleria.classic.min.js" %>");
I'm a bit confused as to where to put a jQuery framework like Galleria in Rails 3.1's new Asset Pipeline?
I know it, technically, should go into /vendors/assets/javascripts but, it is my understanding that, the Galleria folder with the jQuery & themes wants to be in root (/galleria) of the live site in order to work correctly.
Also, while we're at it, where to put the following script so it will appear only on the page(s) with a gallery?
<script>
$('#gallery').galleria({
width:500,
height:500
});
</script>
Edit: Surprised there's no response!?! Maybe Galleria isn't that popular? These are the files I'm trying to load. They are bundled like this though I could easily move them:
vendor/
assets/
javascripts/
galleria-1.2.5.js
galleria-1.2.5.min.js
galleria/
themes/
classic/
classic-loader.gif
classic-map.png
galleria.classic.css
galleria.classic.js
galleria.classic.min.js
i thought Sprockets require_tree . would load everything in app/assets, lib/assets and vendor/assets?!?
I had the same problem, and it took a while to get working. Initially, it would work fine on development, but when we moved to production, Galleria silently failed, due to the asset filenames now having "fingerprints". This also seems to be an issue with jQuery UI themes, and many other such scripts.
Of course, you could just go back to the old way of doing things and throw everything in "public", but we would like the advantage of automatically merging all css/js files, and doing things the rails way.
This is how I got it working:
vendor/
assets/
images/
classic-loader.gif
classic-map.gif
javascripts/
galleria-1.2.5.js
galleria.classic.js
stylesheets
galleria.classic.css.scss
Rename your galleria.classic.css file to galleria.classic.css.scss. Then replace the image references, like so (I had two):
url("classic-loader.gif") becomes image-url("classic-loader.gif")
UPDATE: It looks like you don't need to do this in Rails 3.1.1. Just rename the file to .css.scss and rails will automatically preprocess the url() calls for you.
In your app/assets/javascripts/application.js file, make sure you have the lines
//= require galleria-1.2.5
//= require galleria.classic
//= require_tree .
In you app/assets/stylesheets/application.css file, make sure you have the lines
*= require galleria.classic
*= require_tree .
Finally, Galleria seems to have some fancy non-standard css loading built in. This is what was preventing Galleria from loading on our production website. Since we have already included the stylesheet, we want to disable this behavior. Simply open up galleria.classic.js (or your Galleria theme javascript file), and replace the line:
css: 'galleria.classic.css',
with:
css: false,
This will tell Galleria not to try loading the stylesheet.
One more thing - when trying to compile these assets, I ran into what is apparently a bug in Rails 3.1.0. When I ran rake assets:precompile, I got errors like:
$ bundle exec rake assets:precompile
rake aborted!
classic-loader.gif isn't precompiled
(in /vendor/assets/stylesheets/galleria.classic.css.scss)
Long story short, you need to set this line in config/environments/production.rb:
config.assets.compile = true
This shouldn't be necessary once 3.1.1 is released.
I like Arjen's suggestion, though I think vendor/assets/libs is more appropriate. Here's my setup:
In config/application.rb
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/vendor/assets/libs"
In app/assets/javascripts/application.js
//= require galleria/galleria-1.2.6.min.js
To initialize:
Galleria.loadTheme('assets/galleria/themes/classic/galleria.classic.min.js');
$('#gallery').galleria();
Notice how the path passed to loadTheme() begins with 'assets'.
I like this setup because it keeps the galleria folder intact. Also, it concatenates galleria-1.2.6.min.js onto my main js file (one less http request).
I've also stumbled upon this problem. Dividing up an existing library so it fits into the current javascripts/stylesheets structure is a bit of a hassle. Therefor you can add an extra path to your application.rb file to load assets from, like this:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/libs"
Create a 'libs' folder under app/assets, copy the galleria library to this folder and add this to your application layout file:
<%= javascript_include_tag 'galleria/galleria-1.2.4.min.js' %>
<%= javascript_include_tag 'galleria/themes/classic/galleria.classic.min.js' %>
You could also bundle up the galleria code by requiring the js files, but that's up to you.
How do I use CSS with RoR? When I link externally, I'm never able to see the files. I cp'd the .css file to every folder I could think of...views, controller, template, and nothing seems to work.
What do I need to do to enable external CSS files with a rails application? I'm new to rails, so forgive me if this is basic.
Put the CSS files in public/stylesheets and then use:
<%= stylesheet_link_tag "filename" %>
to link to the stylesheet in your layouts or erb files in your views.
Similarly you put images in public/images and javascript files in public/javascripts.
If you are using rails > 3 version, then there is a concept called asset pipeline. You could add your CSS to
app/assets/stylesheets
then it will automatically be picked up by the app. (this is useful as rails will automatically compress the CSS files)
read more here about the asset pipeline
Use the rails style sheet tag to link your main.css like this
<%= stylesheet_link_tag "main" %>
Go to
config/initializers/assets.rb
Once inside the assets.rb add the following code snippet just below the Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( main.css )
Restart your server.
I did the following...
place your css file in the app/assets/stylesheets folder.
Add the stylesheet link <%= stylesheet_link_tag "filename" %> in your default layouts file (most likely application.html.erb)
I recommend this over using your public folder. You can also reference the stylesheet inline, such as in your index page.
The original post might have been true back in 2009, but now it is actually incorrect now, and no linking is even required for the stylesheet as I see mentioned in some of the other responses. Rails will now do this for you by default.
Place any new sheet .css (or other) in app/assets/stylesheets
Test your server with rails-root/scripts/rails server and you'll see the link is added by rails itself.
You can test this with a path in your browser like testserverpath:3000/assets/filename_to_test.css?body=1
To add to the above, the most obvious place to add stylesheet_link_tag is in your global application layout - application.html.erb.
With Rails 6.0.0, create your "stylesheet.css" stylesheet at app/assets/stylesheets.
Have you tried putting it in your public folder? Whenever I have images or the like that I need to reference externally, I put it all there.