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
<body>
--Underneath final <Div> --
<script type="text/javascript" src="jquery.backstretch"></script> <=
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.
1) Are you having this problem in development or production?
2) Where did you put the jquery.backstretch.js file
3) 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
4) 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
5) 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, isexponentially 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:
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
![http://dl.dropbox.com/u/515046/www/outside.jpg"](http://dl.dropbox.com/u/515046/www/outside.jpg"){kind=link}
![http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"](http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"){kind=link}
![http://dl.dropbox.com/u/515046/www/cheers.jpg"](http://dl.dropbox.com/u/515046/www/cheers.jpg"){kind=link}