Relative Paths in Javascript in an external file

Question

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    gt  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

User · Answer

Good question    When in a CSS file  URLs will be relative to the CSS file  When writing properties using JavaScript  URLs should always be relative to the page  the main resource requested     There is no tilde functionality built-in in JS that I know of  The usual way would be to define a JavaScript variable specifying the base path    lt script type  text javascript  gt     directory root    http   www example com resources     lt  script gt     and to reference that root whenever you assign URLs dynamically

User · Answer

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

User · Answer

A  proper solution is using a css class instead of writing src in js file  For example instead of using     this  css  background    url     Images filters collapse jpg        use     this  addClass  xxx      and in a css file that is loaded in the page write    xxx     background-image url     Images filters collapse jpg

User · Answer

You need to add runat  server  and and to assign an ID for it  then specify the absolute path like this    lt script type  text javascript  runat  server  id  myID  src    js jquery jqGrid js  gt  lt  script gt    From the codebehind  you can change the src programatically using the ID

User · Answer

Please use the following syntax to enjoy the luxury of asp net tilda       in javascript   lt script src  lt   Page ResolveUrl    MasterPages assets js jquery js    gt  gt  lt  script gt

User · Answer

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    lt script type  text javascript  gt     var imagePath    http   sstatic net so img     lt  script gt    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  lt head   gt  section

User · Answer

For the MVC4 app I am working on  I put a script element in  Layout cshtml and created a global variable for the path required  like so    lt body gt    lt script gt      var templatesPath     Url Content    Templates       lt  script gt    lt div class  page  gt       lt div id  header  gt           lt span id  title  gt            lt  span gt       lt  div gt       lt div id  main  gt             RenderBody        lt  div gt       lt div id  footer  gt           lt span gt  lt  span gt       lt  div gt   lt  div gt

User · Answer

I used pekka s pattern  I think yet another pattern    lt script src   lt     Url Content    Site Scripts myjsfile js     gt  root  lt     Page ResolveUrl    Site images     gt   gt    and parsed querystring in myjsfile js   Plugins   jQuery Plugins

User · Answer

This works well in ASP NET webforms   Change the script to   lt img src      imagePath    chevron-large-right-grey gif  alt           I have a master page for each directory level and this is in the Page Init event    Dim vPath As String   ResolveUrl    Images        Dim SB As New StringBuilder     SB Append  var imagePath       amp  vPath  amp             ScriptManager RegisterClientScriptBlock Me  Me GetType     LoadImagePath   SB ToString  True    Now regardless of whether the application is run locally or deployed you get the correct full path  http   localhost 57387 Images chevron-large-left-blue png

User · Answer

I found this to work for me        lt script gt  document write unescape   3Cscript src      window location protocol                   window location host          js general js ver 2  3E 3C script 3E    lt  script gt    between script tags of course     I m not sure why the script tags didn t show up in this post

[javascript] Relative Paths in Javascript in an external file

Examples related to javascript

Examples related to html

Examples related to asp.net-mvc

Examples related to css

Examples related to path