## Testing for NaN

December 30th, 2011 Filed under: Tips and Tricks by Andrew

Quick tip, Number() is a useful method for converting a numeric string value into an integer. If the passed value turns out to be non-numeric, Number will return NaN. Unfortunately, testing if the returned value is NaN is somewhat convoluted as NaN does not equal NaN. Confused? Ponder the following:

```// returns NaN
console.log(Number(‘abc’));
// returns false, huh?
console.log(Number(‘abc’) == NaN);
// returns true, I’m confused
console.log(Number(‘abc’) != NaN);
// returns false, WTF?
console.log(NaN == NaN);

/* so how can I test for NaN? */
// returns false
console.log(Number(‘abc’) == false);
// also returns false, so no use
console.log(Number(‘abc’) == true);
// returns true, we’re getting somewhere
console.log(Number(‘5’) != false);
// returns false, oh well, this test is no use
console.log(Number(‘0’) != false);

/* ok, maybe we can test for typeof? */
// returns number as expected
console.log(typeof Number(‘5’));
// returns number, what the heck?
console.log(typeof Number(‘abc’));
// returns number? OMG! WTF?
console.log(typeof Number(NaN));
```

So, now that we’re thoroughly confused, we’ve discovered that NaN is a number, and NaN != NaN. So how the heck do we test for an invalid number? Luckily, we have the isNaN() method at our disposal, which outputs true if the passed string is NaN, and false if it is a number.

```// true, yay!
console.log(isNaN(‘abc’));
// false, yay!
console.log(isNaN(‘123’));
```

## CSS Modal Centering

December 26th, 2011 Filed under: Tips and Tricks, Tutorials by Andrew

Today I would like to give out a quick tip regarding modal dialogs. As we all know, one of the main characteristics of a modal is the fact that it is centered on screen. I’ve observed many different methods accomplishing this task, but none are as simple as the pure CSS method that I usually use. If you’re not familiar as to why exactly it’s difficult to center a modal, the reason being is that it is an absolutely positioned element. The usual trick of margin:0 auto; doesn’t work in this situation.

First, let’s review some of the usual techniques. The first, and most popular, is using JavaScript to calculate the width and height of the window, then assigning the appropriate top and left positions. The main disadvantage of this technique is that the top and left positions are based on the dimensions of the window when the modal is first rendered, if the window is re-sized, the values need to be recalculated. The second technique is CSS based and involves applying a left value of 50%. This will align the left edge of the modal with the exact center of the screen. To then center align the element, we apply a negative left margin that is half the pixel width of the modal. The main benefit of this method is that no scripting is involved. The major drawback is that this method doesn’t work with elements of unknown width. The width value needs to be explicitly set as the negative margin is based off of it.

My technique solves for the disadvantages of the previously mentioned methods. It works without scripting, it works when the window is re-sized, and it works with elements of unknown width. It is similar to the CSS method I’ve mentioned previously, but instead of applying a negative margin, we apply a right value of 50% to a relatively positioned child element. This means that we need to introduce a new element to wrap our modal, which is strictly used for positioning purposes:

```<style>
.modal{position:fixed; z-index:9999; left:50%;}
</style>

<!-- this is used to position the modal -->
<div class="modal">
</div>
```

As you can see, this is exactly the same as the previously mentioned technique, but the difference comes in when we add the inner element that will actually apply the theme to the modal:

```<style>
/* base */
.modal-position{position:relative; right:50%;}
/* theme */
</style>

<div class="modal">
<!-- this styles the modal content and nudges it to the center -->
<div class="modal-position">
<p>Lorem ipsum dolor ist amet.</p>
</div>
</div>
```

You can take a look at a live example here.

The main advantage of this method is that it is a very modular approach and leads to easy re-usability since it works with unknown widths. If you’re looking for an approach to vertically center the modal, that’s a whole different story. There’s no easy way to accomplish this with only CSS. I’ve found it that 90% of the time we can get away with just setting the top value to about 150 or 200px, so that the modal is always above the fold. Visually it looks nice and most users don’t even notice the fact that the modal is not perfectly vertically aligned.

## Sitepoint’s Test Your CSS Skills 39

August 30th, 2011 Filed under: Tips and Tricks by Andrew

I took a stab at an older CSS quiz from the Sitepoint forums. The challenge was to add arrow icons automatically to menus that contain flyouts. See the full details at the Sitepoint forum. See my solution here.

## Structuring Pagination Dots

August 29th, 2011 Filed under: Tips and Tricks by Andrew

Pagination dots seem to have become all the rage. What started as a common interface element of mobile applications has worked it’s way into the web, especially often seen in mobile websites. This component seems fairly simple and straightforward to build, but features one deceptive problem. In this post I intend to explore the best approach in building this interface and provide a nice code base for easy reusability.

First let’s explore the markup we should use to construct the pagination dots. Since this is somewhat of a navigational element, the most obvious approach is to utilize an unordered list. Since this component may, or may not be interactive, the best option is to nest an anchor tag inside each list item for flexibility. Below is an outline of the overall HTML structure. I’ve also created a class name to denote the active dot and wrapped the unordered list with a div element that will render the bar housing the pagination component.

```<div class="pg-dot-panel">
<ul class="pg-dots-row">
<li class="pg-dot">
<a href="#"></a>
</li>
<li class="pg-dot">
<a class="pg-active" href="#"></a>
</li>
<li class="pg-dot">
<a href="#"></a>
</li>
<li class="pg-dot">
<a href="#"></a>
</li>
<li class="pg-dot">
<a href="#"></a>
</li>
</ul>
</div>
```

Now on to the CSS markup. First of all, our pagination dots need to be centered on the page. We typically center elements by defining an explicit width and assigning it left and right auto margins. But here’s the problem, our pages can contain any number of dots, the number which is not known. Sure, we can use JavaScript to calculate the number of list items and then assign a width based on that amount, but the best solution should not be dependent on scripting and should be elegant enough to accommodate any number of dots. Now I would suggest you try to think about the possible solution for this little problem. When you have and idea, or are completely stumped, read on to learn how it is possible to center an element without applying an explicit width.

What I discovered when trying to solve this problem is that there is one HTML element that does not require a width in order to be centered. Want to know which one? It’s our good old friend the TABLE. Now you’re probably thinking, “Are you suggesting we use a table? Tables are evil!” No, not directly. Through the magic of CSS, we can apply a display of table to any element so that it emulates the behavior of a table. From here, the rest is easy. We can now use the same idea to style the inner elements and apply displays of tables cells to the list items. No need to use floats!

```.pg-dots-row {
display:table;
margin:0 auto;
}
.pg-dot{
display:table-cell;
}
.pg-dot a{
display:block;
height:14px;
width:14px;
background-color:#aaa;
}
```

Also note that with the power of CSS3, we can create the dots without using any images. If you only need to support the latest versions of modern browsers that are HTML5 enabled, then you are done. But, if you need to support IE 6, IE 7, or IE 8, you have yourself a whole lot more work to do. In that case we need to take a different approach to building these elements because earlier versions of IE do not support display table or table-cell, and IE 8 does not support border radius properties. The next approach is a little bit dirtier and not as elegant, but gets the job done. In this case we utilize the display inline-block property. This is a weird hybrid display that takes on the properties of a block, but lies inline such as a span element. Remember, span elements can be centered within a block level element, and they do not break onto new lines. With that said, here is our new CSS.

```.pg-dots-row{
display:block;
height:14px;
margin:0;
text-align:center;
}
.pg-dot{
display:inline;
vertical-align:top;
}
.pg-dot a{
display:inline-block;
height:14px;
width:14px;
background-color:#aaa;
overflow:hidden;
}
```

The main difference here is that the UL element stretches the width of the page instead of shrink wrapping. Keep this in mind if you are doing any visual styling. Also since we’re applying inline displays, our list items may contain inconsistent space between each item due to white space and line heights, as well as inconsistent vertical alignment. Usually playing around with line heights and font sizes remedies this. This is why I’ve used the following markup to kill any white space between each list item.

```<ul class="pg-dots-row">
<li class="pg-dot"><a href="#">
</a></li><li class="pg-dot"><a href="#" class="pg-active">
</a></li><li class="pg-dot"><a href="#">
</a></li><li class="pg-dot"><a href="#">
</a></li><li class="pg-dot"><a href="#">
</a></li>
</ul>
```

Also we need a fallback for browsers that do not support border radius.

```/* IE 6, IE 7, and IE 8 */
.ltie9 .pg-dot a{background:url(pg_dots.gif) no-repeat 0 0;}
.ltie9 .pg-dot a:hover{background-position:-32px 0;}
.ltie9 a.pg-active,
.ltie9 a.pg-active:hover{background-position:-16px 0;}
```

As a side note, I’ve used a modified version of Paul Irish’s browser targeting technique to target all versions of IE prior to 9.

```<!--[if lt IE 9]><body class="ltie9"><![endif]-->
<!--[if IE 9]><!--><body><!--<![endif]-->
```

This is a pretty neat method that does not rely on any JavaScript sniffing or CSS hacks. You can download all the HTML and CSS code for this tutorial from GitHub. You will find 3 HTML files, each suited to your specific needs. The file pgd_html5.html is for modern browsers only, which utilizes display table property. Use pgd_cross_browser.html if you need a cross browser solution. The file pgd_fallback.html is a hybrid that utilizes display table for modern browsers and display inline block for older browsers.

## Sitepoint’s Test Your CSS Skills 40

August 27th, 2011 Filed under: Tips and Tricks by Andrew

I decided to take on one of the CSS challenges featured regularly on the Sitepoint forums. The challenge was to vertically and horizontally center align a random set of images of variable sizes within a 200px by 200px overflowed hidden container. See the details on the Sitepoint Forum, and my results page here.

## Focusify jQuery Plugin

August 13th, 2011 Filed under: Tips and Tricks by Andrew

Recently I ran into an interesting problem while developing some forms for a project. The designer specked out the form’s behavior so that the label for each corresponding field changed color when the field was in focus.

I think this is a great visual cue to the user, and I didn’t think that it would present some problems while reviewing the comps a few weeks earlier. No problem I thought, I can easily do this with CSS. But once I began looking for a solution, I realized that this simple requirement would require a little bit of work. Obviously I didn’t want to resort to JavaScript for such a simple piece of interaction. I was hell bent on utilizing CSS, and came up with a few ideas. I knew that I would need to exploit the :focus pseudo-class. The problem with CSS is that it works from top down, parent to child hierarchy. You cannot style a parent element based on its child element’s state, nor can you do the same with a preceding element based on the following element’s state. So now I was trying many different combinations of coding the label and input relationship. The best possible solution I came up with was utilizing an adjacent sibling selector (element + element). But again, the problem with this selector is that the target is the element following a qualifier element, so the state of the qualifier determines the state of the target. In the usual form, the label comes before the field element which gains the focus, so the standard structure would not work here. I had to rearrange the code structure so that the label followed the input, this way the input’s state determines the label’s state (input:focus + label).

```.fy-wrap .focus-hook:focus + label{background-color:#FFFCBD;}

<div class="fy-wrap">
<input id="fy_txt_a_1" class="fy-txt focus-hook" type="text" />
<label for="fy_txt_a_1">First Name:</label>
</div>
```

Visually, this worked like a charm, but the fact that now the HTML structure didn’t match the visual hierarchy bothered me quite a bit. In addition, there are several major cons to using this technique:

1. Does not work in IE 6 and IE 7, very buggy in IE 8. The :focus pseudo selector isn’t supported in these browsers, neither is the adjacent sibling selector.
2. Ugly and unclear CSS selectors.
3. Markup doesn’t semantically match the visual order of elements.
4. Even more ugly workarounds are required when the label is positioned above the field. This doesn’t lead to easily reusable code.

You can view an example of this CSS technique here.

After weighing the good with the bad, I had little choice but to go with a JavaScript based solution. Luckily, I devised a jQuery plugin that took care of the problem with one line.

`\$('#fy_form_1').find('.focus-hook').focusify();`

The plugin simply appends a class to the adjacent label when it’s corresponding field is in focus, and removes the class when the field blurs. With some optional settings, we can even target the parent element for some fancier effects.

```\$('#fy_form_2').find('.focus-hook').focusify({parent: '.fy-wrap'});

div.infocus{
-webkit-box-shadow:3px 3px 10px #bbe9ff, -3px -3px 10px #bbe9ff;
-moz-box-shadow:3px 3px 10px #bbe9ff, -3px -3px 10px #bbe9ff;
-o-box-shadow:3px 3px 10px #bbe9ff, -3px -3px 10px #bbe9ff;
box-shadow:3px 3px 10px #bbe9ff, -3px -3px 10px #bbe9ff;
}
div.infocus label{border-color:#00aeef;}
```

We can even utilize a siblings selector and target non-adjacent sibling elements, and even target the parent element at the same time.

```\$('#fy_form_3').find('.focus-hook').focusify({
parent: 'fieldset',
sibling: 'label',
classname: 'multi-focus'
});
```

Using the Focusify plugin, in combination with CSS, opens up an unlimited number of possibilities for form elements. I imagine we can even create some really neat show/hide interactions with CSS3 transitions. You can download and read the full documentation and demos for the plugin on my Focusify github page.