CODEWITHSUNDEEP
htmlcssftp
K.Ward
K.Ward

Reputation: 11

HTML not working when opened from file, works from ftp server

I am trying to write html and css for a web page, but it doesn't show anything when I open the file directly from the file. It works fine when I access it through my ftp server, even from the same pc and browser. I have tried searching google for solutions, but I wasn't able to find anything

Errors image

Working image

index.html:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>

<head lang="en">
<meta charset="utf-8">
<title>Employee Page</title>
</head>

<body>
<div id="header"></div>
<br><br>
<div id="content"></div>
<div id="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
    $("#header").load("header.html");
    $("#content").load("startingContent.html");
    $("#footer").load("footer.html");
</script>
</body>
</html>

header.html

<header>
<nav id="menu">
    <img id="logo" src="Images/logo.png"  height="150" style="border: 5px solid black">
    <ul>
        <li> <a href="ftp://wtpa.ddns.net/Site/index.html">Home</a></li>
        <li> <a href="ftp://wtpa.ddns.net/Site/calendar.html">Calendar</a>
        </li>
        <li> <a href="ftp://wtpa.ddns.net/Site/contacts.html">Contacts</a>
        </li>

        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">File Server</a>
            <div class="dropdown-content">
                <a href="#">Documents</a>
                <a href="#">GameFiles</a>
                <a href="#">Videos</a>
            </div>
        </li>
    </ul>
</nav>

</header>

style.css

.menu {
width: 100%;
vertical-align:top;
height:25px;
float: top;
 }

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
font-size: 16px;
display:inline-block;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;
}

Any help is appreciated. Thanks!

Upvotes: 0

Views: 1854

Answers (3)

Bruno
Bruno

Reputation: 7191

Typical issue for local development is open content just like file in browser:

file:// ...

and then with some dynamic elements you can get error:

XMLHttpRequest cannot load file:/// ... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Solution is install web server on your local machine and open through http(s) protocol - eg. NGINX, Apache or use online service for that like WebCloud.

See woking example on http here.

I hope I helped.

Upvotes: 1

Konstantinos Koletsas
Konstantinos Koletsas

Reputation: 239

First of all, it appears that your navigation is using absolute linking.

<li> <a href="ftp://wtpa.ddns.net/Site/index.html">Home</a></li>
<li> <a href="ftp://wtpa.ddns.net/Site/calendar.html">Calendar</a>
</li>
<li> <a href="ftp://wtpa.ddns.net/Site/contacts.html">Contacts</a>
</li>

Furthermore, you can bring up you console, see what parts of your website refuse to load at all and change the routing.

EDIT

You cannot load these resources clearly for security reasons. Running pages through file:// protocol have disabled a lot of features because security issues. You can always create a javascript server using Node.js and host it locally without installing apache or something similar.

https://nodejs.org/en/

Upvotes: 0

kostas.kapasakis
kostas.kapasakis

Reputation: 1142

Try to check if the other files are in the same folder with index.html. The problem probably is that it cant find locally the other files. To be sure you can copy all the files in a directory(for example Desktop) and then try again.

Upvotes: 0

Related Questions