Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Relative Paths in Javascript in an external file

So I'm running this javascript, and everything works fine, except the paths to the background image. It works on my local ASP.NET Dev environment, but it does NOT work when deployed to a server in a virtual directory.

This is in an external .js file, folder structure is

Site/Content/style.css Site/Scripts/myjsfile.js Site/Images/filters_expand.jpg Site/Images/filters_colapse.jpg 

then this is where the js file is included from

Site/Views/ProductList/Index.aspx  $("#toggle").click(function() {     if (left.width() > 0) {         AnimateNav(left, right, 0);         $(this).css("background", "url('../Images/filters_expand.jpg')");     }     else {         AnimateNav(left, right, 170);         $(this).css("background", "url('../Images/filters_collapse.jpg')");     } }); 

I've tried using '/Images/filters_collapse.jpg' and that doesn't work either; however, it seems to work on the server if I use '../../Images/filters_collapse.jpg'.

Basically, I want have the same functionallity as the ASP.NET tilda -- ~.

update

Are paths in external .js files relative to the Page they are included in, or the actual location of the .js file?

like image 311
Nate Avatar asked Feb 02 '10 22:02

Nate


People also ask

How do I create a relative path to a file?

A relative path refers to a location that is relative to a current directory. Relative paths make use of two special symbols, a dot (.) and a double-dot (..), which translate into the current directory and the parent directory. Double dots are used for moving up in the hierarchy.

How do I reference an external JavaScript file?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

Should JavaScript be in external file?

Placing scripts in external files has some advantages: It separates HTML and code. It makes HTML and JavaScript easier to read and maintain. Cached JavaScript files can speed up page loads.

What does external JavaScript file contain?

External JavaScript is when the JavaScript Code(script) is written in another file having an extension . js and then we link this file inside the <head> or<body> tag of our HTML file in which the code is to be added.


2 Answers

JavaScript file paths

When in script, paths are relative to displayed page

to make things easier you can print out a simple js declaration like this and using this variable all across your scripts:

Solution, which was employed on StackOverflow around Feb 2010:

<script type="text/javascript">    var imagePath = 'http://sstatic.net/so/img/'; </script> 

If you were visiting this page around 2010 you could just have a look at StackOverflow's html source, you could find this badass one-liner [formatted to 3 lines :) ] in the <head /> section

like image 87
Juraj Blahunka Avatar answered Oct 09 '22 02:10

Juraj Blahunka


get the location of your javascript file during run time using jQuery by parsing the DOM for the 'src' attribute that referred it:

var jsFileLocation = $('script[src*=example]').attr('src');  // the js file path jsFileLocation = jsFileLocation.replace('example.js', '');   // the js folder path 

(assuming your javascript file is named 'example.js')

like image 29
schory Avatar answered Oct 09 '22 03:10

schory