ASP.NET, CSS3, HTML, HTML5, JavaScript, Programming, VB.NET, WebForms

Javascript and Bootstrap CSS: Showing a Save Screen that Locks Page Elements

The goal of this example is to make all elements on and HTML form un-selectable while something like a Save/Load/long database lookup is happening. What we’ll do is superimpose a div over an HTML form, and have that div show opaque lines over the form as well as a clear area that says Loading or Saving.

We’ll make the page look like the image to the left, so that it is clear to the user that the form they were working on is temporarily disabled. Continue reading “Javascript and Bootstrap CSS: Showing a Save Screen that Locks Page Elements”

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”