How to highlight search results with JavaScript and CSS

Welcome to Eric Wendelin’s blog! You’re guaranteed to more great Javascript tutorials easily if you subscribe via RSS.

Google highlight search textYou see it in Google search results and a lot of other sites that have good search functionality. When you perform a search, your words or phrases are highlighted in the search results making it easy for you to find the most relevant content.

Today I’m going to show you a simple way to add this to your website or blog so your users can find what they need in style. I think that this kind of thing should be implemented more often for how easy it is to implement.

Use the table-layout CSS property to speed up table rendering

A rarely used CSS property that can be very useful given the right circumstances is the table-layout property. It has great rendering speed benefit when used properly. Obviously this will only apply to HTML <table>s, which I know none of you would EVER overuse. Tables are not totally evil, they have their proper implementations and their really, really bad ones. OK, on to the code:

/* Set table to "fixed" (fastest render) layout */
.fixed_table {
    table-layout: fixed;
}

/* Set table to "auto" (best fit) layout. This is the default */
.auto_table {
    table-layout: auto;
}

Or alternatively in JavaScript:

Personalize your Thunderbird by changing it’s chrome

ThunderbirdIt’s been awhile since we tweaked our Firefox chrome, and it’s about time we get to hack Mozilla’s wonderful email client Thunderbird.

In this post I’ll give you the necessary tools to change the look of Thunderbird and give you some suggestions (and code, of course :) to help you along the way. First, let me give credit to Twister MC’s wonderful post that I will be using as a reference for the label coloring scripts below. OK, let’s get started!