This article describes how can we implement textarea characters count that can also work during cut/copy and paste as well as you can also select characters upto desired length or can show reverse counting (characters remaining) in textarea. There are many tutorials online but they seem to make it more complex than it needs to be. Just a few lines of jQuery does the trick.
Tag » HTML
Minlength validation in HTML 5 input
HTML 4 has maxlength attribute to limit the number of characters entered in input text box and HTML 5 also supports this attribute as well. HTML 5 input now supports minlength validation using pattern attribute. Let’s see how can we accomplish minimum length for a text box.
5 equal columns Bootstrap grid layout with 1, 2, 3, 4 of five
Twitter Bootstrap has 12 columns grid layout by default which allows you to create responsive layout for your website but you can’t create 5 equal columns without using offset in this setup as sum of those column never meet with 12. But in this tutorial we have created some CSS rules to make five equal columns Bootstrap grid layout. Furthermore you can also have 1/5, 2/5, 3/5 and 4/5 sized columns combined with Bootstrap 12 columns grid layout after reading this post.
2 Ways for Hover Dropdown in Bootstrap 3 Navbar
The Bootstrap 3 css framework contains a pretty good navigation component called “navbar” which automatically collapse when the viewport is too small. The dropdown menu’s of the navbar open when clicking the main item. For a tablet or phone this behavior is fine, but when using a desktop you might want the menu’s to open when hovering them. So here we are discussing 2 Ways for Hover Dropdown in Bootstrap 3 Navbar.
Valid values for the id attribute in HTML elements
This post is a sum up of when creating the id attributes for HTML elements, what rules are there to follow for the value of id? According to HTML4 specifications: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”).
Reorder columns in small screens or mobile devices
So you want to change the layout of your bootstrap website and reorder columns in small screens or mobile devices for better accessibility and readability. The Bootstrap pull and push classes are there to let you change them or re-order divs while maintaining responsiveness.
Expand collapse panel with toggle icon in Bootstrap
Twitter Bootstrap is being used popularly due to its powerful responsive front-end capabilities. One among its components ‘Panel’ is used for accordion and we can expand or collapse its body content by clicking on link inside panel heading. But I wanted to expand collapse panel with toggle icon in Bootstrap which are placed on right side inside panel heading as shown in the image below and the icons get changed according to visibility of content in panel.
Bootstrap dynamic modal popup with dynamic data & content
You want to dynamically create modal popup in Twitter Bootstrap and fill it with title and content on the fly. Here in Bootstrap dynamic modal popup with dynamic data & content article, you can read how to achieve the same.
Google New reCaptcha using PHP – Are you a Robot?
Recently Google introduced a simplified “captcha” verification system (video) that enables users to pass the “captcha” just by clicking on it. This API utilizes an Advanced Risk Analysis engine that is capable of discerning between users and bots
To change navbar color in Twitter Bootstrap 3
Twitter Bootstrap is a popular front-end framework to create responsive websites with some popular JavaScript plugins. Here is a workaround to change navbar color in Twitter Bootstrap 3 instead of using the two basic navbar colors (light one / dark one) available.
<!-- A light one --> <nav class="navbar navbar-default" role="navigation"></nav> <!-- A dark one --> <nav class="navbar navbar-inverse" role="navigation"></nav>
[ Page 2 of 5 ]