CODEWITHSUNDEEP
jqueryruby-on-rails
kylerm42
kylerm42

Reputation: 53

jQuery script not working with Rails app

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!

Upvotes: 1

Views: 249

Answers (6)

Simptive
Simptive

Reputation: 987

Enclose your click event in:

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

or

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

Upvotes: 1

Abdul Baig
Abdul Baig

Reputation: 3721

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

Upvotes: 0

Ilya
Ilya

Reputation: 49

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)

Upvotes: 0

Dominik Goltermann
Dominik Goltermann

Reputation: 4306

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.

Upvotes: 0

Cybercarnage ｼ
Cybercarnage ｼ

Reputation: 525

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

Upvotes: 1

Anil Maurya
Anil Maurya

Reputation: 2328

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 .

Upvotes: 0

Related Questions