Converting Javascript to Coffeescript

Question

How to change this javascript to coffeescript?

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
});

I tried this code in my rails project,but it doesn't work

$(document).on 'page:change', ->
$('a[href^="#"]').click (event) ->
    event.preventDefault()

    target = this.hash
    $target = $(target）

    $('html, body').stop().animate{
        'scrollTop': $target.offset().top
    }, 900,
     'swing', ->
        window.location.hash = target

Do I have something wrong?

Offhand, it looks like you're missing the return statements at the end of each block. But yes, online JS to CoffeeScript converters are your friend. — MarsAtomic
– MarsAtomic, Commented Mar 8, 2016 at 6:35
@MarsAtomic in coffee you can skip return because CoffeeScript returns the last line. The mistake in the 2nd line, because author lost a whitespace and code looks like $(document).on('page:change', function() {}); // .. instead $(document).on('page:change', function() { //.. . Second mistake is here animate{ - lost whitespace again. Remember that сoffee uses significant whitespace to delimit blocks of code. — artiebits
– artiebits, Commented Mar 8, 2016 at 7:01

Lela Jennings · Accepted Answer · 2016-05-11 00:04:16Z

I think this will work:

$(document).ready ()=>
  $('a[href^="#"]').on 'click', (e)=>
    e.preventDefault()
    target = @hash
    $target = $(target)
    $('html, body').stop().animate scrollTop:$target.offset().top, 900, 'swing', ()=>
      window.location.hash = target

You asked if you've did something wrong, so here's a couple of things to keep in mind (sorry if this is obvious to you already):

The first line of your CoffeeScript version is completely different than the JavaScript version. (document.ready vs. document.on('page-change'))
CoffeeScript is whitespace-sensitive. I don't know if its just the StackOverflow formatting or in your actual code, but without leading spaces in your second line, the callback passed to $(document).on 'page:change', -> is a no-op. In other words, the Javascript version would be $(document).on('page:change', function(){});
Similarly, the spaces that indent lines 9 (the one that starts with 'scrollTop') and 11 (the one that starts with 'swing') are likely to cause problems also.

Collectives™ on Stack Overflow

Converting Javascript to Coffeescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related