3

I have an external Javascript page located under ../Scripts/CBox/ folder from parent. There is an image located in the same folder. I want to set background-image for a control using Jquery from there. When I use this code, It sets the background-image path as localhost:7905/ddl_arrow.png where localhost:7905 is my asp.net development server.

 function createAutoCBox(boxCtrl) {

    $(boxCtrl).css('background-image', 'url("ddl_arrow.png")'); 
    $(boxCtrl).css('background-repeat', 'no-repeat');
    $(boxCtrl).css('background-position-x', '99%');
    $(boxCtrl).css('background-position-y', '-2px'); 
    $(boxCtrl).mousemove(jqAutoCompleteMouseMove);
    $(boxCtrl).keyup(jqAutoCompleteKeyUp);
    $(boxCtrl).mousedown(jqAutoCompleteMouseDown);
}
Amirhossein Mehrvarzi
  • 18,024
  • 7
  • 45
  • 70
Yesudass Moses
  • 1,841
  • 3
  • 27
  • 63

3 Answers3

1

You'd be better off doing this:

CSS

.my-background {
    background-image: url("ddl_arrow.png");
    background-repeat: no-repeat;
    background-position-x: 99%;
    background-position-y: -2px;
}

JQuery

$(boxCtrl).addClass('my-background');

CSS will always understand paths from itself to the image folder, so if your structure was:

/images
/css

the background-image path would be:

../images/ddl_arrow.png

Going up one level with the .. then into the sibling directory images to get the file. You can put this anywhere and it will work.

Worth noting that using css for the styles rather than adding them in JQuery is easier to re-use (just add .my-background to the HTML where you need it). It also makes things a bit nicer to maintain as there isn't style info in your functional files - the you of the future (or your team-mates) will thank you for it.

And, background-position-x / background-position-y are not standard and so cannot be relied on everywhere background-position: x-value y-value is better for now.

Community
  • 1
  • 1
Toni Leigh
  • 4,830
  • 3
  • 22
  • 36
1

There is no way to "get current script's path on the server", since JS is done on the client-side. So there is no easy way to do what you are thinking of.

There are only ways to work around this, and all of them are based on the same principle: organise your files properly - each resource should be an URL. Think about it: if you cannot reliable tell where ddl_arrow.png is stored, neither can the browser.

I think the best solution is to put all images inside an [img] folder from the server root. This means you can reference images this way: url(/img/ddl_arrow.png). No matter which JS, which CSS or HTML file needs the images, make sure they always reference the images with a preceding slash. Of course, this applies not only for images, but all other assets/resources - fonts, videos, audio, and even the HTML, CSS, JS files themselves. Basically every file that your server serves should be referenced this way.

There are other hacks involving nasty, messy stuff like using server-side scripts to print the location of the JS file that is being fetched right into the JS file, but I'd recommend to stay far away from these methods.

light
  • 4,157
  • 3
  • 25
  • 38
0

Try:

$(boxCtrl).css('background-image', 'url("./Scripts/CBox/folder/ddl_arrow.png")');
Sajal
  • 4,359
  • 1
  • 19
  • 39