jQuery script not working with Rails app

Question

I just started a small Rails app, and right now I have only one static page that I'm trying to add a smooth scroll effect for links to anchors on that page. You can see the site at http://kylerm42.herokuapp.com. I noticed that the script is being included, so I know it's not being left out. When I put that static page along with the jQuery into JSFiddle, everything works as it should. But it won't have that effect on my local machine or production. Here's the link for that: http://jsfiddle.net/YtJcL/478/

The jQuery was found in an answer here on SO, and here is the code for that:

$(".scroll").click(function (event) {
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
    dest = $(document).height() - $(window).height();
} else {
    dest = $(this.hash).offset().top;
}
//go to destination
$('html,body').animate({
    scrollTop: dest
}, 1500, 'swing');
});

My guess is that some default Rails file is interfering, but I'm not experienced enough yet to know where to look. It could also very well be a simple mistake I made somewhere along the way. Any help is appreciated! Thanks!

Simptive · Accepted Answer · 2014-02-13 09:13:58Z

1

Enclose your click event in:

jQuery(function(){
   //here
});

or

$(document).ready(function(){
  //here
});

answered Feb 13, 2014 at 9:13

Simptive

1,0079 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kylerm42 Over a year ago

The second one is what I needed. Almost too easy to miss. I should have known this. Thanks!

Cybercarnage ｼ · Accepted Answer · 2014-02-13 08:07:46Z

1

Did you try to check if your script is connected to the application? Add simple log to your script, and check your browser console.

console.log('Houston we have a problem!');

If you didn't see nothing, it seems your script not connected in application.js in assets folder

I check you code, it works.

If you have separate script: myscript.js try to add it in application.js

//= require ./where_is_your_script/myscript

or

//= require myscript

UPD: for test I added your code to application.js without $(document).ready and its work, but don't do it at home

answered Feb 13, 2014 at 8:07

Cybercarnage ｼ

5257 silver badges16 bronze badges

Comments

Anil Maurya · Accepted Answer · 2014-02-13 08:06:56Z

0

you didn't call your scroll function on page load , you should include this jquery in $(document).ready function .

I executed this function on your site , and its working .

answered Feb 13, 2014 at 8:06

Anil Maurya

2,3281 gold badge24 silver badges29 bronze badges

Comments

Dominik Goltermann · Accepted Answer · 2014-02-13 08:08:07Z

0

my guess is that script is loading before the elements with the class .scroll are loaded.

either wrap your code in $(document).ready(function() { ..code...}); so that it executes after the dom is ready or change it from $(".scroll").click(function (event) { to $(document).on("click", ".scroll", function(event) { ....

The second one works because it intercepts all click events on the document and checks if the target has the class .scroll. So that even works if additional .scroll elements appear on the page after the script has been executed.

answered Feb 13, 2014 at 8:08

Dominik Goltermann

4,3062 gold badges28 silver badges33 bronze badges

Comments

Ilya · Accepted Answer · 2014-02-13 08:10:21Z

0

Why so complicated?

$(function() {
    if(window.location.hash && $(window.location.hash).css('display') == 'block'){
        destinator = $(window.location.hash).offset().top;
        $('body, html').animate( { scrollTop: destinator }, 1100 );
    }

    $('.scroll').click(function(){
        if( $(this).attr('data-to') > window.height())
        destinator = $(window.location.hash).offset().top;
        $('body, html').animate( { scrollTop: destinator }, 1500 );
    })
})

The first condition checks the hash tag, if it is then scrolls to that block. The second function is activated when clicked and the "ID" attribute of the block takes "data-to".

sorry for my bad english)

answered Feb 13, 2014 at 8:10

Ilya

494 bronze badges

Comments

Abdul Baig · Accepted Answer · 2014-02-13 08:15:37Z

0

Does it works fine in development mode? if so then confirm it that environment/production.rb contains

  # Disable Rails's static asset server (Apache or nginx will already do this).
  config.serve_static_assets = false

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true

  # Generate digests for assets URLs.
  config.assets.digest = true

answered Feb 13, 2014 at 8:15

Abdul Baig

3,7413 gold badges23 silver badges48 bronze badges

Collectives™ on Stack Overflow

jQuery script not working with Rails app

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related