Tagged: Bootstrap

Snippet – Using FontAwesome, Bootstrap, MVC for Checkbox, Radio Controls

imageSo how can you use the check-boxes from Font Awesome, and get the box to check/uncheck. When a user clicks, how do I show the right icon?

When checked: icon-check ; unchecked: icon-check-empty.

The basic idea is to select spans:before that is next to input you want..

image 

image

If you are using less/sass, you could just include the .icon-glass:before declarations, to make it all easier to maintain & modify. Continue reading

Advertisements

Single Page App – isLoading jQuery Plugin to Indicate Content Loads

imageWhen you’re loading information using jQuery AJAX, you may want to provide visual feedback when loading data or for any action that would take time.

In this Snippet, you will learn how to:

  • Load JSON data from a getJSON call to our server.
  • Show and hide a spinning indicator inside a div.
  • Bind the incoming data to a view model object.
  • Use the view model to populate an external template.

image

Then once the page is loaded, it will display the data based on an external template.

image

And we’ll provide some tips on how you you can use the IsLoading library to display the loading indicator on top of the page while loading and on top of the div itself.

Continue reading

HTML5, CSS3 Tip – Boilerplates

html5-boilerplateAs you have seen in our introductory posts on HTML5, you will want to start with some sort of boilerplate. Boilerplates help you remember all of the items you need to be successful.

HTML5Boilerplate helps you start your project with a lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icon; and docs covering dozens of extra tips and tricks.

Continue reading