ADVERT – Premium Domain Names For Sale!

The following domains are currently available for purchase or lease:

Please contact @chris22smith on twitter if interested.

Posted in Adverts | Tagged , , , , , , , , , , , , , | Comments Off

Checking a Checkbox inside a List Item by Clicking the Parent or Child

It’s quite common to see list items <li> or table rows <tr><td> which contain a checkbox <input type=”checkbox”/>. Rather than the user having to be very precise and click/touch on the checkbox, it’s often preferable, especially on mobile devices, to be able to click/touch anywhere in the item or row.

This sounds simple but throws up a problem. If we have click events on the item/row and the checkbox then a click on the checkbox fires both events, checking and then unchecking the checkbox. Setting e.stopPropagation on the checkbox click event doesn’t seem to work.

There are 2 solutions. The first is arguably simpler and more semantic. Simply wrap the checkbox in a <label> tag and then change the label’s CSS so that it fills the list item or row.

If this isn’t an option then it can be handled in JavaScript.

See the Pen Checking Checkboxes by Clicking Parent List Item by Chris Smith (@chris22smith) on CodePen

The refers to the element that was clicked. If, within the list item click, the checkbox is not clicked then change the checked state.

Posted in click(), JavaScript, jQuery | Tagged , , , , , , , , , | 1 Comment

Highlighting Matching Text in Search Results with jQuery

Following on from a previous post Easy Search As You Type List Filtering with jQuery, I’ve added a new function/feature to this script – the ability to highlight the matching text in the search results. Here’s the pen:

See the Pen Easy Text Filtering with Matching Text Highlighted by Chris Smith (@chris22smith) on CodePen

The search/filter script is the same as the previous Text Filtering post. The part we’re looking at here is the highlight() function.

The function takes a text string – the text typed into the text box. It then finds the indexOf or character position of the matching text in the result’s text and splits this into three parts using slice() – the section before the matching text (beforeMatch), the matching text (matchText) and the section after the matching text (afterMatch). By wrapping the matching part in tags and then putting the various parts all back together again in one string we can add highlighting into the HTML.

Posted in filter(), jQuery, slice() | Tagged , , , , , , , , , , , | 1 Comment