JavaScript Control Input Field Caret Position or Move to End in Textboxes and Textareas

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.

Continue reading “JavaScript Control Input Field Caret Position or Move to End in Textboxes and Textareas”

Creating Android Sliding Sidebar (Hamburger) Menu with Navigation Drawer Icon

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.

Continue reading “Creating Android Sliding Sidebar (Hamburger) Menu with Navigation Drawer Icon”

Change Active State of Links in Sticky Navigation on Scroll

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.

Continue reading “Change Active State of Links in Sticky Navigation on Scroll”