Create a gist now

Instantly share code, notes, and snippets.

@abernier /Readme.md
Last active Mar 31, 2017

What would you like to do?
Link anatomy
html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;}
[title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;}
[title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;}
[title]:hover:before,
:target:before {background:black; color:yellow;}
[title] [title]:before {margin-top:1.5em;}
[title] [title] [title]:before {margin-top:3em;}
[title]:hover,
:target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Link anatomy</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="index.js"></script>
</body>
</html>
$('[title][id]').click(function (e) {
e.preventDefault();
e.stopPropagation();
window.location.hash = '#' + $(this).attr('id');
});
$(':not([title])').click(function (e) {
e.preventDefault();
e.stopPropagation();
window.location.hash = '';
});