Develop Reference

Change base path for relative and absolute path

My goal is deploy my website without change all paths more times. The situation is this:
EXAMPLE PATH
index.aspx
template.master
--Folder
----img.jpg
----pageInFolder.aspx
My template have script and css src as absolute "/js/main.js" and "/css/main.css", in this way the "pageInFolder.aspx" can get the js and css from the correct path, but the images path in the page "pageInFolder.aspx" are relative "img.jpg".
All is obiouvsly correct, but if I want test online the site in a subfolder of the root it can't work properly.
I want to set a subfolder as the root path, but only in the subfolder context, how can I do ?
Remember that it is only for testing the site online, I want the fastest solution without change all the path.

It's actually strange to mix relative and absolute path.
Try to put all of them in absolute using a base folder let say "test" in order to have this
test
-index.aspx
-template.master
--Folder
----img.jpg
----pageInFolder.aspx

set css image from current folder using jquery script page

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);
}

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.

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.

Try:
$(boxCtrl).css('background-image', 'url("./Scripts/CBox/folder/ddl_arrow.png")');

Only Absolute Paths Work With Jquery When Dynamically Setting An Image While Using Django Static Files

I have some jquery code that toggles an active vs. inactive image for a button when a user clicks it. It works fine when I just run everything from windows statically with relative paths.
However, once I migrated it to my django dev box clicking the button will fail to load the desired image if I set a relative path to it through jquery. All other static images are serving fine through css with relative paths, but if I set the relative path through jquery on document load, for instance, it doesn't work. I've confirmed through inspect element that the paths are the same and jquery is setting them correctly.
After trying various relative paths for 20 minutes, I found out that setting the absolute path of the development server works, i.e. "url('http://127.0.0.1:8000/static/img/img.jpg'). I'd like to get relative paths working as this method has its limitations with flexibility and deployment.
Am I running into a limitation of django static file serving? Did I find a bug? Or is there something I'm missing?
Thanks in advance!

I don't know Django, but one approach when your server-side framework gives you a root path is to export that into JavaScript in the main document:
<script>
templateRootPath = {{% static "path to your template dir" %}}
</script>
and to then use where appropriate:
$('#mybutton').css('background,"url('"+templateRootPath+"/img/img.jpg')");

Smart linking for resources?

I have a somewhat annoying issue... I have a JS function which toggles the image of an element on a certain event (click). This function is executed on multiple pages.
In the js, I have a like that goes like so:
img.style.backgroundImage = 'url(../assets/img.png)';
Everything works perfectly fine when the function is being called from a file that exists in a different folder... Folder structure is like so:
/project
/assets
/html
/js
index.html
Notice the index file sitting the parent folder? When I execute the function from this index.html file, the images can't be found (Since the JS is looking outside the parent folder thanks to the '../'), but it works for all other pages inside the html folder, since the relative path finding will go out to the parent folder, and then into assets...
Anyway I can make this smart without having to resort to other completely different approaches? I know I can just rely on some CSS here, add and remove classes to toggle images instead of directly changing the image source...
Its odd though, the relative path works from css where the css behaves as the anchor for the path finder... But if you use JS to change the css property, the html file becomes the anchor...

img.style.backgroundImage = 'url("assets/img.png")';

Make the path relative to site NOT the current page or style sheet.
When including a relative url in CSS the url is relative to CSS's url, which is I assume is in the assets folder.
img.style.backgroundImage = 'url("/assets/img.png")';

Prevent put absolute paths in javascript for css files

I am using javascript and somethimes a cretain js file need specific css file made for it.
I want to prevent put absolute paths of the css files in javascript.
I even want to put the js file in the same folder of the css file.
But the path of the js file is calculated from the file that executes it.
How can I connect between this js file and the css file?

There is no perfect solution to this.
One of the solutions that come to mind is to analyze (using DOM) the script tags on page to find out the path that was used to load script itself, then calculate path relative to this.
Other solution is to use js combiner and css combiner and just always load all js and css needed for site.

But the path of the js file is calculated from the file that executes it
This is not always true. Just start the path with a forward slash and it will be relative to your root web directory e.g.
<link type="text/css" rel="stylesheet" href="/path/to/style.css" />

You can declare one global variable holding the "relative" path than use it whenever you need to specify file path. Example:
<script type="text/javascript">
var _relPath = "MyFolder/CSS";
...
function SomeFunc() {
var cssFileName = _relPath + "/myfile.css"; //instead of MyFolder/CSS/myfile.css
}
...
</script>
This way it's easier to change.
If you have server side language in use e.g. ASP.NET, classic ASP, PHP - you can output the relative path of the current page let us know if relevant.

It would be simpler just to define the needed CSS within the JavaScript file, if you absolutely need to link the CSS and JavaScript together. You can make a HTML page use CSS files dynamically from JavaScript by adding new link tags, but to my best knowledge, there is no way to specify the paths relative to the JavaScript file.
However, one thing you could do is this. First have each HTML file specify the script root path relative to that file, like:
<script type="text/javascript">
var jsPath = "relative_to_this_file/styles_and_scripts/"
</script>
<script type="text/javascript"
src="relative_to_this_file/styles_and_scripts/styler.js">
</script>
and having the styler.js code do this:
var myStylePath = jsPath + "myStyle.css"
// add link tag for the CSS to HTML here using myStylePath
You could also generate absolute paths in JavaScript or in code that is serving the JavaScript dynamically in a similar fashion. If the root part of the absolute path changes, you only need to adjust a single line of code accordingly.
Alternatively, you could also consider a different strategy: link the CSS files statically from your HTML pages, and use classes in your CSS selectors (.myClass { float: left; } ). Then you can easily use JavaScript to add new classes to the HTML tags you want to style.