CSS3, HTML, HTML5, JavaScript, JQuery, Programming

Simple CSS Only Flip Effect for a Div

FlipEffect

Adding a flip effect to content on your Web page can be a handy way to show extra content. In this case, I’m showing an example flip effect that happens on the click of a button above the area. You can click the button multiple times to have the front or the back of the flip area show. Continue reading “Simple CSS Only Flip Effect for a Div”

Advertisements
CSS3, HTML, HTML5, JavaScript, JQuery, Programming

JavaScript: Outputting a Number in Traditional Currency Format

The requirements I will describe in this article are to have JavaScript format user-input numbers as traditional currency. This means to show two decimal places (with or without automatic rounding), commas as thousands separators, and with or without a preceding currency symbol like:

$ 12,345.67

or without the currency sign as:

12,345.67

Continue reading “JavaScript: Outputting a Number in Traditional Currency Format”

CSS3, HTML, HTML5, JavaScript, JQuery, Programming, Regular Expressions

Tips: Get your Web Forms Money Fields Looking Great with jQuery, Bootstrap3 and FontAwesome

Formatted Number Fields
Formatted Number Fields

Here is a quick overview of how to make number fields in your HTML form look more fancy using Bootstrap3 and jQuery. In particular I will show how to use Bootstrap markup to prepend a Bootstrap icon to one of the text input field on your form. Also I’ll show how to add a jQuery/JavaScript function to nicely format the numbers entered by your users.

In the end the example number fields will look a little something like the image shown here. If you want to try this for yourself, just browse a little further down in this article for a full working HTML example page.

Having nicely formatted number fields in your Web form is an example of how making things look much friendlier and professional, which is definitely a good thing!

Continue reading “Tips: Get your Web Forms Money Fields Looking Great with jQuery, Bootstrap3 and FontAwesome”