how to get correct site url when using javascript

jeongwee

how to get correct url when using javascript? like you can get the url by using {link path="/"} on default.master.tpl.

I want to change the background by using javascript.

The background-image changed when the page is load, but after i go to another page , the background-image disappeared.

I use this path to set the background-image, but it won't work after i go to another page.

document.getElementById("Body").style.backgroundImage="url(themes/Elegant/design/images/nontransparent/1.png)";

I check the url from chrome ,

after loading the url is http://localhost/vanilla/themes/Elegant/design/images/nontransparent/1.png and its working.

when i go to a discussion the url become http://localhost/vanilla/discussion/1/themes/Elegant/design/images/nontransparent/1.png and its not working now.

so the background-image been broken after you go to another page.

anyone has knows how to fix it on this case?

any help would be greatly appreciated.

jeongwee

oh, my bad javascript has its way to get it by use document.location.origin.

Shadowdare

You can retrieve the root-relative path of Vanilla with gdn.url('/');. This will work even if Vanilla is in a sub-directory.

For your image, you can do:

document.getElementById("Body").style.backgroundImage = "url(" + gdn.url('/themes/Elegant/design/images/nontransparent/1.png') + ")";

"gdn" is a global library that is provided on the page by Vanilla's global.js.

jeongwee

@Shadowdare said:
You can retrieve the root-relative path of Vanilla with gdn.url('/');. This will work even if Vanilla is in a sub-directory.

For your image, you can do:

document.getElementById("Body").style.backgroundImage = "url(" + gdn.url('/themes/Elegant/design/images/nontransparent/1.png') + ")";

"gdn" is a global library that is provided on the page by Vanilla's global.js.

ty man that is usefull.