Download attribute in <a> tag doesn't work when file URL called from sub domain - css

I have a blog here where I have used an anchor tag (<a>) with the download attribute for an HTML file:
</i>
Screenshot:
Expected: when the user clicks, it should open the dialogue box to download the file.
However, it navigates to the file. AFAIK, it was working earlier. Not sure what happened, or am I missing something? As per this w3schools example, ".html" file is allowed.
Any help would be much appreciated without using JavaScript.
EDIT:
This blog is in a subdomain (http://blog.idevelopweb.site/) and I'm calling the HTML file which is in the root directory (http://www.idevelopweb.site/) so I have used an absolute path.

I may direct you to here.
Your problem is the same origin policy of the download attribute. So either use the same url or relative path.

Download file when clicking on the link (instead of navigating to the file):
<a href="link" download="logo">
Note: The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier)

In your Code
</i>
The href contain link of the webpage instead of the data , image or file which nedded to be downloaded. The webpage cant be downloaded using download attribute of anchor tag.Thus it should be in format:
<a href= "--link of image or file to be downloaded--" download > Download </a>
For example:
<a href="/images/myw3schoolsimage.jpg" download> Download </a>
This download the myw3schoolsimage.jpg image

Related

how to get the dynamic loaded content from a webpage (Alphafold database)

I think similar topics may have been discussed before. But I still could not find the solution. Here is the example page
https://alphafold.ebi.ac.uk/entry/P82662
I want to extract the target downloading URL:
https://alphafold.ebi.ac.uk/files/AF-P82662-F1-model_v4.pdb
When I "Inspect" this page in Chrome, I could see the desired URL here:
<a _ngcontent-brn-c12="" class="vf-button vf-button--secondary vf-button--sm" style="color: #3B6FB6;" href="https://alphafold.ebi.ac.uk/files/AF-P82662-F1-model_v4.pdb">PDB file </a>
I used request.get to get the html but could not find the target URL, and realized this could be dynamically loaded. Then, under the Network tab and Fetch/XHR I could only see a similar URL without the desired file type:
https://alphafold.ebi.ac.uk/files/AF-P82662-F1-model_v4.cif
So how can I get this URL string using request?

Remove link to document caching in ASP.NET

I'm trying to append DateTime.Now.Ticks to my link to stop it from caching as I'll be replacing it often. The problem I'm having when I do the code below is that it's adding a Content path in the url.
The original link was:
<a target="_blank" href="~/Documents/Data/Acct/MyDocument.pdf">Document</a>
This obviously caches the file on the browser so when I overwrite MyDocument.pdf the users don't see that unless they Ctrl-F5. So I changed it to the following:
<a target="_blank" href=#string.Format("{0}?t={1}", "~/Documents/Data/Acct/MyDocument.pdf", DateTime.Now.Ticks)>Document</a>
This produces a link that looks like: Content/~Documents/Data/Acct/MyDocument.pdf" which obviously doesn't exist because it's adding in Content and keeps the ~. If I remove the ~ I still get Content/Documents/Data/Acct/myDocument.pdf. How do I stop .NET from adding this Content/ to my link?
To add, the page that this link is in, is inside a folder called Views/Content. So I guess that's where it's being called from, but the ~ I assume should go up a level but it's not.
<a target="_blank" href=#string.Format("{0}?t={1}", "../Documents/Data/Acct/MyDocument.pdf", DateTime.Now.Ticks)>Document</a>
If you want to go up a level in your Url use ../ should get rid of the Content

View File name only in AsyncFileUpload

When i upload file using AsyncFileUpload path view like image contain C:\fakepath{filename}.
note: my correct path not contain (fakepath word).
I discover it is related to browser security. If i try to open my page in other browser like FireFox problem is solved so it is not problem.
Tutorial help my: Link1, link2, link3

how to display the "URL" of a zip file as a download button?

am using aldeed:collection2 package for my collection and one of the element in the documents is the URL of a zip file.
I already fetched the URL "item.file" but I want to provide that URL as a button, once clicked the download will start.
How do i do this?
thanks
If it's a .zip file, you just need to wrap it in an <a> tag:
<a class="btn btn-primary" href="{{item.file}}">Click to Download</a>
Note that I'm using Bootstrap classes to make it look like a button.

CSS file not linking to HTML

I've recently started learning to code HTML and CSS by hand for the first time since the mid 90s (last time I tried to build a site, Netscape Communicator Gold 3.0 was out--so bear with me here).
I cannot get my CSS to link up with my HTML. I am using HTML5 conventions and following the code examples in the popular book "Learning Web Design," 4th edition, by Jennifer Robbins. Many of the code examples I see use conventions that are no longer required in HTML 5.0, so my code may be a bit sparse.
I have tried to directly embed the styles in the HTML and they work. However, they do not work when in a CSS sheet. I have tried to load the page in both IE11 and the newest version of Chrome and the page displays in white with default browser settings. My HTML file and my CSS file are in the same directory: c:/RogersReviews. There is an images folder in the directory, c:/RogersReviews/Images. I have linked to an image file in that folder and my code works.
However, I cannot change the background color of my page using a linked CSS style sheet. I have tried to make it red to prove that the link is working. Below is my CSS code followed by my HTML code.
I have used Eric Meyer's browser reset code in the CSS to clear out any browser settings that might be messing things up. I have omitted it for your convenience.
It is probably something minor that I have missed. Thank you in advance for your help.
EDIT: The page seems to be linking just fine when I post it here, but not when I run it from my hard drive by opening the HTML file. I would like to be able to see the page as it would look online, but from my hard drive.
body {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Rogers Reviews: Academic Book Reviews </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<img src="Images/Rogers-Reviews-logo-3.gif" alt="Rogers%20Reviews">
<ul id="menu">
<li>Home</li>
<li>Authors</li>
<li>Subjects</li>
</ul>
</header>
<h1> Welcome </h1>
<p> This site is a collection of academic book reviews, mostly in the humanities and the social sciences. </p>
<p> The purpose of this site is to assist high school, undergraduate, and graduate history students with choosing appropriate secondary sources for their research papers. An emphasis is placed on older works written before 1960.</p>
<p> Back to home </p>
<footer>
<p> © 2014 </p>
<p> About </p>
<p> Contact </p>
</footer>
</body>
</html>
I inserted your code, verbatim, into a JSFiddle, and the background is red, as you wanted.
The code is not the issue, then. Instead, its a problem of the stylesheet loading properly. Try some or all of the following:
Check your stylesheet name, and that it is the same in the directory as it is in your HTML code; make sure stylesheet.css exists properly.
Double-check that the file exists in the right place, which is in the same directory as your index that you are opening.
Make sure the stylesheet is loading. In Chrome, if you right-click -> inspect element and go to the sources tab, you can see all loaded resources, including your CSS. If it's not loading here, it could be that it tries to load from your cache. You can force Chrome to load sites without the cache by opening the inspector again, clicking on the gear menu, and checking "Disable cache (while DevTools is open)', and reloading your site.
Check your local apache/webhost server to make sure that it doesn't have any settings blocking the loading of certain files or types of files. This is assuming you are running one and not just opening the file in Chrome/IE. If that is the case, you should have no problems with the file loading.
Make sure you saved the file. It's silly, but I can personally vouch for the time when I couldn't make my site update, and I forgot to save/update the file I was viewing.
Hello, perhaps it helps to someone:
css files have to be transmitted stating "text/css" as content type (while your html page content is usually "text/html").
It is important to state the right value for transmission, because browsers check it.I had this problem with Delphi, trying to state "DOCTYPE HTML" in a WebBroker application to use HTML5, and the problem has been solved setting it in the variable reponse.contenttype. If you use a web server, I suppose you have to put the file in the right folder for example, or set this attibute in the right place to instruct your server to send the right contenttype.Have a nice day!
Instead of href="stylesheet.css", try href="/stylesheet.css".
I had the same issue and this worked for me.
Simple solution: no changes to you html code.
Procedure:
1) Log into Ubuntu as a root user
2) Go the /var/www directory and right click on the www folder, then click Properties, change the following permission as follow:
view content: anyone
change content: anyone
access content: anyone
3) Restart apache2 server type service apache2 restart
4) Finally, test the webpage
Hope this helps
Just ran into same issue. It was browser cache. Ctrl-F5 helped to fix it.
I assume that you have created your file in NOTEPAD & not used any editor. While saving the css file, the file type has remained as .txt which leads to saving of the file as Text Document type.
Open a new notepad file, copy & paste your CSS code. Save the file in Notepad under "Save As" menu, enter your css file name with.css extension & select "Save as type" as "All Files" documents. After saving, in the explorer the file type should be displayed as Cascading Style Sheet Document.
Hope it solves your problem.
I ran into a similar issue where the css file changes are not reflected in the webpage styling.
Here where the concept of hard-reload helped me. Hard reload can be done by
shift+ctrl+R
This happens when the browser serves a cached CSS file from that of yours.
To invalidate the cache and serve your latest CSS file, you can perform a hard reload on the browser.
Refer this For more info on such problems.

Resources