├── index.html ├── data-href.js └── README.md /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | data-href - Put an href on it. 10 | 11 | 37 | 38 | 39 | 40 | 41 |
42 | 43 |

Learn more about data-href on github

44 | 45 |

data-ref is a quick bit of JavaScript to let you define an href on any element. This vanilla JS is library agnostic, and will degrade gracefully so long as your content also has a link to the desired URL.

46 | 47 | More info: Learn about data attributes 48 | 49 |
50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /data-href.js: -------------------------------------------------------------------------------- 1 | sethrefs = function () { 2 | 3 | if (document.querySelectorAll) { 4 | 5 | var datahrefs = document.querySelectorAll('[data-href]'), 6 | dhcount = datahrefs.length; 7 | 8 | while (dhcount-- > 0) { 9 | 10 | var ele = datahrefs[dhcount], 11 | addevent = function (ele, event, func) { 12 | 13 | if(ele.addEventListener) ele.addEventListener(event, link, false); 14 | else ele.attachEvent('on' + event, link); 15 | 16 | }, 17 | link = function (event) { 18 | 19 | var target = event.target, 20 | url = this.getAttribute('data-href'); 21 | 22 | if (!target.href) { 23 | 24 | var newevent = document.createEvent("MouseEvents"); 25 | 26 | if (newevent.initMouseEvent) { 27 | 28 | var newlink = document.createElement("a"); 29 | 30 | newlink.setAttribute('href', url); 31 | newlink.innerHTML = 'link event'; 32 | 33 | newevent.initMouseEvent(event.type, true, false, window, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, null); 34 | 35 | newlink.dispatchEvent(newevent); 36 | 37 | } 38 | else { 39 | 40 | var meta = (event.metaKey) ? '_self' : '_blank'; 41 | 42 | window.open(url, meta); 43 | 44 | } 45 | 46 | } 47 | 48 | }; 49 | 50 | addevent(ele, 'click', link); 51 | 52 | } 53 | 54 | } 55 | 56 | }; 57 | 58 | sethrefs(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | data-href 2 | ========= 3 | 4 | A quick bit of JavaScript to let you define an href on any element. This vanilla JS is library agnostic, and will degrade gracefully so long as your content also has a link to the desired URL. I built this because the HTML5 spec states that while you can use block-level anchors, you still [cannot nest an anchor within an anchor](http://dev.w3.org/html5/markup/a.html). This makes the tag links in the pattern below invalid. So I thought it might be fun to resurrect a feature of XHTML2 that I really liked – [adding an href to any element](http://xhtml.com/en/future/x-html-5-versus-xhtml-2/#x2-cool-hyperlink). 5 | 6 | ## Using data-href 7 | 8 | Integrating with your HTML is simple: copy the script into your JS, and then add a “data-href” attribute to any element, pointing to the desired URL. For example: 9 | 10 | ```HTML 11 |
12 | 13 |

Headline goes here.

14 |

And here goes a bit of copy about the content of the article.

15 | 16 | Tags: content, headlines 17 | 18 |
19 | ``` 20 | 21 | Priority will be given to any nested link’s href. So, if you click an element with a data-href, you go to the data-href URL; if you click a link inside of that element, you go to the URL on that link. 22 | 23 | Demo here: http://nathanford.github.io/data-href 24 | 25 | ## Limitations 26 | The latest version will now allow CMD+Click events to work properly in Webkit browsers, but will silently fail in FF and IE. As support for initMouseEvent is implemented, this should get better. Therefore… 27 | 28 | _Please note:_ This is an enhancement. You should still provide a regular anchor link to your content somewhere in the element. In the example, the H1 still links to the content-page, and would work fine even if JavaScript was turned off, or if the user is in a browser that does not support the methods used in the JavaScript. --------------------------------------------------------------------------------