Change base path for relative and absolute path - javascript

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

Related

Change HTML page with Javascript but keep path unchanged

I want to use Javascript to open an HTML page which is in a sub-folder, but continue to have the path relative to my top level files. I have the code below and the HTML link works before the page is changed but not afterwards, because everything is then relative to the sub-page. If I click on the link after the page has been changed, it tries to open 'myFolder/myPage.html' which of course does not exist:
.. in HTML
My Page Link
.. in javascript
var pageInFolder = 'myFolder/mySubPage.html';
window.location.href = pageInFolder;
I could change my links to have absolute paths, but is there a way to display the page in the folder, but keep the path unchanged at my top level?
You can use the HTML <base> tag. It lets you define where paths are relative to.
Something like:
<base href="http://www.example.com">
It is recommended that you put the base tag as the first tag inside the <head> so all paths in your file appear after it. With my example, even if you're in myFolder, any relative path will refer to http://www.example.com/myPage.html, not http://www.example.com/myFolder/myPage.html
Note though, this doesn't just apply to <a href="">. It applies to images, JavaScript files, CSS files, etc. Anything where you'd use a path.
Just add / at the beginning of your relative paths
var pageInFolder = '/myFolder/mySubPage.html';

relative path to images in external js script

I'm writing a component in Joomla and want to use JavaScript.
I got the JavaScript part working in a separat test html page, but now I want to include it in the Joomla component.
The problem is the relative file paths for the images. The images are stored in the media folder of joomla:
media/com_component/images
I include the external js-file with this command:
$document->addScript(JURI::Root().'components/com_component/script.js');
In the script I need the path to the image folder. I don't want to hard code the absolute path in the script.
How can I get the relative paths? Do/can I use Joomla functions for that?
Thank you
I chose to put the file path information in the css file (set the image as the background of the link).
This way the js-script is independent of the image's file path.

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")';

Change background image url

I am trying to change the background of the input button when clicked by using jquery but for the life of me, can't figure out the relative path to make it work.
js file is in root/js folder
css file is in root/css folder
My code looks like this:
jQuery($button).css('background',"url(../images/updating_button.gif)");
But this just doesn't work...it can't find the image with that path. if I use absolute path it works obviously but i really need it to be relative.
I have tried all combination that I know like:
/images/updating_button.gif
..images/updating_button.gif
images/updating_button.gif
updating_button.gif
If the URL is static, you could declare a class with the background and maintain your relative path.
In your CSS:
.updating { background: url(../images/updating_button.gif); }
In your JS:
jQuery($button).addClass('updating');
You are aware that paths in any inline styles (whether set with JS or not) will be relative to the current HTML document (the URL on the browser's URL bar), not any other file, right?
And why are you avoiding absolute (or domain-relative) URLs?
I wish I could test this for you, but I've had some issues with the url property in the past; adding single quotes inside the url() has proved to be the most reliable with relative paths.
jQuery($button).css('background',"url('../images/updating_button.gif')");
Also, what does your file structure look like?
The following code might be useful for you:
jquery("button").css("background-image","url(menubar/ajax-loader.gif)");

Categories

Resources