Set css image from current folder using jquery script page
I have an external Javascript page located in a folder ../Scripts/CBox/
from the parent. The image is in the same folder. I want to install background-image
to be controlled using JQuery. When I use this code it sets the path background-image
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);
}
source to share
There is no way to "get the current script path on the server" because the JS is executed on the client side. Thus, there is no easy way to do what you think you are.
There are only ways to get around this, and they are all based on the same principle: organize your files correctly - every resource must be a URL. Think about it: if you can't reliably tell where it is stored ddl_arrow.png
, neither the browser can be.
I think the best solution is to put all images inside the [img] folder from the server root. This means that you can refer to the image in this way: url(/img/ddl_arrow.png)
. No matter what JS, what CSS or HTML file needs images, make sure they always link to images with a preceding slash. Of course, this applies not only to images, but to all other resources / resources - fonts, videos, audio, and even HTML, CSS, JS files. Basically every file that your server serves should be listed this way.
There are other hacks out there that contain nasty, dirty things like server side scripts to print the location of the JS file that is extracted directly to the JS file, but I would recommend staying away from these methods.
source to share
You would 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 images folder, so if your structure was:
/images /css
background image path:
../images/ddl_arrow.png
Go up one level with ..
, then into the sibling directory images
to get the file. You can put this anywhere and it will work.
It's worth noting that using css for styles rather than adding them to JQuery is easier to reuse (just add .my-background
in HTML where you need it). It also makes things a little nicer as there is no style information in your function files - you the future (or your teammates) will be grateful to you.
And background-position-x
/ background-position-y
not standard and therefore cannot be relied upon everywhere background-position: x-value y-value
. Now it is better.
source to share