Passing site url to loaded javascript?

Kirby 2 Solved ✅
1

sigh to make a long story short… I’m using a template that uses skel.js version 1.0 which loads stylesheets dynamically based on screen size. (And apparently no real documentation.) This works great… until you go to a child page and suddenly the urls to the stylesheets are no longer valid.

Is there any (good) means of passing the $site->url() to a javascript script that gets loaded externally in a header tag?

I’ve spent a few too many hours trying to research this tonight and I’m not making any progress, so I guess any advice would be helpful. Thanks much.

2

Could you post the code you’re using, along with what you’re hoping to achieve? If you want to insert a javascript file then the easiest way is via

<?php echo js('assets/js/site.js') ?>

However, I get the impression you’re trying to configure something…

3

You could set a global variable in a script tag and echo the page url with php in there. Just make sure the script is located before your javascript files.

4

Did you try to use…

<base href="<?php echo $site->url() ?>">

…?

5

Oh, right. The code.

I can call the JS file just fine, but the JS file is then calling the CSS file, as the window size changes. Here’s the first few lines of the script from the template: (EDIT: so this code is from assets/js/skel.js, and I’m calling it with <?php echo $site->url() ?> so loading the script works everywhere.)

(function($) {
skel.init({
	reset: 'full',
	breakpoints: {
		
		// Global.
			global: {
				range: '*',
				href: 'assets/css/style.css',
				containers: 1400,
				grid: {
					gutters: {
						vertical: '4em',
						horizontal: 0
					}
				}
			},

		// XLarge.
			xlarge: {
				range: '-1680',
				href: 'assets/css/style-xlarge.css',
				containers: 1200
			},
etc...

So this code works when I’m at site.com, but when I’m at site.com/blog/2015/blog-page, the script is looking for site.com/blog/2015/assets/css/style.css

The most common suggestion I am seeing online is to add a variable with the base url. I’ve attempted that… or… well, I’ve attempted to attempt that, but I haven’t been able to get it to work.

6

I have not used skel.js so far, but maybe it helps if you add a slash in front of the CSS file paths, like so:

(function($) {
skel.init({
	reset: 'full',
	breakpoints: {
		
		// Global.
			global: {
				range: '*',
				href: '/assets/css/style.css',
				containers: 1400,
				grid: {
					gutters: {
						vertical: '4em',
						horizontal: 0
					}
				}
			},

		// XLarge.
			xlarge: {
				range: '-1680',
				href: '/assets/css/style-xlarge.css',
				containers: 1200
			},
etc...
7

Okay. Solved. This worked, I don’t remember what I was doing last night… but whatever it was, the Javascript variable wasn’t in the right spot, but it is now and it works. Thanks everyone.