Well, let me just share with you this very simple snippit of code that will make their interaction a lot
more natural.
[codesyntax lang=xml]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html * { font-family:
sans-serif; }
h1 { padding: 0; margin: 0; font-size: 12pt; font-weight: bold; }
body {
font-size: 10pt; }
</style>
<script>
function
changeLinks() { for(var i = 0;i < document.getElementsByTagName("a").length;i++) { ele =
document.getElementsByTagName("a")[i]; ele.target = "_blank"; } }
function detectClick(e) { var
rightclick; if (!e) { var e = window.event; } if (e.which) { rightclick = (e.which == 3); } else if
(e.button) { rightclick = (e.button == 2); } if (rightclick) { self.close(); } }
</script>
</head>
<body
onload="document.timeout = setTimeout(self.close,5000);changeLinks();"
onmouseover="clearTimeout(document.timeout);" onmouseout="document.timeout = setTimeout(self.close,5000);"
onmouseup="detectClick();">
<a
style="display:block;cursor:normal;padding:0;margin:0;color:black;text-decoration:none;"
onclick="self.close();" href="/link/" target="_blank">
<h1>Title</h1>
<span>Message</span>
</a>
</body></html>
[/codesyntax]
Thats
really all there is to it. Lives on a 5 second time. If you hover over it, it stays longer, if you right
click it it closes. If you click it it goes to /link/. Quite nifty, if I do say so myself.
Its
slightly buggy regarding links in the message.. but meh.
No comments:
Post a Comment