2

I have a Jekyll blog here and have implemented navigation between adjacent posts (next and previous) at the bottom of each post page. I wrote a quick script that adds a hover effect on each image.

Here is the script: 

$(document).ready(function() {
    // animate home page post links on hover
    $('.post-summary').hover(
        function() {
            $(this).animate({opacity: 1}, 100);
        },
        function() {
            $(this).animate({opacity: .7}, 100);
        }
    );
});

It works on the main page fine but when you go to another post page it does not work at all, even though it is still included in the page source.

Why is this?

adunn
  • 81
  • 1
  • 6
  • Does the 'go to another post page' involve loading content dynamically? – Taplar Mar 27 '18 at 20:31
  • Yeah I just saw the 'navigation between adjacent posts' part. I'm confident it's a duplicate. – Brandon Miller Mar 27 '18 at 20:36
  • @Taplar It is not loading content dynamically as far as I am aware. Since I am using Jekyll it creates a post page for each new post I add to the posts folder. I also added the `$(document).ready();` to try to see if that was the issue. Would that not solve it? – adunn Mar 27 '18 at 20:37
  • If any part of the script is dynamically inserting elements with the 'post-summary' class into the page, then that is the same as "loading content dynamically" – Taplar Mar 27 '18 at 20:38
  • @Taplar If this is a duplicate I am sorry, but could you link me to the post it is duplicating if so? – adunn Mar 27 '18 at 20:39
  • It's not a problem. Just wanting to make sure it's most likely the case. – Taplar Mar 27 '18 at 20:40
  • I'm not seeing your js folder on any page except 003. Open up dev tools and look at Sources under `top/blog.aadunn.ca/assets/` you'll see a `js` folder on 003, but not on any of the others. Direct navigation or not. – Alexander Kahoun Mar 27 '18 at 20:40
  • 2
    Just use CSS and drop the JavaScript – epascarello Mar 27 '18 at 20:49
  • 1
    https://jsfiddle.net/62op8v6e/3/ – epascarello Mar 27 '18 at 20:54

1 Answers1

-1

Your actual _layouts/post.html layout as layout as layout...

In fact it's a layout problem.

Actually your layout layout doesn't load your script.

Change front matter for layout: "default" and deleted include header and include footer.

Your layout layout now reads like this :

---
layout: default
---

<article class="article">
  <section class="article-cover">
    <img class="header-image" src="{{ page.headerImage }}" alt="{{ page.headerAlt }}">
    <span>
      <h3 class="post-id">{{ page.postId }}:</h3>
      <h1 class="post-title">{{ page.title }}</h1>
      <h4 class="post-date">{{ page.date | date: "%Y.%m.%d" }}</h4>
    </span>
  </section>

  <div class="content-wrapper">
    <section class="article-body center" itemprop="articleBody">
      {{ content }}
    </section>
  </div>
</article>

{% if page.next %}
  {% assign next = page.next %}
{% endif %}
{% if page.previous %}
  {% assign previous = page.previous %}
{% endif %}

<div class="next-previous">
  <ul class="adjacent-list">
    {% if page.next %}
    <li>
      <a class="post-link" href="{{ next.url | absolute_url }}">
        <div class="post-summary"
          style="background-image: url({{ next.headerImage }}); background-position: center; opacity: .7;">

          <div class="title-container">
            <h3 >{{ next.postId }}:</h3>
            <h1>{{ next.title }}</h1>
          </div>

        </div>
      </a>
    </li>
    {% endif %}

    {% if page.previous %}
    <li>
      <a class="post-link" href="{{ previous.url | absolute_url }}">
        <div class="post-summary"
          style="background-image: url({{ previous.headerImage }}); background-position: center; opacity: .7;">

          <div class="title-container">
            <h3 >{{ previous.postId }}:</h3>
            <h1>{{ previous.title }}</h1>
          </div>

        </div>
      </a>
    </li>
    {% endif %}
  </ul>
</div>
David Jacquel
  • 51,670
  • 6
  • 121
  • 147