Creating Animated Spinners with FontAwesome or Glyphicons

When creating JavaScript-rich applications an indicator is often used to give the user some certainty the page is working behind the scenes. If not present a user may question if the page has stalled or not. An animated GIF known as a spinner (or loader) is a common way to achieve this. An alternative to linking to a specific image is to use a popular font library that you may already be referencing by your application.

FontAwesome

The ability to create spinning icons in built into FontAwesome. Reference the library and create loaders easily:
The fa-spin class is what causes the rotation.

If you desire a different animation speed then you need a little CSS:
FYI: this CSS was constructed by studying the fa-spin class found in the FontAwesome stylesheet. Adjust the milliseconds (i.e., 1000ms) to alter the speed. Higher is slower, lower is faster. The default speed used by FontAwesome is 2000ms.

To use simply replace the fa-spin class with fa-spin-custom class that you have made:

Glyphicons

To use the font-library built into Bootstrap you will need to reference the above CSS as well:

That’s it. See a DEMO.
Enjoy.

Read More

Floating Element that Scrolls with a Page

I occasionally have a need to show a note or message to a user that must remain in vision. When the page is scrolled vertically the message moves with the content. I usually want the message in the center of the window, to the right of my content. The movement must be fluid and responsive, not choppy like back in the early days. This can be accomplished with little effort:

We must add the markup that will be moved around. Of course, you can expand upon this however you see fit:
Now, with some CSS we style the element and set it’s position:
This will position the element at the middle, far-right of the page. Of course, this may look a little spaced-out if you have a high resolution. This bit of script will snug it up next to whatever element you wish:
This code does some adjustment based on resolution. It compares the browser’s viewport width to the space required to show your message next to the target element. If it exceeds then the message will just ride the right of your page, hovering any content it passes while scrolling. If it fits then it will be nestled next to it.

See a DEMO.

Thanks.

Read More

Accessible FontAwesome Image Buttons

FontAwesome is a cool resource to use in web development. As its name suggests it is a font (like webdings/wingdings), except it has images that are actually useful. Some icons include edit, delete, email, save, lock, comment, search, facebook logo, etc. But since it’s a font some may wonder how to use it in an accessible way. Here is an example of an edit button:
Some of the classes being referenced are:
This example places an edit icon on an empty BUTTON tag with the fa fa-edit classes. I have also included CSS to remove the browser styling related to the BUTTON tag. Within the button tag is a SPAN tag with the value of Edit. It, however, is floated off the page and can only be detected by screen readers. The reader should say Edit Button. If CSS is completely disabled the image will not be shown but the text won't be hidden either. You are still left with a button whose purpose is understandable!

Read More

Alternative to Using Tables for Layout

Most developers are familiar with tables and how they behave. They have relied on them heavily in the past to display data as well as templating and design. But as we learned in my previous post you are no longer encouraged to use them for layouts. You should use CSS instead.

When I first started dabbling with DIV tables I used the CSS float property to mimic cells. But in many situations that method forced me to be overly specific on the heights and widths of my cells. It seemed to be two-times the work. Also vertical alignment and centering was much more difficult.

But luckily CSS3 has a solution for us with the DISPLAY property: table, table-row and table-cell.

In the following example I have some HTML:
And when you include a little CSS:
Above, I am showing how to easily center a table with auto-sized columns and rows based on the content. I’m also vertically and horizontally aligning a cell with ease. Heights and widths were not required. The height that was set was only to demonstrate vertical-alignment.

The CSS display properties work in all major browsers. They became fully functional as of IE9 but can work in IE8 with an additional meta tag. See this post for more information. IE8 was released on March 19, 2009 and IE9 on March 14, 2011.

Remember that it is just as bad to use tables for layout as it is place tabular data into a DIV table. Tables still have a purpose! If you are confused on when to use each then you may find a better understanding in my previous post.

See a DEMO.

Enjoy.

Read More

Hidden Accessible Fieldsets

It is good to group checkboxes and radio buttons for accessibility purposes.  The fieldset and legend elements allow developers to group related controls and labels.  Grouping elements make it easier for users to understand their purpose.  Screen readers will detect fieldsets and inform the user of their purpose via the legend tag.  Keep in mind that an elaborate interface may not transfer logically to someone using a screen reader.   With CSS you can cater to both worlds.  You can utilize fieldsets but also hide them if they are not visually pleasing.  A hidden fieldset is completely detectable by a screen reader.

Here is a snipplet of CSS that will hide the fieldset and remove the legend indent.
If you want to hide the legend as well then alter the CSS as so:
See a DEMO

Enjoy.

Read More