HTML5 download links not working - html

I've made a snazzy first website, but I can't get the download links to work without manually opening them in a new tab on my browser. I've tried using different browsers, setting target="_blank" and fiddling with the download property in the <a> tag, to no avail. What on earth is happening?
Here's my website.

I discovered that my twitter bootstrap css files were outdated. After an update, links worked again!

Related

Can't download file using HTML5 download attribute

I'm trying to create a download link the way it always worked for me. But now it keeps redirecting me to Google Docs – I've never experienced that before, this should be a straight-forward task to do, so it quite shocked me.
I use the HTML5 download attribute:
<a href="../files/uploads/myfile.docx" download>myfile.docx</a>
But I always end up redirected to Google Docs. I also opened the Chrome dev console and noticed that after I click on the link, it changes the href to Google Docs. I have no clue why.
The path should be alright, I can't figure out the problem. What shall I do?
The download attribute only works for same-originl URLs. So if the href is not the same origin as the site, it won't work. In other words, you can only download files that belongs to that website. This attribute follows the same rules outline in the same-origin policy

Twitter Bootstrap favicon.ico

I am working on a site using the one of the twitter bootstrap templates and my JavaScript console is complaining that it is missing:
favicon.ico
ie-emulation-modes-warning.js
I downloaded all of the Bootstrap files from the Bootstrap website. What are these files and do I need them?
If so, where can I get them?
Edit: Thanks guys! Looked into Favicons and didn't realize that is what they are! So simple! lol
By default, browsers look for favicons in your site's root directory. You can use favicon generators online, which (by standard) create 16x16 pixel png-like objects that are used as your site's icon on a browser tab, etc. Just make one of those and drop it in your root directory.
If that doesn't work, you may want to use your inspector (assuming you're using chrome), right click > inspect element > console (or network), and look there to see where your template is looking for the favicon. Just drop the generated .ico file in that folder.
For the JS file, you may be able to find it online, download it, use the inspector again, and drop it wherever your browser is looking for it. This is good for performance—missing files slow roundtrip requests down.
It's something browsers look for by default. Nothing to do with Bootstrap
http://en.wikipedia.org/wiki/Favicon

Anchor tag doesn't work in iPhone Safari

I'm having an issue with a named anchor tag in iPhone Safari browser. It works well in desktop browsers including Safari, but not working in mobile Safari. Weird!
For example my URL looks like:
http://www.example.com/my-example-article-url-is-like.php#articlebottom
the above URL is from a newsletter and it should go to the bottom paragraph in article page which I gave id like this:
<p id="articlebottom">paragraph is here</p>
When I click the above URL from Newsletter it goes to the article page, but not the bottom para where I specify id. Although I can see that the #articlebottom part is missing from URL when it came into the targeted page in Safari.
Any thoughts would be appreciated!
Opera, IE, Chrome and Firefox will carry over the anchor to the new page. However, Safari loses the anchor on the redirect.
So what if you add / just before the ID Tag?
Old URL Path:
http://www.example.com/my-example-article-url-is-like.php#articlebottom
New URL Path:
http://www.example.com/my-example-article-url-is-like.php/#articlebottom
Another solution is that you'd have to delete both "www." from the domain and add a forward slash before the anchor tag in the URL/pathname before Safari would respond properly. Firefox doesn't seem to care, and I haven't gotten to testing on IE yet.
just doing my due diligence and answering for anyone who is having this problem with Index navigation links on a Squarespace page and Safari on iOS. My anchor links were not working when formatted as such:
http://sitename.com/page#anchor
Then I tried this to no avail:
http://sitename.com/page/#anchor"
Rather than give up, light my computer on fire, and call it a day I tried:
http://www.sitename.com/page/#anchor
And it worked! So cheers if this helps anyone.
I couldn't get it working with above solutions so hopefully I did my own workaround.
Purpose: Scroll to anchor "#issues" after navigating to URL "https://example.com/issues/"
Create link "https://example.com/issues?anchor=issues"
On page "https://example.com/issues" add js
<script>
if (window.location.href.search("anchor=issues") > 0) {
window.location.href= "https://example.com/issues/#issues";
}
</script>
Voila!
--
You can observe that after opening link "https://example.com/issues/#issues" Safari scrolls from anchor to the top of the page, then when you click to edit URL and hit submit button, you will be scrolled to anchor.
I hope they will fix it fast and after that they will add immediately push notification support.
Safari loses the anchor tag after redirecting. So avoid anything that leads to a (second) redirect.
use the full URL (http://...)
note if there is a redirect to www or not (www.domain...)
add a trailing / if there is no prefix like .html/.php (mypage/)
http://www.domain.tdl/mypage/#safari
Maybe it's useful to check for a redirect using tools like cURL
curl -I http://www.domain.tdl/mypage/#safari
I have been wrestling with this problem for a client of mine. I will not name names but I will share a solution I found which suddenly brought dead anchors links back to life and working on both the mobile and desktop versions of the site.
I had attributed the malfunction to an overabundance of page / site scripts and css which I can not change because while this site belongs to a local business it is part of a global corporate network which has its own protocols and best practices. In other words, I can specify inline styles to distinguish page elements but at the end of the day the page must conform to corporate guidelines and rules.
Here's a snippet of my code that embodies what I learned:
href="#anchorname" target="_top"
The key here is the target tag _top
According to http://www.w3schools.com/tags/att_a_target.asp the default target is _self and while your html generator may not write that specific bit of code into your pages which is to say that because it is the default IT DOES NOT HAVE TO BE SPECIFIED, my research has indicated that by specifying _top as the target the dead link problem was solved.
I hope this solution works for you.

jquery mobile and google chrome issue error loading page

I am developing a webapp with jquery mobile and in an html file I have a data-rel attribute of a link set to "dialog". Data-transition is set to "fade". The problem is, that after clicking a button which is linking to another html file Chrome says "Error loading page". I found the solution for that and adding rel="external" does the job, but it destroys my "fade" transition. Firefox seems not to have this strange behaviour and links me to the desired page without having rel="external", so the transition works. I could stay with Firefox, but I'd like to test my app on different browsers. Any suggestions? Many thanks in advance!
if it is an external link then just put rel="external".I hope it would work.
Home</li>

open pdf in iphone webapp

I am trying to open a pdf from my JQM webapp. I have tried iframes/embed/object, and none of those work on an iphone like they do on a desktop browser (scrolling, zooming, etc). I have settled with simply opening the pdf via a link Link. This works fine in the standard browser because the user can simply use the browser back button to navigate back to my app.
The issue that I am having, is that when a user saves the page to thier home screen and opens it using the chromeless safari browser, they no longer have the browser back button. I have tried adding target="_blank" to the link, but apparently JQM hijacks the link and prevents opening in a new page, and I have been unable to get the hacks to work.
I have also tried pdf.js, but I can't seem to even get that to work as my javascript knowledge is fairly limited, and the examples are pretty advanced. The only tutorial that I found used an old version which I couldn't get to work.
Are there any ways to bypass the JQM in openning a link in a new window (which would in turn open in the mobile safari rather than my chromeless web app), or are there any other suggestions for how to open a pdf from a webapp?
Just disable the default jQuery Mobile behaviour, by specifying data-ajax=false.
For example:
Link
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
For my webApps I used https://docs.google.com/viewer to embed the pdf into my interface.
So, when I navigate the webApp by home screen icon, the app doesn't close when I open the pdf.
I met the same question: open pdf in webapp with html5.
I've tried several solutions: iframe、embed、pdf.js, but none of them is the best solution.
tips: iOS 9.x upper, open pdf with iframe only show the first page of the pdf file, and there will be a <img /> tag in the iframe body when you debug.
util now I still have this troublesome problem, anyone has solution please write your experience here.
Thank you.