I recently implemented a "related posts" javascript feature at the bottom of my Hubspot blog content post template (replacing the default "previous / next" feature). The result works fine on some blog posts, but messes up the layout of others.
The layout issue is the blog's sidebar. It's set to be sticky, but on the problem pages, it ends up at the bottom of the page. If I add an extra div to the end of my "related posts" javascript, it fixes the sidebar issue on the problem pages, but breaks it on the working pages.
The only commonality I've found is that *most* of the broken pages contain an embedded video. However, there are a few exceptions to the rule. Furthermore, when I remove the embedded video from a broken blog post, it doesn't fix the issue – and vice versa, I can embed a video into a working blog post and it doesn't break it.
I'm noticing that your side bar on the working pages is inside the "content-wrapper" container while it is not in the broken pages. I'm not sure how you template is set up.
You may be right that some other javascript is interfering. Your sticky javascript is not at the bottom of your page and it is not wrapped in a document ready function to keep it from firing until the after the page loads so it makes sense. It would be especially telling if, on any of the pages, refreshing multiple times caused varying results.
I would:
1. move your main-clean.js to the absolute bottom of your page. Let it be the last script read, right before the body tag.
2. Wrap the code inside the main-clean.js file in a document ready function:
$(document).ready(function(){
/** Code Here ***/
});
I'm noticing that your side bar on the working pages is inside the "content-wrapper" container while it is not in the broken pages. I'm not sure how you template is set up.
You may be right that some other javascript is interfering. Your sticky javascript is not at the bottom of your page and it is not wrapped in a document ready function to keep it from firing until the after the page loads so it makes sense. It would be especially telling if, on any of the pages, refreshing multiple times caused varying results.
I would:
1. move your main-clean.js to the absolute bottom of your page. Let it be the last script read, right before the body tag.
2. Wrap the code inside the main-clean.js file in a document ready function:
$(document).ready(function(){
/** Code Here ***/
});
