I successfully got the JS functioning on the index page with the url
provided in the example for the gem. But, the javascript didn’t run for
images in my assets folder and it stopped working when I refreshed the
page using the array to add multiple images. I’m using
application.js
//= require ‘jquery.backstretch’
Here’s just a layout of my code
--Underneath final
--
<=
fires off ActionController::RoutingError (No route matches [GET]
"/jquery.backstretch.js"):
Disclaimer: The console does show Backstretch being loaded. But, the
background only changed once, and that was with the url provided on
their demo.
If you can try to duplicate the problem with a test app. That might give
me a clue and lead to a real solution. Thank you.
Are you having this problem in development or production?
Where did you put the jquery.backstretch.js file
you probably don’t want to load that file from your layout, you
probably want to load the application.js as instructed by the Gem
instructions
did you read the Asset Pipeline Guide and make sure you have a solid
understand of how it works? You appear to not be following the basic
guidelines outlined in The Asset Pipeline — Ruby on Rails Guides
Also I think if you’re not targeting below IE 9 you can use the
background-size: 100% css property to do what that jQuery plugin does
without any javascript at all.
I have a question, will placing this function inside of the
application.js override the layout throughout the entire app? Or can I
call the backstretch.js for different pages? I’m really using this gem
just to get the carousel background effect for the index landing page.
The instructions says to bundle install and add //= require statement to
the application.js. Which is what I did. I may use the gem again for
pages other than the index to call backgrounds with one line of code. My
original setup involved using css to cover the entire background with a
fixed image.
After adding it to the application.js file. It changed backgrounds for
the entire application. I wish there was a way to constrain this
function to fire only on the pages that I need to be on
I got it working. I had to remove the require statement from the
application.js and add the file to assets pipeline directly. I also
created a separate javascript file for the home page only. Now, it only
shows on one page!
Generally you make a core set of javascript available site-wide, however
you don’t execute the javascript site-wide (so I would move the actually
call you make to the jquery plugin into a place where it is executed
only on pages you want it executed).
Loading via the asset pipeline in a production, correctly concatenated
gzipped, especially if you set up a CDN correctly, is exponentially
faster than loading every Javascript library one-by-one in the browser.
That’s why the Asset Pipeline was invented.
After adding it to the application.js file. It changed backgrounds for
the entire application. I wish there was a way to constrain this
function to fire only on the pages that I need to be on
There’s lots of ways to do that.
I got it working. I had to remove the require statement from the
application.js and add the file to assets pipeline directly. I also
created a separate javascript file for the home page only. Now, it only
shows on one page!
No this is not the correct way to do it and probably won’t work on your
live website. Unless it is very large, I would recommend you loading the
jquery file itself on every page but the restricting the Javascript that
actually execute that particular method to only the pages you want it to
fire on. There are several good patterns for doing that. I explored one
of them in this blog post of mine from a few months ago:
(See the section “CSS Scoping Pattern #2”)
Finally, what you’ve basically done is said, “Instead of learning the
Asset Pipeline, I’m just going do re-invent the wheel and do things my
own way.”
This strikes me as a behavior pattern that will be challenging for you
as to learn more Rails.
Even though this method isn’t perfect, I’m still able to control which
views are being effected by the plugin. The original method effected all
controllers. I would have needed to block the script like you said on
all views with the pattern that you’re using.
Even though this method isn’t perfect, I’m still able to control which
views are being effected by the plugin. The original method effected all
controllers. I would have needed to block the script like you said on
all views with the pattern that you’re using.
It sounds like your app is pretty small. The benefits of the Asset
Pipeline are for apps that have much more javascript