Twitter Character Limit in Vanilla JavaScript

If you are on Twitter, then you are familiar with the 140-character limit for Tweets. The Twitter character limit is based on the SMS support of 160 characters except that 20 characters are reserved for the sender’s name. Many websites use very similar functions on forms to restrain the size of data being sent to a server or database, and they use them for both text fields or textareas.

In this post, we’ll create a character limit script that’ll work very much like Twitter’s. It’ll fire when you press down on a key and also change the counter text color red when the user is about to reach the limit by a certain number of characters.

Read more…

Posted in: JavaScript

iOS Keyboard Recreated in HTML, CSS, and jQuery

Over a long period of time, Apple has gradually changed the appearance of the iOS keyboard. It has evolved from using gradients and engraved key labels to a much flatter look while the layouts have been basically the same.

iOS keyboard evolution

In this post, I will show you how to create working replica of the latest iOS keyboard for fun in HTML, CSS, and jQuery. It is the one on the iPhone and iPod Touch. You won’t see special buttons like the language (globe) button because the typing functionality and the main keyboard layouts will be the focus.

Read more…

Posted in: CSS, HTML, JavaScript

A Better Alternative to the Hamburger Menu

Hamburger menu and soda

I’ve read about problems with the three-bar icon you are used to seeing on mobile websites and applications. The icon is referred to as a “hamburger” because you can think of the top and bottom bars as buns and the middle bar as the cheese, pickles, meat, etc. Therefore, it is called a “hamburger menu,” and critics point out issues that lead to reduced traffic.

Read more…

Posted in: CSS, HTML