Button not clickable, only after scrolling page

Ruby on Rails
1

Hi,

For my latest Rails project, I’m using the One Page Scroll plugin, to give the homepage one page scroll features.

This is the script in my view template that implements the onepage_scroll function:

$(document).ready(function() {

  $(".main").onepage_scroll({
     sectionContainer: "section", 
     easing: "ease",
     animationTime: 1000,
     pagination: true,
     updateURL: false
  });
...
});

This works, so far so good. The problem however, is that I have to implement a button in the first section, that, when clicked makes the page scroll to the third section.

The markup for the button looks like this:

<button class="project">Ontdek het project</button>

I implement the moveDown(); method that get’s fired on the button click event:

  $(".project").on("click", function(event) {
    event.preventDefault();
    $(".main").moveDown();
    $(".main").moveDown();
  });

The problem I have right now, is that the button is not clickable when the page loads. Only when I scroll the page, the button get’s clickable and the moveDown() method fires after the button is clicked.

I’m not sure right now if this is a Turbolinks issue, or if my jQuery-code is problematic.

The code for my homepage can be accessed in my Git repository:

thanks for your help,

Anthony

2

Hey Anthony… I know this is an opinion so take it as such, but that project hasn’t been updated in 6 months, has 137 open issues and 45 open pull requests. Not a sign I enjoy seeing in open source projects that I want to integrate into my projects. I would say contribute, but that seems to be a dead end road as well with the pull requests.

My guess is that the scrolling does not get activated until a listening event happens. You can watch the developer console to see if there are any errors happening in your js. Also disable turbolinks (or rip it out completely) and see if it fixes the problem, this will let you know if it is turbolinks related. This is probably just an issue with the plugin and not turbolinks, but trial and error.

3

Hi Frank,

Thanks for your reply. First I tried another jQuery plugin called fullPage.js , but I got issues with the styling (sections stacking upon each other). That’s why I decided to use the One Page Scroll plugin. Maybe I should reimplement the fullPage.js plugin again, as I found a way now to solve the styling issues.

In a previous project, I used the jquery-turbolinks gem to solve Turbolinks issues with my jQuery plugins, but then that had an effect on other Javascript scripts (one of them the responsive menubar from Bourbon Refills).

Up till now, Turbolinks seems to cause nothing but problems when implementing jQuery plugins into my Rails projects.

greetings,

Anthony

4

Hey @acandael_acanda, I’ve been able to get around the jquery/turbolinks issues by listening to the page:load event that turbolinks fires when the new page is ready. Example:

ready = -> Do things

$(document).ready(ready)
$(document).on('page:load', ready)

Also, fwiw the last (and only) scroll jacking site that I worked on I chose to use fullpage.js and it seemed to work well for me.

Cheers!

–

Edit: Here are all of the events that turbolinks will emit GitHub - turbolinks/turbolinks-classic: Classic version of Turbolinks. Now deprecated in favor of Turbolinks 5.

5

Hi, Sean, yeah, tried that, but it didn’t solve the issue. In the meantime I followed you and Frank’s advice and switched back to fullPage.js, now everything is working … phew!

1 Like