Smart linking for resources? - javascript

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

Related

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

Javascript image changer: MDN Javascript basics

I'm going through the web development guide on the Mozilla Developer Network, and in the JS basics section, I came across this example:
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}
When I worked out this example, although it did execute as expected, I have a question about the image path. Here's my file structure:
My question is: when working with images in html, if the present .html file would be in a folder called pages, along side with other sibling folders as images, scripts, etc, the file structure I would have followed in this case to reach an image would be so: ../images/filename.jpg. The .. would be used to reach the main(root) folder from the pages folder, then access the images folder from there.
How does this image changer example work then, without the .. being used? The file here main.js is in a sub-folder of the root.
How does this image changer example work then, without the .. being
used?
It works because the js file doesn't live alone, it is included in an HTML file, and that HTML file happens to be in the root folder.
The JavaScript is adding the new image path to the <img> node on the html page. All it's doing is inserting some information onto the page, it doesn't know anything about images.
The browser sees that something on the DOM has changed, so it reads the new src attribute, downloads the image, and repaints.
As the path is written to the html page, it's relative to where that page is. It doesn't matter that JS inserted it.

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

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

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