Jack Moore

Cross-browser mouse positioning

2012-11-27T00:00:00-08:00

Mouse Event Properties

clientX, clientY

Standard: W3C Recommendation
Mouse position relative to the browser's visible viewport.

screenX, screenY

Standard: W3C Recommendation
Mouse position relative to the user's physical screen.

offsetX, offsetY

Standard: W3C Working Draft
Mouse position relative to the target element. This is implemented very inconsistently between browsers.

pageX, pageY

Standard: W3C Working Draft
Mouse position relative to the html document (ie. layout viewport).

x, y

Standard: W3C Working Draft
Equivalent to clientX, clientY, but is unsupported by some browsers. Use clientX, clientY instead.

layerX, layerY

No Standard
Mouse position relative to the closest positioned ancestor element. If none of the ancestor elements have positioning, the mouse position is relative to the document (like pageX, pageY). LayerX, layerY have an uncertain future.

QuirksMode has a great compatibility table that details inconsistencies in the non-standard properties. Know that only clientX, clientY, screenX, and screenY are part of the W3C Spec.

Normalization

Calculating pageX, pageY

The only major browser that does not support these properties is IE8. If you are doing event handling with jQuery, it will automatically normalize pageX and pageY for you. If you are not using jQuery's normalized events but still have access to the jQuery, you can use jQuery.event.fix to normalize the event object. Example:

document.body.onclick = function(e) {
    e = e || window.event;
    e = jQuery.event.fix(e);
    console.log([e.pageX, e.pageY]);
};

Without jQuery, the clientX and clientY properties can be added to the viewports scrollLeft and scrollTop to calculate the pageX and pageY values.

document.body.onclick = function(e) {
    e = e || window.event;

    var pageX = e.pageX;
    var pageY = e.pageY;
    if (pageX === undefined) {
        pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    console.log([pageX, pageY]);
};

Calculating offsetX, offsetY

According to the W3C Working Draft, offsetX and offsetY should be relative to the padding edge of the target element. The only browser using this convention is IE. Webkit uses the border edge, Opera uses the content edge, and FireFox does not support the properties.

Normalizing to the border edge is easiest to do, thanks to the nifty element.getBoundingClientRect:

document.body.onclick = function(e) {
    e = e || window.event;

    var target = e.target || e.srcElement,
        rect = target.getBoundingClientRect(),
        offsetX = e.clientX - rect.left,
        offsetY = e.clientY - rect.top;

    console.log([offsetX, offsetY]);
};

If you wanted to normalize to the W3C draft spec, then the border width needs to be subtracted from the previously calculated offsetX and offsetY:

document.body.onclick = function(e) {
    e = e || window.event;

    var target = e.target || e.srcElement,
        style = target.currentStyle || window.getComputedStyle(target, null),
        borderLeftWidth = parseInt(style['borderLeftWidth'], 10),
        borderTopWidth = parseInt(style['borderTopWidth'], 10),
        rect = target.getBoundingClientRect(),
        offsetX = e.clientX - borderLeftWidth - rect.left,
        offsetY = e.clientY - borderTopWidth - rect.top;

    console.log([offsetX, offsetY]);
};

Web Development Using Virtual Machines

2012-02-21T00:00:00-08:00

Virtualization

I use VirtualBox. It's a free, open source, cross-platform virtualization program. I'll use it to create a virtual system platform for running Ubuntu 11.10 Sever 32-bit as a guest operating system. There are significant benefits to using a virtual machine:

Replicate your production environment.
Avoid headaches by developing on same software configuration and hardware limitations as your production environment.
Easy to copy, transfer, backup, and restore.
VirtualBox has a snapshot feature that can be used at any time to save the current machine state. Experiment without hesitation knowing that you can always revert to a previous save state. The virtual machine can be copied for use on another computer or used as the starting point for a new machine.
No network is necessary to communicate with the virtual server.

Creating A New Virtual Machine

In VirtualBox, clicking 'New' opens the new virtual machine wizard. It's just a few steps and the defaults are fine. Choose Linux for OS Type and Ubuntu for the version. The memory defaults to 512 MB, which is on par with an entry level VPS. This can be adjusted at any time. Once the VM is created, select it and click on 'Settings'.

Storage

Go to the storage option and click on the empty IDE controller. Mount the Ubuntu iso as a DVD drive. When the guest system is started it will boot from the drive and load Ubuntu's installer.

Network

I have the network adapter attached to NAT. From the advanced settings, open 'Port Forwarding'. I added a forwarding rule for http requests. Any requests to port 80 on the host will be forwarded to the guest, allowing me to access Apache as if it were running locally.

Shared Folders

Update: I have stopped using shared folders due to some outstanding bugs with VirtualBox. I use an SFTP client to automatically sync files between my host and guest machine.

I'm going to set up shared folders so that Apache can serve files directly from the host.

Starting The Virtual Machine

I am going to handwave over the specifics of using LAMP. However, the OS installation process should be straight forward. There aren't many things to go wrong when installing a GUI-less system on virtualized hardware. For the sake of brevity, I picked LAMP Server during the software selection stage to have those packages automatically installed.

First Login

Update the package index and upgrade existing packages:

sudo apt-get update
sudo apt-get upgrade

This might be a good place to create a snapshot. If anything goes wrong, just revert to the snapshot.

VirtualBox Guest Additions

The Guest Additions package needs to be installed in order to access the shared folder. Guest Additions has a couple of prerequisite packages (dkms and linux-headers) that we'll want to install first. Click on 'Devices' and select 'Install Guest Additions'. This adds a device to the system that will need to be mounted before we can access it's file system. The device should be under /dev/cdrom and we can mount it to the existing /media/cdrom. Then we can run the VBoxLinuxAdditions script which will install Guest Additions. After, you'll need to logout / login for the shared folder to be auto-mounted.

Once you've clicked on 'Install Guest Addtions', execute the following commands:

sudo apt-get install linux-headers-$(uname -r)
sudo apt-get install dkms
sudo mount /dev/cdrom /media/cdrom
sudo sh /media/cdrom/VBoxLinuxAdditions.run
logout

The name of the shared folder will be prefixed with 'sf' and it will be mounted under /media. Since I named my shared folder 'projects', the path will be /media/sfprojects/. Currently, Apache does not have read/write permissions for the shared folder. The Apache user (www-data) will need to be added to the vboxsf group to have those permissions. I added my user as well.

sudo usermod -aG vboxsf www-data
sudo usermod -aG vboxsf jack

Configure Apache

I'm going to make two small additions to Apache's httpd.conf. I'm going to get Apache a ServerName, but more importantly, I am going to turn off EnableSendfile. There are outstanding cache issues related to using VirtualBox's shared folders, turning EnableSendfile off will help Apache send fresh files.

File: /etc/apache2/httpd.conf

ServerName ubuntu
EnableSendfile off

Configure Apache's Virtual Hosts

Let's create a virtual host that serves files from the shared folder. I'm going to use 'dev' as my TLD to indicate that the site is hosted on my development environment. First we need to create an entry for a new site in Apache's sites-available directory:

File: /etc/apache2/sites-available/jacklmoore.dev

<VirtualHost *:80>
    ServerName jacklmoore.dev
    DocumentRoot /media/sf_projects/jacklmoore
</VirtualHost>

Now enable the site and reload Apache:

sudo a2ensite jacklmoore.dev
sudo service apache2 reload

Add an entry to your host machine's hosts file mapping the server name to your local address. Because port 80 was forwarded, all local HTTP requests will be forwarded to the virtual machine. There, Apache will check to see if there is a site enabled by that name.

CSS Ribbon Menu

2012-02-01T00:00:00-08:00

Browser Support

IE8 and IE9 do not support CSS3 transitions, so the hover state will not be animated for those browsers. Otherwise it looks and functions the same, which I think is a very acceptable fallback. IE7 lacks support the :before and :after pseudo-elements, so the ribbon will not have the forked ends or display folds while hovering. The pseudo-elements could be replaced with actual markup IE7 support is needed.

The HTML

<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>About</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Contact</span></a>
</div>

The forked ends and folds are created with CSS pseudo-elements, allowing for very clean HTML.

The CSS

Forked ends

.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
    border:1.5em solid #fff;
}

.ribbon:after {
    border-right-color:transparent;
}

.ribbon:before {
    border-left-color:transparent;
}

Here the :before and :after pseudo-elements are used to create empty elements with a thick border. The border has one edge set to transparent. This leaves the element looking like it had a triangular section removed, creating the forked look.

Links

.ribbon a:link, .ribbon a:visited { 
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}

The links and the forked ends are all floated left so that they fit flush against each other. The hidden overflow hides the folds that are positioned beneath the span elements.

Animated Folds

.ribbon span {
    background:#fff;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;

    -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
    background:#FFD204;
    margin-top:0;
}

.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

A nifty trick for vertically centering text inside of an element is to set the line-height to be the desired height of the element, and remove any vertical padding. This will keep the height fixed and the text centered, even if the font-face, font-size, or font-weight changes.

The top-margin gives the span space to be animated while staying within the anchor element. The span is given a relative position so that it will be the positioning reference for it's absolutely positioned :before and :after pseudo-elements.

A CSS3 transition animates the transition between the span's normal state and it's hover state. Transitions are an experimental feature and are not yet part of the CSS3 specification. As such, each browser has implemented transitions using their respective vendor prefix. The non-prefixed transition property is used under the assumption that, in the future, the property will be a part of the CSS specification.

The :before and :after pseudo-elements create the folded edges when hovering a link. They are absolutely positioned underneath the span element, and will normally be hidden due to the anchor element having a hidden overflow. The pseudo-elements contain only a bottom border and a left or right border. Since the borders are as thick as they are long (0.5 x 0.5) and are adjacent, it creates two triangles for us to apply a color to. The bottom borders will be the same color as the ribbon, and the left or right borders will have the color of the folded edge.

See The Demo

jQuery Modal Tutorial

2012-01-20T00:00:00-08:00

See The Demo

Drafting the HTML

I like to create a rough draft just using HTML and CSS, leaving the scripting for last. I'll write the HTML first to structure the modal, even though the final HTML will be generated by the script.

<div id='overlay'></div>
<div id='modal'>
    <div id='content'>No JavaScript Yet!</div>
    <a href='#' id='close'>close</a>
</div>

This modal will have two root elements: #overlay and #modal. The overlay is going to be a semi-transparent layer that fills the visitor's viewport. This turns the modal into a focal point, and reduces focus for the rest of the page.

The CSS

#overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

The overlay has a fixed position that is relative to the visitor's viewport. The 100% width and height refer to the viewport size, so we get complete coverage no matter what part of the page the visitor is actually viewing. Unfortunately, fixed position is not supported in iOS 4 or below. IE8 and IE7 do not support opacity, so an alpha filter is used instead.

#modal {
    position:absolute;
    background:url(tint20.png) 0 0 repeat;
    background:rgba(0,0,0,0.2);
    border-radius:14px;
    padding:8px;
}

#content {
    border-radius:8px;
    background:#fff;
    padding:20px;
}

The important thing here is that #modal will be absolutely positioned, the rest of the rules just provide a nice default appearance.

The RGBa background will give a black fill (0,0,0) at 20% opacity (0.2), which will overwrite the previous background property. IE8 and IE7 do not support RGBa, so they will continue to use the previous background property which uses a semi-transparent PNG background image.

I gave #modal a larger border-radius than #content. This made a border that is natural looking and consistent in thickness. IE8 and IE7 do not support border-radius and will instead display the normal square corners.

#close {
    position:absolute;
    background:url(close.png) 0 0 no-repeat;
    width:24px;
    height:27px;
    display:block;
    text-indent:-9999px;
    top:-7px;
    right:-7px;
}

The close button is absolutely positioned relative #modal, since #modal is it's closest ancestor element with positioning. Since I used an anchor element for the close button, it's default display of inline must be changed to block in order to apply a fixed width and height to it. Text-indent moves the anchor's text offscreen so that it will not overlay the background image.

See The Work In Progress

The Script

I would like the modal to handle the following things:

Create it's own HTML and append it to the document
Display specified content
Open on command
Close on command
Be positioned in the center of the viewport
Stay centered if the viewport is resized

Let's stump out the function and variable names:

var modal = (function(){
    var 
    method = {},
    $overlay,
    $modal,
    $content,
    $close;

    // Center the modal in the viewport
    method.center = function () {};

    // Open the modal
    method.open = function (settings) {};

    // Close the modal
    method.close = function () {};

    return method;
}());

Here we have a function that is immediately executed and returns an object containing the methods needed to control the modal. This object is assigned to the modal variable. The rest of the variables are references to their corresponding elements in the document. Now lets fill in the missing code.

Append The HTML

$overlay = $('<div id="overlay"></div>');
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#">close</a>');

$modal.hide();
$overlay.hide();
$modal.append($content, $close);

$(document).ready(function(){
    $('body').append($overlay, $modal);
});

This generates the same HTML structure used earlier in the guide, now created and added to the document by our script.

Center Method

method.center = function () {
    var top, left;

    top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
    left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

    $modal.css({
        top:top + $(window).scrollTop(), 
        left:left + $(window).scrollLeft()
    });
};

Here we balance the distance between each side of the viewport and each side of the modal. jQuery's .outerWidth() and .outerHeight() are used because borders and padding should also be factored in. I used Math.max() so that I could be sure that no value returned would be less than 0. This means that if the modal is larger than the visitor's viewport, it will be positioned in the top left of the viewport rather running beyond that where it could be potentially being inaccessible. $(window).scrollTop() returns the position of the vertical scrollbar, which is the distance from the top of the document to the top of the viewport. This needs to be added to account for any scrolling that has happened.

Open Method

method.open = function (settings) {
    $content.empty().append(settings.content);

    $modal.css({
        width: settings.width || 'auto', 
        height: settings.height || 'auto'
    })

    method.center();

    $(window).bind('resize.modal', method.center);

    $modal.show();
    $overlay.show();
};

The open method accepts an object of our settings. It can contain three properties: content, width, height. Content can be text, HTML, or an element/jQuery object. We append the data from settings.content to #content, and give #modal a width and height if either was specified in the settings object. Method.center() is called to center the modal in the viewport and is bound to the window's resize event. This will cause the modal to re-center itself whenever the viewport changes size. I made use of jQuery's event namespacing so that later, when we unbind the event, we can make sure not to disturb any other resize events that other scripts may have bound to the window. The last thing we do is reveal #modal and #overlay.

Close Method

method.close = function () {
    $modal.hide();
    $overlay.hide();
    $content.empty();
    $(window).unbind('resize.modal');
};

Here we hide the #modal and the #overlay and remove the content. Then we unbind the resize event because there is no need for it when the modal is closed. Outside of the method

Close Button

$close.click(function(e){
    e.preventDefault();
    method.close();
});

The default action of the click event is canceled (the browser from redirecting to the link's href) by calling e.preventDefault(), then the close method is called.

Examples Calling The Modal

modal.open({content: "Howdy"});

modal.open({content: "<p>Howdy</p>"});

modal.open({content: $("<p>Howdy</p>"), width: "500px", height: "200px"});

// Ajax
$.get('ajax.html', function(data){
    modal.open({content: data});
});

See The Demo

A Better jQuery Accordion

2012-01-18T00:00:00-08:00

First Version:

<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin:0; padding:0; } /* a simple reset */
    .head, li, h2 { margin-bottom:15px; }
    .head { display:block; }
    .content { display:none; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('.head').click(function(e){
        e.preventDefault();
        $(this).closest('li').find('.content').slideToggle();
      });
    });
  </script>
</head>
<body>
  <ul>
    <li>
      <a href='#' class='head'>Heading 1</a>
      <div class='content'>Content 1
      </div>
    </li>
    <li>
      <a href='#' class='head'>Heading 2</a>
      <div class='content'>Content 2</div>
    </li>
    <li>
      <a href='#' class='head'>Heading 3</a>
      <div class='content'>Content 3</div>
    </li>
  </ul>
</body>
</html>

See the Demo

The Script

The unordered list will be the structure for the accordion, with each list item being one of the panels. I think documenting the code will make it easier to understand than trying to explain the process, so here is the same script broken up with comments:

// Wait until the DOM is loaded, before trying to query the document
$(document).ready(function(){

  // select the .head elements, and bind an event handler to them
  $('.head').click(function(e){

    // prevent the default action of the click event
    // ie. prevent the browser from redirecting to the link's href
    e.preventDefault();

    // 'this' is the execution context of the event handler
    // it refers to the clicked .head element
    $(this)

    // Walk up the DOM tree to find the closest list item
    // It is the closest shared ancestor of both .head and .content
    .closest('li')

    // Search the list item for .content
    .find('.content')

    // Trigger the sliding animation on .content
    .slideToggle();
  });
});

Problem 1: It's Jumpy

The demo demonstrated that the first accordion's animation wasn't fluid at all. jQuery miscalculated the height of the content ('.content') because jQuery gave it an absolute position before measuring the height. This caused the dimensions to change. Giving the content a fixed width and/or height would fix this, but that would be impractical for fluid layouts or content of varying size. An alternative solution is to give the content's parent element a non-static position. This will insure that the content is positioned relative to the parent, which constrains the content to the width and height we expect it to have.

li { position:relative; }

Problem 2: It's Still Jumpy

There is a bit of a jump at the start of slideDown and end of slideUp from the browser collapsing adjoining vertical margins. When the slideUp animation completes, jQuery will hide the element being animated. This means there will no longer be an element in the document flow between the .head element's margin and the list item's margin, triggering a collapse. This can be prevented if the margins are separated by padding, border, or clearance. Here are a few examples:

Use overflow:auto or overflow:hidden on the list item to achieve clearance. I recommend using hidden overflow as auto overflow can cause additional jumping:
```
li { overflow:hidden; }
```

Or use a transparent border:

li { border-bottom:1px solid transparent; }

Or use padding instead of margin:
```
.head, li, h2 { padding-bottom:15px; }
```

There is currently an open ticket about this on bugs.jquery.com.

Problem 3: The Animation Queues Up

Clicking on the <h2> two or more times in quick succession causes the animation to queue up. Normally .stop() is used in this situation, but that causes a major problem with .slideUp(). When called,.slideUp() will record the current height as the height .slideDown() should return to. If .stop() is called during the slideDown animation, an incomplete height will be recorded making the unrevealed content inaccessible until the document is reloaded. One way to work around that is to only call $.slideToggle() if the content is not currently being animated.

$('.head').click(function(e){
  e.preventDefault();
  $(this).closest('li').find('.content').not(':animated').slideToggle();
});

Caching

The results of $(this).closest('li').find('.content') could be cached so that the document doesn't have to be queried on each interaction. A recommended practice, but probably not worth the extra code in this case since we have to create a closure to hold it. The click event happens infrequently (or never if the user chooses not to interact with the accordion). If we were binding to a high frequency event, such as mousemove, caching would be much more important.

// .each() is used to create a closure to store a cache of the query.
$('.head').each(function(){
  var $content = $(this).closest('li').find('.content');
  $(this).click(function(e){
    e.preventDefault();
    $content.not(':animated').slideToggle();
  });
});

See the Demo

Fixing IE's Opacity Inheritance

2012-01-17T00:00:00-08:00

In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent.

All of this text should have a 50% opacity...

But this line displays at full opacity in IE8 and IE7.

And this line displays at full opacity in IE9, IE8 and IE7.

<div style='opacity: 0.5; filter: alpha(opacity=50);'>
    All of this text should have a 50% opacity...
    <div style='position: relative'>But this line displays at full opacity in IE7 and IE8.</div>
    <div style='position: absolute'>And this line displays at full opacity in IE7, IE8 and IE9.</div>
</div>

This bug is triggered when the child element has any position other than static, regardless of the parent's position value (static, fixed, absolute, or relative). IE9 only has a problem when the child element has a fixed or absolute position, and the parent element has a static position. Maddeningly, IE7 and IE8 have other opacity related bugs which may derail alternative approaches.

Workarounds

IE9: Give the parent a non-static position.
IE8: Have the child inherit the filter style.
IE7: Have the child inherit the filter style and give the parent a non-static position.

All of this text has 50% opacity...

Including this line.

And this line.

<div style='opacity: 0.5; filter: alpha(opacity=50); position: relative;'>
    All of this text has 50% opacity...
    <div style='position: relative; filter: inherit;'>Including this line.</div>
    <div style='position: absolute; filter: inherit;'>And this line.</div>
</div>

Alternatively, a new alpha filter could be set on the child elements. This could be useful in situations where inheriting the parent's filters is undesirable.

<div style='opacity: 0.5; filter: alpha(opacity=50); position: relative'>
    All of this text has 50% opacity...
    <div style='position: relative; filter: alpha(opacity=50);'>Including this line.</div>
    <div style='position: absolute; filter: alpha(opacity=50);'>And this line.</div>
</div>

A caveat to having a filter on the child element is that IE9 will apply both the child's filter and the parent's filter and/or opacity. The examples above effectively have a 25% opacity in IE9 (50% of 50%). Use conditional CSS to target IE8 and lower when setting the child's alpha filter.

jQuery Tabs Tutorial

2011-12-23T00:00:00-08:00

Writing the Markup

Lets start by writing our markup as if our visitor doesn't even have JavaScript enabled. Even if you do not wish to support users without JavaScript, it is still a good pattern to follow to exercise separation of concerns.

  <ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
  </ul>
  <div id='tab1'>
    <p>Hi, this is the first tab.</p>
  </div>
  <div id='tab2'>
    <p>This is the 2nd tab.</p>
  </div>
  <div id='tab3'>
    <p>And this is the 3rd tab.</p>
  </div>

I used fragment identifiers (#tab1, #tab2, #tab3) for the href values in the navigation. Each element containing a tab's content is given an ID that corresponds to a fragment identifier. This way the links are semantic and continue to be functional even if the visitor has JavaScript disabled.

A nice side effect of using only a fragment identifier for the href value is that retrieving the value through jQuery's .attr() method will give us the exact selector we need to query the document for that tab's content, ie. $('ul.tabs a').attr('href') will return #tab1.

Writing the jQuery

Rather than describing the code, I am just going to include it with comments that explain each step.

$('ul.tabs').each(function(){
  // For each set of tabs, we want to keep track of
  // which tab is active and it's associated content
  var $active, $content, $links = $(this).find('a');

  // If the location.hash matches one of the links, use that as the active tab.
  // If no match is found, use the first link as the initial active tab.
  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
  $active.addClass('active');
  $content = $($active.attr('href'));

  // Hide the remaining content
  $links.not($active).each(function () {
    $($(this).attr('href')).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function(e){
    // Make the old tab inactive.
    $active.removeClass('active');
    $content.hide();

    // Update the variables with the new link and content
    $active = $(this);
    $content = $($(this).attr('href'));

    // Make the tab active.
    $active.addClass('active');
    $content.show();

    // Prevent the anchor's default click action
    e.preventDefault();
  });
});

See the complete document. I used jQuery's .on() method for event binding, so be sure to use jQuery 1.7 or higher.

HTML5 Placeholder Attribute

2011-11-08T00:00:00-08:00

Placeholder

Placeholder text is a short example or hint text that is shown in a form field when the field is unfocused and has no input from the user.

This could be considered a poor example, as label elements should be used for maximum accessibility. Not showing labels can make forms look less complex, increasing usability, but hurt accessibility. The HTML5 spec instructs that the placeholder attribute should not be used as an alternative to a label.

While the adding & removing of placeholder text on field focus has long been accomplished through JavaScript, there is now a placeholder attribute in the HTML5 working draft. Most modern browsers support the placeholder attribute and will automatically add/replace the placeholder text. They will also automatically exclude the placeholder from being sent when the form is submitted. However, versions of Internet Explorer prior to IE10 do not support the attribute.

<input type='text' name='email' placeholder='Email Address'/>

Supporting Older Browsers

// A jQuery based placeholder polyfill
$(document).ready(function(){
  function add() {
    if($(this).val() === ''){
      $(this).val($(this).attr('placeholder')).addClass('placeholder');
    }
  }

  function remove() {
    if($(this).val() === $(this).attr('placeholder')){
      $(this).val('').removeClass('placeholder');
    }
  }

  // Create a dummy element for feature detection
  if (!('placeholder' in $('<input>')[0])) {

    // Select the elements that have a placeholder attribute
    $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);

    // Remove the placeholder text before the form is submitted
    $('form').submit(function(){
      $(this).find('input[placeholder], textarea[placeholder]').each(remove);
    });
  }
});

To enable styling, this script adds a class of 'placeholder' while the placeholder text is being displayed.

Styling The Placeholder

Since placeholder has yet to be standardized, styles are applied through vendor-specific prefixes. Even though Opera 11 supports the placeholder attribute, it does not offer any way to style it at this time. It's a good idea to go ahead and specify at least the color property to normalize the color between browsers. Otherwise, a default style will be provided which will vary from browser to browser.

::-webkit-input-placeholder { color:#999; }
::-moz-placeholder { color:#999; } /* FF 19+ */
:-moz-placeholder { color:#999; } /* FF 18- */
:-ms-input-placeholder { color:#999; }
.placeholder { color:#999; } /* for the polyfill */

John Catterfeld compiled a nifty list of CSS properties can be applied to placeholders.

NaturalWidth and NaturalHeight in IE

2011-10-23T00:00:00-07:00

Actual width and height in modern browsers

Modern browsers (including IE9) provide naturalWidth and naturalHeight properties to IMG elements. These properties contain the actual, non-modified width and height of the image.

  var 
  nWidth = document.getElementById('example').naturalWidth,
  nHeight = document.getElementById('example').naturalHeight;

Actual width and height in IE8 and IE7

The naturalWidth and naturalHeight properties are not supported in IE8 or lower. The height and width property will give the apparent width and height after stylesheet and inline styles, inline width and height attributes, and the display property of the image and the image's parent elements have been applied. The simplest way to get the unmodified width and height is to create a new image element, and use it's width and height property.

  function getNatural (DOMelement) {
    var img = new Image();
    img.src = DOMelement.src;
    return {width: img.width, height: img.height};
  }

  var 
  natural = getNatural(document.getElementById('example')),
  nWidth = natural.width,
  nHeight = natural.height;

jQuery naturalWidth() and naturalHeight()

Here is a short jQuery (any version) plugin that adds two methods: naturalWidth() and naturalHeight(). It uses branching to determine if naturalWidth and naturalHeight are supported by the browser. If supported, the method just becomes a getter for the naturalWidth or naturalHeight property. If not supported, the method creates a new unstyled image element and returns that element's actual width and height.

  // adds .naturalWidth() and .naturalHeight() methods to jQuery
  // for retreaving a normalized naturalWidth and naturalHeight.
  (function($){
    var
    props = ['Width', 'Height'],
    prop;

    while (prop = props.pop()) {
    (function (natural, prop) {
      $.fn[natural] = (natural in new Image()) ? 
      function () {
      return this[0][natural];
      } : 
      function () {
      var 
      node = this[0],
      img,
      value;

      if (node.tagName.toLowerCase() === 'img') {
        img = new Image();
        img.src = node.src,
        value = img[prop];
      }
      return value;
      };
    }('natural' + prop, prop.toLowerCase()));
    }
  }(jQuery));

  // Example usage:
  var 
  nWidth = $('img#example').naturalWidth(),
  nHeight = $('img#example').naturalHeight();

Colorbox with Flickr Feed

2011-10-10T00:00:00-07:00

Step 1: Include jQuery and Colorbox

Feel free to jump straight to the demo to view-source. We will be building off of this basic HTML5 document:

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="colorbox.css" />
        <script src="jquery.min.js"></script>
        <script src="jquery.colorbox-min.js"></script>
        <script>
            // our code
        </script>
    </head>
    <body>
    </body>
</html>

Step 2: Get Flickr's JSON data

The first thing we will want to do is use jQuery to fetch the JSON object from Flickr's public feed. We will use the data in that JSON object to create the markup for our gallery. The data set returned by the feed can be filtered by tags and can include multiple users. Properties for these can be added to the params object below, but this demo will just be using the default settings.

var params = {
    id: '68459092@N06', // my Flickr User ID
    format: 'json',
    jsoncallback: '?'
},
feedURL = 'http://api.flickr.com/services/feeds/photos_public.gne',
feedQuery = decodeURIComponent($.param(params));

$.getJSON(feedURL + '?' + feedQuery, buildLinks);

I recommend taking a moment to view the raw JSON data. The items property contains an array of objects that contain all of the data needed to create the links and thumbnails. The URL to the photo is found in the media object. This URL is formatted to give the 'small' size of the photo. We will have to alter this URL to give us a larger size to display in Colorbox and again to give us a smaller size to use for a thumbnail. Fortunately we just have to exchange the size suffix with the suffix for the size we want.

Step 3: Build the Links

Let's create the anchor elements, assign Colorbox to them, and add them to our document:

function buildLinks (json) {
    var 
    photo,
    $links = $(), 
    $thumb,
    $anchor;

    while ( photo = json.items.pop() ){
        $anchor = $('<a/>').attr({
            // get the medium-large size photo
            href: photo.media.m.replace('_m', '_z'),
            title: photo.title
        });

        $thumb = $('<img/>').attr({
            // get the small-square size thumbnail photo
            src: photo.media.m.replace('_m', '_s'),
            alt: photo.title
        }).appendTo($anchor);

        $links = $links.add($anchor);
    }

    $links.colorbox({rel:'flickr', speed:0});

    // Wait until the DOM has loaded before trying to append to the body
    $(document).ready(function () {
        $('body').append($links);
    });
}

View the demo and see it all put together.

Notes

I'm aware this code isn't the most efficient or robust, but hopefully it made for a clear demo.
Currently our thumbnails are in descending order by date. To list the thumbnails in ascending order, replace json.items.pop() with json.items.shift().

Tragedy Struck On Threadless

2011-10-05T00:00:00-07:00

Link

Working with JavaScript click events

2011-08-20T00:00:00-07:00

A Greedy Click Event

// Example of a typical click-event binding:
jQuery('a#example').click(function(e){
    console.log('click!');
    e.preventDefault();
});

Here the click event has been intercepted and the default behavior canceled to prevent the browser from being directed to a new location. Depending on the situation, this may cancel more actions than intended. A middle-button click or ctrl+click (open in new tab), shift+click (open in new window), or alt+click (download) would be canceled as well.

If the intention was to only cancel an unmodified left-click, then other mouse buttons and event modifiers should be filtered out.

A Discriminating Click Event

$('a#example').mousedown(function(e){
    if (e.which == 1 && !(e.shiftKey || e.altKey || e.metaKey)) {
        $(this).unbind('click.lc').bind('click.lc', function(event){
            console.log('click!');
            event.preventDefault();
        });
    }
});

This would be much more involved if it were not for jQuery normalizing the event object to W3C standards:

Event.which is the normalized button identifier (left-click will be '1' for all browsers).
Event.metaKey is the normalized ctrl (for PC) and command (for MacOS) event modifier.
Event.preventDefault() is the normalized method for stopping the browser's default action.

The reason to detect the mousedown seperately from the click event itself is that IE only provides button identification for mousedown and mouseup events. There is no way to detect which mouse button was clicked from a click event object in IE. Since the mousedown event does not necessarily preceed a click event, the click event handler should be unbound first to insure that it is not applied multiple times. I namedspaced the event ('.lc' for 'left-click') so that any unrelated event handlers would not be unbound as well.

A Good Enough approach would be to simply ignore IE's lack of button identification:

$('a#example').click(function(e){
    if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey)) {
        console.log('click!');
        e.preventDefault();
    }
});

This works perfectly for non-IE browsers because the lowest button identifier is 1, and that is for the left-mouse-button. If e.which is greater than 1, then it had to have been from another mouse-button. For click events, jQuery sets e.which to 0 for every mouse-button in IE. Not being able to identify which mouse-button is not that important in most cases. The right-mouse-button does not need to be identified because it does not generate a click event, it generates a contextmenu event. In IE the default behavior of a middle-click on anchor elements with a valid non-fragment href property cannot be canceled, so there is no need to identify it for purposes of exclusion.

JavaScript: working with URLs and GET

2011-08-03T00:00:00-07:00

I am frequently asked about how to deal with JavaScript that depends on parameters in a URL. This topic has been exhaustively covered so there isn't anything new here. MooTools, Prototype, and jQuery users should know that those libraries already have (better) serialize methods, such as jQuery's param. Ben Alman wrote a much more sophisticated unserialize method called deparam that is available as a jQuery plugin. However, I still felt like writing my own and hopefully someone will find it useful.

Methods

URL.serialize(parameters)	Accepts an object of parameters and returns a querystring.
URL.unserialize(querystring)	Accepts a querystring and returns an object of parameters.
URL.parse(url)	Accept any valid URL and breaks it into it's components, such as host, hash (fragment), and search (querystring).

Usage

URL.serialize({name:'Tom', age:50, hobby:'fishing & gardening'});
//  returns name=Tom&age=50&hobby=fishing%20%26%20gardening

URL.unserialize('name=Tom&age=50&hobby=fishing%20%26%20gardening');
//  returns {name:"Tom", age:"50", hobby:"fishing & gardening"}

URL.parse('http://www.example.com:8080/blog/index.php?pageID=2&query="parts"#top');
//  returns
//  {
//    file: "index.php",
//    hash: "#top",
//    host: "www.example.com:8080",
//    hostname: "www.example.com",
//    href: "http://www.example.com:8080/blog/index.php?pageID=2&query="parts"#top",
//    params: {pageID:"2", query:"parts"},
//    pathname: "/blog/index.php",
//    port: "8080",
//    protocol: "http:",
//    search: "?pageID=2&query=%22parts%22"
//  }

Source

var URL = (function (a) {
  return {
    // create a querystring from a params object
    serialize: function (params) { 
      var key, query = [];
      for (key in params) {
        query.push(encodeURIComponent(key) + "=" + encodeURIComponent(params[key]));
      }
      return query.join('&');
    },

    // create a params object from a querystring
    unserialize: function (query) {
      var pair, params = {};
      query = query.replace(/^\?/, '').split(/&/);
      for (pair in query) {
        pair = query[pair].split('=');
        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
      }
      return params;
    },

    parse: function (url) {
      a.href = url;
      return {
        // native anchor properties
        hash: a.hash,
        host: a.host,
        hostname: a.hostname,
        href: url,
        pathname: a.pathname,
        port: a.port,
        protocol: a.protocol,
        search: a.search,
        // added properties
        file: a.pathname.split('/').pop(),
        params: URL.unserialize(a.search)
      };
    }
  };
}(document.createElement('a')));

Solving IE7 & IE8 PNG Opacity Problems

2011-07-18T00:00:00-07:00

PNG Alpha-transparencies

/* Normal CSS background using an PNG with an alpha transparency */
#demo {
    background:url(ie8-logo.png) 0 0 no-repeat;
}

IE7 and IE8 have native PNG support for alpha-transparencies, but it falls to pieces as soon as opacity comes into the picture. When setting any value for opacity, even 100% (ie. filter: alpha(opacity = 100)), IE fills in the alpha-transparency of the PNG with a pure black fill. This is sometimes refered to as a 'black halo'. The alpha filter can be removed at any time to remove the fill and restore the alpha transparency, but supporting both requires using more of IE's propriatary filters. All of the follow examples should be placed in a IE-targeted conditional comment.

Screenshot

Gradient filter fix

This is a great little hack that avoids the drawbacks associated with using AlphaImageLoader. The caveat is that it does not work for IE6, and the PNG may need to be tweaked a bit for it to display correctly.

#demo {
    background:url(ie8-logo.png) 0 0 no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
    );
}

Colorbox uses this technique for alpha channel support in IE8 and IE7. Credit for this technique goes to Dan Tello, and to Lukom for bringing it to my attention.

AlphaImageLoader filter fix

#demo {
    background: transparent;
    filter:
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src=ie8-logo.png,sizingMethod='crop');
}

This is a less robust solution than the gradient filter, however it works well and is supported for IE6-IE8. The AlphaImageLoader filter displays an image between the background and the content.

It is treated like an image element and not a CSS background-image, so it loses CSS properties like background-position and background-repeat. Also, it's src is relative to the current HTML document unlike a CSS background-image which path is relative to the CSS document. An absolute path or path that is relative to the root can be used to avoid some of the document to document path confusion. A CSS expression can be used to create a path that is relative to the CSS document as having paths relative to the HTML document can impractical, especially for code that is distributed or reuable.

#demo {
    background:url(ie8-logo.png) 0 0 no-repeat;
    behavior:
    expression(this.src = this.src ?
        this.src : this.currentStyle.backgroundImage.split('"')[1],
        this.style.background = "none",
    this.style.filter =
        "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="
        + this.src + ",sizingMethod='crop')");
}

This is how Colorbox enables PNG alpha-transparency support in IE6. Using CSS expressions are not supported in IE8 and their use is discouraged in general, but IE6 users have limited options here.

ClearType Issues

IE7 & IE8 lose ClearType whenever there an opacity filter is applied (ie. filter: alpha(opacity=50)). It even happens when the opacity is set to 100%. There are a couple of things that can be done to improve the situation. 1. Use a background fill if possible. 2. Remove the filter in situations where it would be at 100%. For example, if you animated an element from having 0 opacity to having 100% opacity.

Opacity Inheritance

IE7, IE8, and IE9 all have some sort of defective opacity inheritance.

JavaScript: Slice, Substring, or Substr?

2011-06-25T00:00:00-07:00

In JavaScript, substrings are primarily extracted through one of following String methods: slice, substring, substr.

// slice 
// syntax: string.slice(start [, stop])
"Good news, everyone!".slice(5,9); // extracts 'news'

// substring 
// syntax: string.substring(start [, stop])
"Good news, everyone!".substring(5,9); // extracts 'news'

// substr
// syntax: string.substr(start [, length])
"Good news, everyone!".substr(5,4); // extracts 'news'

All three of these methods take in a start index and an optional stop index (or length) parameter, but they differ in some important ways:

substr can give inconsistent results. If the starting index is negative, substr will either return the whole string (Internet Explorer) or extract from the end of the string (other browsers).
substring swaps it's parameters if the starting index is greater than the stopping index (start > stop).
substring returns the entire string if the starting index is negative.
slice extracts from the end of the string if the starting index is negative.
Good news, everyone!".slice(-4); // extracts 'one!'

Since all three methods have roughly equivalent performance, my preference is to use slice. It supports extracting from the end of the string and I feel that returning an empty string when start index > stop follows the principle of least surprise better than substring's swapping of parameters. I avoid substr because of the browser inconsistency.