Help needed working out why my JS and CSS isn't loading

1

Hi all, I’ve been working with a Jekyll theme by HTML5up but I’m having issues with the JS and CSS. Some of it loads but some doesn’t by the looks of it. The “main” styles are there but not the styles for smaller screen sizes. The JS also doesn’t seem to load at all, which I think is where the problem lies because the JS is where the CS styles are loaded I think.

There’s a skel.min.js file that seems to load the CSS which I’ve never seen before. It has this function at the start:

(function($) {

	skel.init({
		reset: 'full',
		breakpoints: {
			global:		{ range: '*', href: '{{ site.baseurl }}/css/style.css', containers: 1400, grid: { gutters: 50 } },
			wide:		{ range: '-1680', href: '{{ site.baseurl }}/css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
			normal:		{ range: '-1280', href: '{{ site.baseurl }}/css/style-normal.css', containers: 960, viewport: { scalable: false } },
			narrow:		{ range: '-980', href: '{{ site.baseurl }}/css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
			narrower:	{ range: '-840', href: '{{ site.baseurl }}/css/style-narrower.css', grid: { collapse: 1 } },
			mobile:		{ range: '-736', href: '{{ site.baseurl }}/css/style-mobile.css', containers: '100%', grid: { gutters: 15, collapse: 2 } }
		}

The style and script tags are in a head include which seems fairly standard and looks like this:

<head>
    <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="{{ site.description }}">
    <meta name="keywords" content="" />
    <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
    <script src="{{ site.baseurl }}/js/jquery.min.js"></script>
    <script src="{{ site.baseurl }}/js/jquery.dropotron.min.js"></script>
    <script src="{{ site.baseurl }}/js/jquery.scrolly.min.js"></script>
    <script src="{{ site.baseurl }}/js/jquery.scrollgress.min.js"></script>
    <script src="{{ site.baseurl }}/js/skel.min.js"></script>
    <script src="{{ site.baseurl }}/js/skel-layers.min.js"></script>
    
    <link rel="stylesheet" href="{{ site.baseurl }}/css/skel.css" />
    <link rel="stylesheet" href="{{ site.baseurl }}/css/style.css" />
    <link rel="stylesheet" href="{{ site.baseurl }}/css/style-wide.css" />
    <link rel="stylesheet" href="{{ site.baseurl }}/css/style-noscript.css" />

    <!--[if lte IE 8]><link rel="stylesheet" href="/peoples-project/css/ie/v8.css" /><![endif]-->
    <!--[if lte IE 9]><link rel="stylesheet" href="/peoples-project/css/ie/v9.css" /><![endif]-->
    <meta name="viewport" content="width=device-width">

    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
</head>

I’m really not sure what the problem is and I’ve ran out of ideas in terms of how to fix it or even how to troubleshoot it. I’d be really grateful if anyone had any ideas. The source code is here and the live site is here.

2

I think your js is broken because your init.js file doesn’t have front matter yet it has liquid code in it.

Try adding the the 2 rows of 3 dashes to the top of that file so jekyll will process it.

1 Like
3

Thanks for the tip! I added the dashes but it doesn’t seem to have any effect.

4

I don’t see that particular js file being used anywhere, maybe you need to add it into your head include
?

1 Like
5

I would recommend against making a .js liquid file

even if you do add frontmatter to the JS then you also have to set a null layout and have to be careful the page doesn’t appear in sitemap and navbar etc.

Rather make .html includes file with script tag and load it in your head

<head>
  {% include my-snippet.html %}
</head>

Or make it .js file if you must.

I recommend against mixing JS and Liquid because sometimes JS looks like liquid. And it makes it hard to debug and format and test your JS.

Rather make a non liquid function that takes a param like in your case baseurl

function setup(baseurl) {

}

And that can be in assets/main.js with no frontmatter

Then call it in head after the script is loaded

E.g.

<script>
  const BASEURL = "{{ site.baseurl }}"
  setup(BASEURL)
</script>
6

I tried adding init.js to the head but still no change

7

Thanks for the tips. For now I will remove the liquid from the JS and just hard code the baseurl variable. My main focus is on getting the JS/CSS to work but I’ll come back to this later.

1 Like
8

the browser dev tools are your friend, in chrome right click on the page and select Inspect, then change to the Console tab and it will show you any errors - now you have:

Uncaught ReferenceError: jQuery is not defined
at init.js:125

1 Like
9

I think that was just because of the order of the script tags. I’ve reordered them so that jQuery is loaded first and there is no longer an error.