By now most of us are familiar with Navigation Drawers as they’ve been in use by Facebook, Gmail, Google Play Music, Google Play Music and tons of others apps. It’s that sliding panel that comes out onto the screen when you swipe a finger from the left edge of the screen (or sometimes right edge) or tap on the 3 bar button (sometimes called hamburger icon) in the Action Bar. If still confused then check out the design guide and you’ll know what I’m referring to. The design guide will also tell you when to use it and when not to use it.
Based on the design decisions made by you on your website (or webapp), you might probably end up having a sticky navigation, one that keeps on showing up in the view port as you scroll up or down. In such a situation, it’s a common desire to have the links in the navigation bar be scrollbar-aware and change their active state as the user scrolls through the page. Let’s see how to do this.
Just thought of making a list of
-webkit (Chrome, Safari) css properties that mostly affects mobile user experience – iOS, Android, etc.
Long title, but then I felt like specifying parts of what I’ll be covering in this post. Anyway, so I’ll start by a not-so-common issue that some of us have encountered, which is, how to move the input caret (sometimes referred to as the keyboard cursor) to the end of an input field or a textarea on focus.
HTML5 brings us the
placeholder attribute using which we can set default text on an input field or a textarea that goes away when you focus in the field and then write something. What about placeholders for
select dropdowns ?