CSS hexadecimal colors with transparency, a conversion tool
This notation works with both 8 digits and 4 digits (shorthand notation) …
Firefox has an annoying bug: If you set the window.location.hash
, your favicon disappears. Very annoying. The bug has been open and confirmed for a long time, and Firefox 3.0 all the way to 3.6 are affected. But it hasn’t been fixed yet, so here’s how to fix it yourself.
I encountered this bug while building Lystener. I change the location hash there quite often, and each time I did, the favicon would disappear. Finding the root cause took me quite a while, and apart from the bug report I could not find any page describing why this happens and what to do about it. So I figured that I’d write a quick post about it to make it Google-able at least.
Luckily, there is an easy fix: Just reset the favicon after changing the window.location.hash
. Here’s a jQuery function that does just that:
function setFavicon() { var link = $('link[type=image/x-icon]').remove().attr("href"); $('<link href="'+ link +'" rel="shortcut icon" type="image/x-icon" />').appendTo('head'); }
It’s fairly straightforward: We find the current <link>
referencing the favicon, remove it, and then, making use of jQuery’s standard of functions returning themselves, get the href attribute of the just-deleted link. Then we simply set that as the href
in a newly created link
element, and add that to the head.
Just execute that function each time you change the window.location.hash
, and you’re all set!
This notation works with both 8 digits and 4 digits (shorthand notation) …
CSS 3D transforms create depth and visually interesting elements on your page using perspective. I use them on the Polypane website and whenever I see them in the wild they look fun and clever. Unfortunately I don’t see them being used a whole lot. Maybe that’s because it’s not well known you can do proper 3D…
If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…