Making More Natural Desktop Notifications in Chrome
Do you have a website or application that uses Google Chrome Desktop Notifications? Well, let me just share with you this very simple snippit of code that will make their interaction a lot more natural.
<!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>
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.
Making Google Analytics Work in XHTML
I was moving my website, Google Voice for Outlook, over from HTML5 to XHTML5 today, and as soon as I did the basic content negotiation filters in PHP so that it would send the appropriate headers if the client supported XHTML as well as only outputting the <?xml if the client supported XHTML, I checked my developer tools to find a JavaScript error. It was Google Analytics, of course. document.write doesn’t exist in XHTML, after all.
The fix was simple, replace the current four line inclusion code with:
<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); var script = document.createElement("script"); script.src = gaJsHost + "google-analytics.com/ga.js"; script.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(script); </script>
This will work fine, unless of course you have no head tag. In which case you should replace getElementsByTagName(“head”) with getElementsByTagName(“html”).
HTML5 Being a Pain in My Ass Again
This time in regards to the highly acclaimed and very well received <video> element.
On my website, Google Voice for Outlook I use the <video> tag to show a demonstration of the system working. I don’t currently have a way to encode in ogg, and/or am too lazy too, so I decided that if the web browser didn’t support h264 video, it’d fall back to the YouTube video. The expected result (from me, of course) was that if it can’t display the video, it’d display the YouTube. Apparently though, in FireFox it does not fall back to the YouTube video and instead just displays a gray box, and the fault this time doesn’t lie with FireFox, but with the standard:
Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.
Ugh! This means that if you want to use <video> on any website, ever, properly, you’re going to have to encode it in both h264 and Theora until the industry decides on a set standard.
Purely Atrocious.