Convert Single-level CSS Dropdown to Mobile-Friendly

I know people out there are doing this, because I click around on their websites all the time. But could I find a tutorial or code snippet? Not a chance! Here’s a first attempt. If anyone spots anything just awful, I’m eager to hear from you.

What is “this”?

Taking a typical CSS-based dropdown navigation (usually built around li:hover rules) and making it friendly for mobile.

While some mobile browsers (iOS implementation in particular) will try to allow you to “hover” with a quick tap, it’s kind of a fiddly experience. And Android doesn’t seem to have this at all. So what’s a guy to do? I’m confident there is better CSS out there, perhaps using focus or some other sort of state-driven styling, but I couldn’t find it. So I resorted to JavaScript. Since jQuery’s already on the site and is right in my wheelhouse, I went where the comfort was. Not saying this is where the performance is, but for such a trivial bit of code, I’m not bothered.

(more…)

DRY Font-Family Declarations

How many times have you worked on somebody else’s CSS file and had to do a search and replace for font-families to produce consistency? Or worse, how often have you made a quick change that you thought updated a particular typeface (no global search and replace) only to discover that the wrong font is inherited higher up in the chain? I’m thinking mainly of some pretty well-selling WordPress themes, but even Roots was guilty as I recall. It’s everywhere!

For any site, you should be declaring font family (whether with “font” shorthand or “font-family” explicitly) exactly ONCE for any given typeface. Just as anywhere else in the development cycle, the principle of DRY (don’t repeat yourself) applies.

(more…)

Ternary Operators – Why bother?

A ternary operator is basically a short form for a conditional (if..else) statement. The syntax is “condition ? result1 : result2″. If the condition is met, then go with result1; otherwise go with result2. Here is what one looks like in JavaScript:

var annoying = true;
(annoying === true) ? alert("Yup, annoying") : alert("Not annoying");

The above will alert “Yup, annoying” because annoying resolves as true. This simplified example is annoying to read already. But with more logic and slightly more abstract variables (or god forbid, functions!) and you get a mess to read.

(more…)

jQuery Check if Element has auto width/height

A user at Stack Overflow had a question: how can you tell if an element has the height attribute set to ‘auto’? It’s relatively well known that most of the methods for getting a height will return the calculated height in the browser’s preferred unit of measurement (all are using pixels as far as I know). Some methods will not return a value because they are checking the inline attribute to see what the height attribute is… no help since we’re talking about CSS height property.

(more…)

Fun with HTML5 localStorage API

Recently had occasion to wonder if I should be storing data in localStorage when available. Thanks to two notable resources (among many others I checked out tonight) I had a little bit of fun and learned a few things; enough to get comfortably started with localStorage. Here are my two takeaways:

(more…)