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.
Related
I have created 3 different html, css and javascript files but I am now confuse how can I interlink them and upload as a single file
Looks like you're just getting introduced to web development, these might come in handy for finding out how to bring your HTML, JS and CSS files together:
(Link JS File) - https://www.w3schools.com/tags/att_script_src.asp
(Link CSS file) - https://www.w3schools.com/tags/tag_link.asp
https://www.w3schools.com/
In order to make your codes to be run by browser you need to include all your sources in one .html file. You need to link those files inside this file and there are different requirement of each file extensions to be included.
In order to link CSS file you use link element with src attribute to indicate the source of your file. Another attribute rel defines the relationship between a linked resource and the current document. In here it is stylesheet document and need to get this value.
Sample: <link rel="stylesheet" href="styles.css">
In order to link your JS file, you need to use element which is used to define a client-side script (JavaScript). You may add it internally or externally. According to your question you need to add it externally. First, add your script element and then refer to it using the src attribute in the script tag.
Sample: <script src="myJSFile.js">
Resources for learning more in these topics:
https://www.w3schools.com/tags/tag_link.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
https://www.w3schools.com/tags/att_script_src.asp
To inter-link different HTML files together, you can just use Hyperlink, Hyperlinking is a feature of HTML to link multiple documents (HTML) files together. It'll show up as a button on your HTML.
Here's an example of how you can implement it. href="your-path-to-your-html"
Click here to visit school
Click here to visit inventory
Click here to visit battle
To understand more about hyperlinking, you can read this for better examples: https://www.w3schools.com/htmL/html_links.asp
I have js file and if I put <script src="link_to_file"></script> on bottom of my html page, it doesn't work.
Instead, if I put <script>function( etc..</script> on bottom of my html page, it works.
What is problem?
Try this:
HTML
bottom
<script src="external-script.js><script>
EXTERNAL JS
Add $(document).ready(function () {})
Make sure jQuery is loaded first.
Check your global variables.
Make sure that you're using the right path, that's depending om your folder structure. For example, if the js file is in the same folder as your html file, use
<script src = 'fileName.js'></script>
Do not forget to include the .js extension at the end of the file name. The file name should be same as the name of your js file.
Anyhow, you do not have to put the script in the head section as someone has suggested. It's in fact, not a good practice.
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';
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")';
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)");