Aligning and element with background-size:cover

The CSS property background-size:cover is incredibly useful but due to the nature of it resizing in different directions, it's difficult to pinpoint where a particular part of the image is on the background at any given time. Difficult but not impossible of course.

To do this you first need to understand how background-size:cover works. Basically the image will fill the screen at all times by stretching out while maintaining aspect ratio. This means that unless the window is perfectly sized to fit the image, either the image is going to be cut off at the top and bottom edges, or the left and right edges.

Given this we can calculate the scale of the image and the x or y offset to find out the actual coordinates of the target location. I've created a little example using Google's logo that positions a red dot inside the red 'o' character. Resizing the window will keep the red dot inside the 'o' no matter how you resize the window.

sticky-header.js

I wrote up a little JavaScript plugin over the weekend that has a <table>'s header scroll with the page. What sparked this little endeavour was a question asking for this functionality on Stack Overflow. Since it was fun answering the question, I thought I'd go ahead and make a more general plugin type solution that worked for multiple tables.

Similar to my sortable-table.js plugin, simply add the sticky-header class to a <table> and the functionality will be enabled.

<table class="sticky-header">
  ....
</table>

I've tested it in all the latest browsers and seems to work fine; Chrome, Firefox, Safari, Opera, IE10, IE9 and IE8. No IE7 because it doesn't implement querySelectorAll, the code would be a bit more icky if I used some other method, and you know, it's IE7.

Here is a demonstration on GitHub HTML preview, and be sure to check it out on GitHub!

More on jQuery id selection performance

In response to Ron's comment on the attr('id') vs [0].id post last week asking about the jQuery.fn.prop's vs jQuery.fn.attr's performance, I extended the program to include prop and enabled profiling across all browsers (thanks to time.js). The program also does the tests a little more thoroughly, running 1000000 operations 5 times per each operation and averages the result.

Some of the result surprised me a little, in particular Safari beating Chrome on d.attr('id') but nothing else, and d.prop('id') was the clear winner.

jQuery attr('id') vs [0].id performance

So I was wondering for a while exactly what the performance difference is between the jQuery function attr('id') and getting the native JavaScript object and grabbing the id that way was. Surely attr('id') was slower but how much slower... I decided to write a little HTML page that tested each method by doing 1 million operations of each. In interest of being complete I added the getAttribute and get(0).id methods also.

Here are the results of the test:

div.attr('id'): 1545ms
div.attr('id'): 1536ms
div.attr('id'): 1558ms

div[0].id: 48ms
div[0].id: 46ms
div[0].id: 45ms

div.get(0).id: 59ms
div.get(0).id: 69ms
div.get(0).id: 62ms

div[0].getAttribute('id'): 74ms
div[0].getAttribute('id'): 72ms
div[0].getAttribute('id'): 74ms

Using the HTML5 date picker with backwards compatibility

If you didn't know, HTML5 introduced a new input type 'date' which allows the client to support it natively. Here is the native date picker in Chrome 21.

The following script uses jQuery and Modernizr to check if the input type date is not supported, if they are not it enables jQueryUI date pickers on all input[type=date] elements on the page. You could replace the insides of the if statement to whatever library or alternative you want.

$().ready(function () {
  if (!Modernizr.inputtypes.date) {
    $.datepicker.setDefaults({
      dateFormat: "dd/m/yy"
    });
    $('input[type=date]').datepicker();
  }
});

Libraries

Modernizr
jQuery
jQueryUI

How to select a HTML table column using jQuery

Here is a method for selecting a column in a table using the selector :nth-child(n). You could then do whatever you want to it, like hiding or highlighting it. An example use could be showing that a particular column has been sorted, instead of the more tranditional method of showing some indicator on the header.

// Highlight column 2
$('table tr > td:nth-child(2), table tr > th:nth-child(2)')
    .attr('style', 'background-color:#CCF;');

// Hide column 3
$('table tr > td:nth-child(3), table tr > th:nth-child(3)')
    .hide();

Make tags keyboard accessible with tabindex

HTML elements such as div, span, img, etc. don't normally accept input, but sometimes you'll want them to. For example if you have an image that does something when you click on it. If you want your site to be accessible it also needs to happen when you tab to the element and press enter.

There are two parts to this; giving the element a tab index and then hooking up the event. For the tab index simply set the tabindex attribute on the tag to 0 and the user will be able to navigate to the tag using the tab key. The following javascript snippet adds the event handlers using jQuery and shares the function (triggerExample) that is doing the work between both keydown and click events.

<img id="example" tabindex="0" src="..." />
 
 

$(document).ready(function () {
  $('#example')
    .click(triggerExample)
    .keydown(triggerExample);
});

function triggerExample(event) {
  if (event.keyCode == 13 || event.keyCode == 32 ||
      event.type == 'click') {
    doExample();
  }
}

function doExample() {
  alert('Image triggered');
}

Remember that you can always test what can be accessed with the keyboard by hitting the tab key.

Easy sortable HTML tables using jQuery

I made a little jQuery script that makes it really easy to enable sorting on a HTML table.

Features

• Really easy to set up
• Can sort on load if a header is specified otherwise assumes that the first column is already sorted
• Keyboard accessible
• Adds title attributes automatically to each th
• CSS arrow to signify ascending or descending

Passing parameters to jQuery event handlers

Something everyone who works with jQuery should know, how to pass parameters to a jQuery event handler. Pass a data object as the first argument on the event, the contents of the object will be transferred onto the data variable of event.

<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  <script type="text/javascript">
    $().ready(function () {
      $('button#one').click({ text: 'first button' }, handleClick);
      $('button#two').click({ text: 'second button' }, handleClick);
    });

    function handleClick(event) {
      alert('Clicked on the ' + event.data.text);
    }
  </script>

</head>
<body>
  <button id="one">button#one</button>
  <button id="two">button#two</button>
</body>
</html>