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

CSS Rubber Stamp Effect

Here’s a CSS effect to add a rubber stamp type marker over existing content.

It uses the pseudo element :after to add the text content to an element with the appropriate class, in this case, .sample.

A few little points to note:

  • The :after style’s z-index must be higher than the existing content so that it appears on top of it.
  • The position of the content needs to set with top: and left:. With the transform:rotate this may take a bit of trial and error to get right.
  • In IE8 or below the transform:rotate won’t work so the text will just appear horizontally. Keep this in mind when setting the position.
  • text-shadow: and box-shadow: might not work in all browsers but it still looks ok without these enhancements

See the Pen CSS Rubber Stamp style by Chris Smith (@chris22smith) on CodePen

Posted in :after, border-radius, box-shadow, css, display, opacity, positioning, rotate, text-shadow, transform | Tagged , , , | Comments Off on CSS Rubber Stamp Effect

Simple User Message with Dynamic Reading Speed

Here’s a quick user message, which uses jQuery to fade in, pause and then fade out. The clever bit is that it works out how long to display the message based on its length.

The JavaScript function takes a string parameter. The script does a word count by splitting the string on spaces and hyphens using Regex. The word count is then multiplied by 330 milliseconds to produce a delay roughly based on an average reading speed of 200-230 words per minute. The string is added to the <div>, animated with the readingTime delay before finally being emptied ready for the next message.

See the Pen User Message with Dynamic Delay by Chris Smith (@chris22smith) on CodePen

Posted in box-shadow, delay(), jQuery, Math.ceil, Regex | Tagged , , , , , | Comments Off on Simple User Message with Dynamic Reading Speed