As said in the instructions at the site ViewerJS Instructions, I tried to embed my file like http://localhost/site/ViewerJS#../docs/mydoc.pdf
But this is not working.
My document is in the dir like
/docs/mydoc.pdf and a link like http://localhost/site/docs/mydoc.pdf is working perfectly. In href, I usually put docs/mydoc.pdf and that works. In the same way, as said in the instructions, my document is not loading.
Any help is appreciated.
The solution is simple. Move the ViewerJS to the root directory of the site. Everything is working perfectly.
So, the viewer is accessible like
http://localhost/site/ViewerJS/#../docs/mydoc.pdf
Related
The element is selected properly because other properties apply. There are no console errors.
I have tried:
img/hero.jpg - works when I click on link in VS Code
/img/hero.jpg - works when I click
../../hero.jpg - work when I click
../img/hero.jpg - doesn't work
the full path - works when I click
The problem is seen here. You can see that images called by the src attribute work.
Here is the file structure.
I honestly don't understand your setup / question, but I think if you understand how relative URLs work a little better you can figure it out yourself.
On your server you have your files in somewhere like,
/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png
On your computer you have your files somewhere like,
C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png
And in your styles.css you have something like this,
body {
background-image: url('/img/background.png');
}
Starting the URL with / tells the browser to interpret it as the root directory. On a Windows PC it will be C:\ and on a Linux PC it'll be /.
However, when you access the page once it is online from a url like https://example.com, the root directory becomes https://example.com/.
Therefore, using /img/background.png will make it look for the image at https://example.com/img/background.png once it is online, but on your local machine it'll be looking for the image at C:\img\background.png
Starting the url without the slash like this, img/background.png looks for the image relative to the folder that the css file is in. So in that case online it'll look for the background here at https://example.com/css/img/background.png and on your local machine it'll look in C:\Users\Nani\Desktop\Website\css\img\background.png
In my example, the best solution would be to use ../img/background.png, that'll look up one directory relative to the css folder, and then in the img folder. That'll work consistently on both your own computer and once it is uploaded.
That should be enough to figure out what you need to do assuming that the problem is the way the url path is declared. Otherwise, the problem might be with something else. For example, it seems like you're using SCSS. Perhaps the SCSS isn't compiled on your local machine (or hasn't been in a while), but it is compiled on the live server?
It works on live server because its settings make location of index.html a root of your document (/). When you open index.html directly your root is different and images aren't loaded from correct location if you start the path with /.
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
I had the same problem and it turns out that I wrote the path wrongly. You have to write the url based on where the css file is, not where the index file is. Because the one that reads the url is the css file. So it should look like this:
body {background-image: url('../img/background.png');}
Because your CSS and your IMG are in different folders.
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
When I reference a .pdf in my webpage, the file doesn't open when I click on the link. I referenced the .pdf with the full path and the file is in the www folder.
When I hover over the link online, I can see that the link is to my .pdf on file but it doesn't open.
What am I doing wrong?
Thanks (HTML newbie)
Edit 1 - reference:
Filename
Edit 2:
I tried the local links extension and it still isn't opening. I also tried <a href="http://www.example.com/myfile.pdf"> and I get a 403 Forbidden error.
Modern browsers block links to file:// URLs from pages that aren't themselves on a file:// URL, and in the same directory tree.
This is a security feature. There are workarounds that you can install locally so it works on one specific computer. See this Mozillazine article.
Sorry - I don't have the rep to comment. But it looks like your ref structure could be wrong.
Try something like:
<a href="http://www.example.com/myfile.pdf">
UPDATE: Hmmm?
Have you tried just:
<a href="myfile.pdf">
Also, I found this which (while not directly relevant) has some discussions and links that may assist: How to set height on PDF file when linked to from HTML?
^^ Ignore that - it really is more related to how the pdf opens.
FURTHER:
I am assuming the pdf file name has no spaces in it. I also assume you have a local pdf viewer.
So I had a look at a random website which had a pdf link as an example. When clicked, it opened the pdf in a new tab. I am on chrome.
You may be able to use that to figure out what is wrong.
Here is the page: http://www.staff.uwa.edu.au/procedures/communications/media/uwanews
Looking at the pdf for the first listed file, this was their link:
Issue-10-December-2014 [PDF File, 2.0 MB]
It looks like path should be enough, but you might want to add the target="_blank" to open in a new tab.
Maybe also see this, which shows that users set how a pdf is opened - perhaps the settings on your end need to be set up: How to open link to pdf file in new tab using html
Anyway, I wish you the best. Post your answer when figure it all out.
Usually when I download sites with Httrack I get all the files; images, CSS, JS etc. Today, the program finished downloading in just 2 seconds and only grabs the index.html file with CSS, IMG code etc inside still linking to external. I've already reset my settings back to default but doesn't help. Anyone know how to change it back to function properly?
Does the site have a robots.txt and you're honouring that in your settings?
If it does, you can turn it off in "Options/spider/spider: Never" (according to this article)
I have made my first website and in the preview in Safari and Chrome from Dreamweaver it works fine. But after uploading my files with Filezilla to 000webhost and typing in the URL, only the index page loads, links to other pages on the site don't work, images are broken and the css isn't applied.
I'm think it is because I haven't named the files correctly in the code, but I have no idea what to call them in order to get it right.
The file you upload to is public_html. So I've tried http://www.webaddress/public_html/Pages/entertainment.html but it didn't change anything.
Thanks for any help!
Without code examples it's very difficult to answer this, but it's probably just that your URL format is incorrect.
For example, if you've got example.com/example/example.html and that page contains a CSS file with a location of /css/style.css, the web browser will look for example.com/css/style.css because the slash at the beginning of the URL tells it to go to the root.
In this case, your CSS file is probably actually in example.com/example/css/style.css. Remove the beginning slash so the location is css/style.css and the web browser will look for the file using the current page's location as it's starting point.