Accessing path in javascript (concrete5)

Question

I am building a template for concrete5. The problem I am facing is that I have to access the css path from a javascript file. The plugin which has to do this uses:

breakpoints: {
        'global': { range: '*', href: '/css/style.css', containers: 0, grid: { gutters: 0 } }
    }

The file I am trying to access is located at

domain.com/application/themes/test/css/style.css

and not at

domain.com/css/stlye.css

Kinda stuck with my beginner javascript skills at this point. The console gives me the error 404 for the file. Makes sense since the style.css file is not located where I am searching it..

The js file is located at:

domain.com/application/themes/test/js/init.js

How can I access the style.css file?

And what exactly is your question? It is not clear exactly what you want help with or how one would get the right info to construct an appropriate path. — jfriend00, Nov 08 '14 at 20:17
Is `domain.com/application/themes/test` known in advance or do you have to get that from somewhere? — jfriend00, Nov 08 '14 at 20:18

score 1 · Answer 1 · edited May 23 '17 at 12:05

If domain.com/application/themes/test is known in advance, then it appears that you can just do this in Javascript:

var path = "http://domain.com/application/themes/test" + breakpoints.global.href;

If you need to load that style file once you have the path, then you this answer shows you how to do that (you construct a <link> tag with that path in it and add that to the <head> section.

var path = "http://domain.com/application/themes/test" + breakpoints.global.href;
$('head').append('<link rel="stylesheet" href="' + path + '" type="text/css" />');

score 0 · Accepted Answer · answered Nov 08 '14 at 20:27

I believe using the path below should work.

  /application/themes/test/css/style.css

placing the / in front of the url will make the browser look in the main folder first. That is why you were getting "domain.com/css/stlye.css" when you placed the url "/css/style.css" in your object.

So I would try the following changes to your object to see if it works:

 breakpoints: {
    'global': { range: '*', href: '/application/themes/test/css/style.css', containers: 0, grid: { gutters: 0 } }
}

Accessing path in javascript (concrete5)

2 Answers2