// get the html to search, insert it to the hidden div

var Html = $("#TextAreaHTML").val();

$("#HiddenDiv").html(Html);

When doing a search, I modify the search pattern to look only in the HiddenDiv. To do that, I put a space between the patterns.  The space is the Ancestor operator (see the Cheat Sheet):

// modify search string to only search in our

// hidden div and do the search

var SearchString = "#HiddenDiv " + SearchPattern;

try

{

    var $FoundItems = $(SearchString);

}

Big Fat Stinking Faux Pas:

I was about to publish this article when I made a big mistake: I tested the tool with Mozilla FireFox. It blowed up…it blowed up real good. In the past I’ve only had to target IE so this was quite a revelation.

When I started to learn JavaScript, I was disgusted to see all the browser dependent code. Who wants to spend their time testing against different browsers and versions of browsers? Adding a bunch of ‘if-else’ code is a tedious and thankless task. I avoided client code as much as I could.

Then jQuery came along and all was good. It was browser independent and freed us from the tedium of worrying about version N of the Acme browser.

Right? Wrong!

I had used outerHTML to display the selected elements. The problem is Mozilla FireFox doesn’t implement outerHTML.

I replaced this:

// encode the html markup

var OuterHtml = $('<div/>').text(this.outerHTML).html();

With this:

// encode the html markup

var Html = $('<div>').append(this).html();

var OuterHtml = $('<div/>').text(Html).html();

I replaced this:

var Row = e.srcElement.parentNode; 

With this:

var Row = e.target.parentNode;

I replaced this:

// this cell has the search pattern  

var Cell = Row.childNodes[1];  

// put the pattern in the search box and search                    

$("#TextSearchPattern").val(Cell.innerText);

 With this:

// get the correct cell and the text in the cell

// place the text in the seach box and serach

var Cell = $(Row).find("TD:nth-child(2)");

var CellText = Cell.text();

$("#TextSearchPattern").val(CellText);

Notes:

My goal was to have a single standalone file. I tried to keep the features and CSS to a minimum–adding only enough to make it useful and visually pleasing.

When testing, I often thought there was a problem with the jQuery selector. Invariable it was invalid html code. If your results aren't what you expect, don't assume it's the jQuery selector pattern: The html may be invalid.

To help in development and testing, I added a double-click handler to the rows in the Cheat Sheet table. If you double-click a row, the search pattern is put in the search box, a search is performed and the page is scrolled so you can see the results. I left the test html and code in the page.

If you are using a CDN (non-local) version of the jQuery libraray, the designer in Visual Studio becomes extremely slow.  That's why there are two version of the library in the header and one is commented out.

For reference, here is the jQuery documentation on selectors:

http://api.jquery.com/category/selectors/

Here is a much more comprehensive list of CSS selectors (which jQuery uses):

http://www.w3.org/TR/CSS2/selector.html

I hope someone finds this useful.

Steve Wellens