Rails styles persisting between pages

Question

I'm creating a book-reading app. Every book has_many pages. I have links going from one page to the next by clicking on the left and right halves of the pages. When you hover over the edge of the page, a div (acting as a link) floating over the page changes its opacity as an indicator that there is another page. These divs are img-prev and img-next

Here's an example of the hover effect on the right-half of the page:

The problem is that after clicking to the next (or previous) page, the opacity of the subsequent img-prev or img-next div for that new page is very briefly still its "dark" color, before changing back to fully transparent. I have a feeling this has to do with turbolinks, but I am not sure.

app/views/pages/show.html.erb

    <%= stylesheet_link_tag 'pages' %>

    <div id="div-image-wrapper">
      <% if @page.picture.attached? %>

        <% if @page.previous_page.present? %>
          <%= link_to @page.previous_page do %>
            <div id="img-prev"></div>
          <% end %>
        <% end %>

        <%= image_tag @page.picture, class: "img-fluid", id: "img-page" %>

        <% if @page.next_page.present? %>
          <%= link_to @page.next_page do %>
            <div id="img-next"></div>
          <% end %>
        <% end %>

      <% end %>
    </div>

app/assets/stylesheets/pages.scss

    #container-main {
      max-width: 100vw;
      text-align: center;
    }

    #div-image-wrapper {
      position: relative;
      display: inline-block;
    }

    #img-prev {
      background-color: black;
      position: absolute;
      opacity: 0.0;
      width: 50%;
      height: 100%;
      top: 0;
      left: 0;
    }

    #img-next {
      background-color: black;
      position: absolute;
      opacity: 0.0;
      width: 50%;
      height: 100%;
      top: 0;
      right: 0;
    }

    #img-page {
      max-height: 80vh;
    }

app/assets/javascripts/pages.js

    $(document).on('turbolinks:load', function() {
        if ($('#img-prev').length) {
            $('#img-prev').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }

        if ($('#img-next').length) {
            $('#img-next').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }
    });

The only clue I have is that if I force my img-prev and img-next links to ignore turbolinks, the problem goes away, but a full page refresh is done on every page which is less than ideal. The code for that looks like this:

app/views/pages/show.html.erb (alternate)

    <%= stylesheet_link_tag 'pages' %>

    <div id="div-image-wrapper">
      <% if @page.picture.attached? %>

        <% if @page.previous_page.present? %>
          <%= link_to @page.previous_page, "data-turbolinks": false do %>
            <div id="img-prev"></div>
          <% end %>
        <% end %>

        <%= image_tag @page.picture, class: "img-fluid", id: "img-page" %>

        <% if @page.next_page.present? %>
          <%= link_to @page.next_page, "data-turbolinks": false do %>
            <div id="img-next"></div>
          <% end %>
        <% end %>

      <% end %>
    </div>

Not sure if it is relevant, but I should mention I have this line added to my config/initializers/assets.rb:

Rails.application.config.assets.precompile += %w( pages.css )

Also, the full sourcecode of this application can be found here on my Github: https://github.com/tliss/lianhuanhua

Answer 1

I changed the following two files to have the opacity reset after clicking the link and it solved the problem without forcing a full-page refresh. It required adding ids to the tags:

app/assets/javascripts/pages.js

    $(document).on('turbolinks:load', function() {
        if ($('#img-prev').length) {
            $('#img-prev').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }

        if ($('#img-next').length) {
            $('#img-next').hover(function() {
                $(this).fadeTo(300, 0.3);
            }, function() {
                $(this).fadeTo(300, 0);
            });
        }

        $('#img-next-link').click(function(){
            $('#img-next-link').css('opacity', 0);
            $('#img-prev-link').css('opacity', 0);
        });

        $('#img-prev-link').click(function(){
            $('#img-next-link').css('opacity', 0);
            $('#img-prev-link').css('opacity', 0);
        });
    });

app/views/pages/show.html.erb

    <%= stylesheet_link_tag 'pages' %>

    <div id="div-image-wrapper">
      <% if @page.picture.attached? %>

        <% if @page.previous_page.present? %>
          <%= link_to @page.previous_page, id: "img-prev-link" do %>
            <div id="img-prev"></div>
          <% end %>
        <% end %>

        <%= image_tag @page.picture, class: "img-fluid", id: "img-page" %>

        <% if @page.next_page.present? %>
          <%= link_to @page.next_page, id: "img-next-link" do %>
            <div id="img-next"></div>
          <% end %>
        <% end %>

      <% end %>
    </div>