{"id":72,"date":"2005-01-13T14:16:51","date_gmt":"2005-01-13T12:16:51","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/01\/13\/pdf-links-labeling\/"},"modified":"2010-04-26T11:12:00","modified_gmt":"2010-04-26T10:12:00","slug":"pdf-links-labeling","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/01\/13\/pdf-links-labeling\/","title":{"rendered":"PDF Links Labeling"},"content":{"rendered":"<p><a href=\"http:\/\/www.yourtotalsite.com\/about\/bios\/Garrett.aspx\">Garret Dimon<\/a> wrote nice post about why <a href=\"http:\/\/www.yourtotalsite.com\/archives\/usability\/please_label_pdf_links\/Default.aspx\">.PDF links should be labeled<\/a>. While there\u2019s no problem making these labels when starting from scratch or re-designing web site, it\u2019s a pain in the a** to add <code>class=\"pdfLink\"<\/code> to existing (large) sites. Here\u2019s JavaScript to the rescue.<!--more--><\/p>\n<p>If you have read my post about <a href=\"http:\/\/www.maratz.com\/blog\/archives\/2004\/11\/29\/setting-target_blank-to-external-links\/\">adding target=&#8221;_blank&#8221; to external links<\/a>, you are half way there. The script is basically the same, but the conditions are changed. Instead of applying <code>target<\/code> attribute to all external links, the script applies this attribute to all URLs that have a string \u2018.pdf\u2019 in it or as you will see later, to any custom file extension (i know some of you will disagree with opening links in new window, but that\u2019s not today\u2019s topic).<\/p>\n<p>The script also adds <code>class=\"pdfLink\"<\/code> to all links that match the condition. Same could be applied to .DOC files or .ZIP files.<\/p>\n<pre>function fileLinks() {\r\n    var fileLink;\r\n    if (document.getElementsByTagName('a')) {\r\n        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {\r\n            if (fileLink.href.indexOf('.pdf') != -1) {\r\n                fileLink.setAttribute('target', '_blank');\r\n                fileLink.className = 'pdfLink';\r\n            }\r\n            if (fileLink.href.indexOf('.doc') != -1) {\r\n                fileLink.setAttribute('target', '_blank');\r\n                fileLink.className = 'docLink';\r\n            }\r\n            if (fileLink.href.indexOf('.zip') != -1) {\r\n                fileLink.setAttribute('target', '_blank');\r\n                fileLink.className = 'zipLink';\r\n            }\r\n        }\r\n    }\r\n}\r\nwindow.onload = function() {\r\n    fileLinks();\r\n}<\/pre>\n<p><img src=\"http:\/\/webdesign.maratz.com\/lab\/pdf_links_labeling\/all.gif\" alt=\"preview of icons\" \/> Now that we have classes <code>pdfLink<\/code>, <code>docLink<\/code> and <code>zipLink<\/code>, we can use CSS to style those links, for example add a corresponding icons. See following example:<\/p>\n<pre>.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }\r\n.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }\r\n.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }<\/pre>\n<p>I suggest you use small and unobtrusive, but noticeable icons, otherwise they will take too much attention. Here is <a href=\"http:\/\/webdesign.maratz.com\/lab\/pdf_links_labeling\/\">full working example<\/a>. The script is not bullet-proof to URL junk produced by CMS, for example <code>?download=2387423&#38;sid=8568347563<\/code>. Links should point to files with the right extensions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"http:\/\/www.yourtotalsite.com\/about\/bios\/Garrett.aspx\">Garret Dimon<\/a> wrote nice post about why <a href=\"http:\/\/www.yourtotalsite.com\/archives\/usability\/please_label_pdf_links\/Default.aspx\">PDF links should be labeled<\/a>. While there&#8217;s no problem making these labels when starting from scratch or re-designing web site, it&#8217;s a pain in the a** to add <code>class=\"pdfLink\"<\/code> to existing (large) sites. Here&#8217;s JavaScript to the rescue.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,18],"tags":[25,54,52],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/72"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}