Backstretch-Rails JS Stopped Working
Yametazamwa mara 42
Ruka hadi kwenye ujumbe wa kwanza ambao haujasomwa
David Williams
1 Jan 2015, 12:18:4501/01/2015
kwa rubyonra...@googlegroups.com
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
https://github.com/socialreferral/backstretch-rails
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"):
<script>
$(document).ready(function() {
$.backstretch([
"<%= image_tag '1.png' %>"
, "<%= image_tag '2.png' %>"
, "<%= image_tag '3.png' %>"
], {duration: 3000, fade: 750});
});
</script>
</body>
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.
--
Posted via http://www.ruby-forum.com/.
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
https://github.com/socialreferral/backstretch-rails
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"):
<script>
$(document).ready(function() {
$.backstretch([
"<%= image_tag '1.png' %>"
, "<%= image_tag '2.png' %>"
, "<%= image_tag '3.png' %>"
], {duration: 3000, fade: 750});
});
</script>
</body>
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.
--
Posted via http://www.ruby-forum.com/.
Jason Fleetwood-Boldt
1 Jan 2015, 12:27:3501/01/2015
kwa rubyonra...@googlegroups.com
Asset pipeline doesn't work like this... check out the Asset pipeline guide. you don't load your jquery libraries this way:
> <script type="text/javascript" src="jquery.backstretch"></script> <=
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/2f68359d4fc6beb52f6f1acbdbb44da8%40ruby-forum.com.
> For more options, visit https://groups.google.com/d/optout.
>
----
Jason Fleetwood-Boldt
te...@datatravels.com
http://www.jasonfleetwoodboldt.com/writing
All material © Jason Fleetwood-Boldt 2014. Public conversations may be turned into blog posts (original poster information will be made anonymous). Email ja...@datatravels.com with questions/concerns about this.
> <script type="text/javascript" src="jquery.backstretch"></script> <=
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/2f68359d4fc6beb52f6f1acbdbb44da8%40ruby-forum.com.
> For more options, visit https://groups.google.com/d/optout.
>
----
Jason Fleetwood-Boldt
te...@datatravels.com
http://www.jasonfleetwoodboldt.com/writing
All material © Jason Fleetwood-Boldt 2014. Public conversations may be turned into blog posts (original poster information will be made anonymous). Email ja...@datatravels.com with questions/concerns about this.
Hassan Schroeder
1 Jan 2015, 12:33:1101/01/2015
kwa rubyonrails-talk
On Thu, Jan 1, 2015 at 9:18 AM, David Williams <li...@ruby-forum.com> wrote:
> 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.
Uh, how about *you* create a test app that demonstrates the issue
> 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.
and make it available?
--
Hassan Schroeder ------------------------ hassan.s...@gmail.com
http://about.me/hassanschroeder
twitter: @hassan
David Williams
1 Jan 2015, 12:39:1201/01/2015
kwa rubyonra...@googlegroups.com
Jason Fb wrote in post #1165836:
>> their demo.
"jquery.backstretch" %> But, still it doesn't fire off.
<script type="text/javascript">
$.backstretch([
"http://dl.dropbox.com/u/515046/www/outside.jpg"
, "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
, "http://dl.dropbox.com/u/515046/www/cheers.jpg"
> Asset pipeline doesn't work like this... check out the Asset pipeline
> guide. you don't load your jquery libraries this way:
>
>> <script type="text/javascript" src="jquery.backstretch"></script> <=
>
>
>
>>
>> $.backstretch([
> guide. you don't load your jquery libraries this way:
>
>> <script type="text/javascript" src="jquery.backstretch"></script> <=
>
>
>
>>
>> their demo.
>> To view this discussion on the web visit
>
https://groups.google.com/d/msgid/rubyonrails-talk/2f68359d4fc6beb52f6f1acbdbb44da8%40ruby-forum.com.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
> ----
>
> Jason Fleetwood-Boldt
> te...@datatravels.com
> http://www.jasonfleetwoodboldt.com/writing
>
> All material © Jason Fleetwood-Boldt 2014. Public conversations may be
> turned into blog posts (original poster information will be made
> anonymous). Email ja...@datatravels.com with questions/concerns about
> this.
I tried to call the js file using <%= javascript_include_tag
>
https://groups.google.com/d/msgid/rubyonrails-talk/2f68359d4fc6beb52f6f1acbdbb44da8%40ruby-forum.com.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
> ----
>
> Jason Fleetwood-Boldt
> te...@datatravels.com
> http://www.jasonfleetwoodboldt.com/writing
>
> All material © Jason Fleetwood-Boldt 2014. Public conversations may be
> turned into blog posts (original poster information will be made
> anonymous). Email ja...@datatravels.com with questions/concerns about
> this.
"jquery.backstretch" %> But, still it doesn't fire off.
<script type="text/javascript">
$.backstretch([
"http://dl.dropbox.com/u/515046/www/outside.jpg"
, "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
, "http://dl.dropbox.com/u/515046/www/cheers.jpg"
], {duration: 3000, fade: 750});
</script>
Jason Fleetwood-Boldt
1 Jan 2015, 12:48:1901/01/2015
kwa rubyonra...@googlegroups.com
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 http://guides.rubyonrails.org/asset_pipeline.html
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.
David Williams
1 Jan 2015, 12:59:2401/01/2015
kwa rubyonra...@googlegroups.com
Jason Fb wrote in post #1165839:
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.
> 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
>
> probably want to load the application.js as instructed by the Gem
> instructions
>
> Jason Fleetwood-Boldt
> te...@datatravels.com
> http://www.jasonfleetwoodboldt.com/writing
>
> All material © Jason Fleetwood-Boldt 2014. Public conversations may be
> turned into blog posts (original poster information will be made
> anonymous). Email ja...@datatravels.com with questions/concerns about
> this.
I have a question, will placing this function inside of the
> te...@datatravels.com
> http://www.jasonfleetwoodboldt.com/writing
>
> All material © Jason Fleetwood-Boldt 2014. Public conversations may be
> turned into blog posts (original poster information will be made
> anonymous). Email ja...@datatravels.com with questions/concerns about
> this.
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.
David Williams
1 Jan 2015, 13:14:5701/01/2015
kwa rubyonra...@googlegroups.com
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
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
David Williams
1 Jan 2015, 14:45:5301/01/2015
kwa rubyonra...@googlegroups.com
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!
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!
Jason Fleetwood-Boldt
1 Jan 2015, 15:37:5501/01/2015
kwa rubyonra...@googlegroups.com
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.
--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
To post to this group, send email to rubyonra...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/babdb2a70af6242e32cd8cf803bb1a79%40ruby-forum.com.
For more options, visit https://groups.google.com/d/optout.
----
David Williams
1 Jan 2015, 16:46:2701/01/2015
kwa rubyonra...@googlegroups.com
I was told that adding the file to the assets.rb precompiler is really
no different than adding it to the application.js
Rails.application.config.assets.precompile += %w(
backstretch-landing-index.js )
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.
no different than adding it to the application.js
Rails.application.config.assets.precompile += %w(
backstretch-landing-index.js )
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.
Jason Fleetwood-Boldt
2 Jan 2015, 11:59:5502/01/2015
kwa rubyonra...@googlegroups.com
> On Jan 1, 2015, at 4:46 PM, David Williams <li...@ruby-forum.com> wrote:
>
> I was told that adding the file to the assets.rb precompiler is really
> no different than adding it to the application.js
>
> Rails.application.config.assets.precompile += %w(
> backstretch-landing-index.js )
>
> 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.
David Williams
2 Jan 2015, 12:13:0102/01/2015
kwa rubyonra...@googlegroups.com
Jason Fb wrote in post #1165885:
don't mass configure to run throughout the entire app.
>> On Jan 1, 2015, at 4:46 PM, David Williams <li...@ruby-forum.com> wrote:
>>
>> I was told that adding the file to the assets.rb precompiler is really
>> no different than adding it to the application.js
>>
>
>
> That is not correct. Who told you that?
>
>>
>> I was told that adding the file to the assets.rb precompiler is really
>> no different than adding it to the application.js
>>
>
>
> That is not correct. Who told you that?
>
> It sounds like your app is pretty small. The benefits of the Asset
> Pipeline are for apps that have much more javascript
I'm adding a lot more JavaScript, but that will be the only file I
> Pipeline are for apps that have much more javascript
don't mass configure to run throughout the entire app.
Jibu wote
Mjibu mchapishaji
Sambaza
Ujumbe 0 mpya