CODEWITHSUNDEEP
javascripthtmlcssnetbeans
StickyChannel 92
StickyChannel 92

Reputation: 101

How can I use JS and CSS files from another directory?

I'm making a website, with my own widget. It looks like this (called roadstuff/index.html): enter image description here Here is the code on importing my widget: JS:

$(function () {
    $("#nav-placeholder").load("server/nav.html");
});

$(function () {
    $("#shieldmaker-placeholder").load("server/shieldmaker.html");
});

HTML:

<html>
<head>
<title>Road Stuff - StickyChannel92</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="icon" type="image/x-icon" href="files/images/favicon.ico">
<link rel="canonical" href="https://stickychannel-92.com/">
<link rel="stylesheet" href="server/default.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="server/nav.js"></script>
<script src="server/shieldmaker.js"></script>
</head>
<body>
<div id="nav-placeholder">
</div>
<div id="shieldmaker-placeholder">
</div>
</body>
</html>

File directory:

htdocs (root)
 -index.html
 -404.html
 -server
  -nav.html
  -nav.js
  -shieldmaker.html
  -shieldmaker.js
 -roadstuff
  -index.html

HEAD HTML:

This whole entire setup works just fine when emulating it in NetBeans. When I copy and paste this entire setup on my InfinityFree setup, nothing happens, and just shows a blank page.

However, when I modify my code to include the JS code directly into my HTML's , nothing shows up in NetBeans, but copying it all magically works on my actual website, albeit, the Logo text shows up in the default TNR font.

I even had several moments where my 404 page shows up twice on the html page, where the navbar and widget should go, and scripts running constantly, like this: enter image description here

How can I link JS and CSS files to any site in a child directory, so that I have a navbar and the same CSS on EVERY single page of my website, while trying to fix the widget and making both setups work exactly the same?

Here is my website for investigation: stickychannel-92.com (replace htdocs with this URL if you need to look at the files above).

Expected: Both NetBeans and the real server should show the exact same results and the navbar and widget should show up properly.

Actual: Only one setup worked with either solution, cancelling the other setup. That is, NetBeans works just fine, but the website doesn't, and vice versa.

Upvotes: 0

Views: 61

Answers (0)

Related Questions