Skip to content

Instantly share code, notes, and snippets.

@abernier

abernier/Readme.md

Last active April 24, 2024 08:33
Show Gist options
  • Save abernier/3070589 to your computer and use it in GitHub Desktop.
Save abernier/3070589 to your computer and use it in GitHub Desktop.
Download ZIP
Link anatomy
Raw
index.css
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);}
Raw
index.html
<!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>
Raw
index.js
$('[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 = '';
});
@kaleb
Copy link

kaleb commented Mar 5, 2021

Also consider origin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment