Steve Wellens

Programming in the .Net environment

Sponsors

Links

February 2011 - Posts

jQuery Selector Tester and Cheat Sheet

I've always appreciated these tools: Expresso and XPath Builder. They make designing regular expressions and XPath selectors almost fun! Did I say fun? I meant less painful. Being able to paste/load text and then interactively play with the search criteria is infinitely better than the code/compile/run/test cycle. It's faster and you get a much better feel for how the expressions work.

So, I decided to make my own interactive tool to test jQuery selectors:  jQuery Selector Tester 

Here's a sneak peek:

Note: There are some existing tools you may like better:

http://www.woods.iki.fi/interactive-jquery-tester.html

http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose

My tool is different:

  • It is one page. You can save it and run it locally without a Web Server.
  • It shows the results as a list of iterated objects instead of highlighted html.
  • A cheat sheet is on the same page as the tester which is handy.

I couldn't upload an .htm or .html file to this site so I hosted it on my personal site here: jQuery Selector Tester.

Design Highlights:

To make the interactive search work, I added a hidden div to the page:

<!--Hidden div holds DOM elements for jQuery to search-->
<div id="HiddenDiv" style="display: none">
</div> 

When ready to search, the searchable html text is copied into the hidden div…this renders the DOM tree in the hidden div:

// 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();
Another problem was that Mozilla FireFox doesn’t implement srcElement.
I replaced this:
var Row = e.srcElement.parentNode; 
With this:
var Row = e.target.parentNode;
Another problem was the indexing. The browsers have different ways of indexing.
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);
 
So much for the myth of browser independence. Was I overly optimistic and gullible? I don’t think so. And when I get my millions from the deposed Nigerian prince I sent money to, you’ll see that having faith is not futile.

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

Posted: Feb 13 2011, 01:00 PM by SGWellens | with 5 comment(s)
Filed under: ,
Create Image Maps with GIMP

Having a clickable image in a web page is not a big deal. Having an image in a web page with clickable hotspots is a big deal. The powerful GIMP editor has a tool to make creating clickable hotspots much easier.

GIMP stands for GNU Image Manipulation Program. Its home page and download links are here: http://www.gimp.org/ (it is completely free).

Beware: GIMP is an extraordinarily advanced and powerful image editor. If you wish to use it for general image editing tasks, you have a steep learning curve to climb. FYI: I used it to create the shadows you see on the images below. Fortunately, the tool to make Image Maps is separate from the main program.

To start, open an image with GIMP or, drag and drop an image onto the GIMP main window. I'm using the image of a bar graph.

Next, we have to find the Image Map tool and launch it (Filters->Web->Image Map…):

Why is the Image Map tool under Filters and not Tools? I don't know. It's mystery—much like the Loch Ness Monster, the Bermuda Triangle, or why my socks keep disappearing when I do laundry. I swear I've got twenty single unmatched socks. But I digress…

Here is what the Image Map tool looks like:

If we click the blue 'I' button, we can add information to the Image Map:

Now we'll use the rectangle tool to create some clickable hotspots. Select the Blue Rectangle tool, drag a rectangle, click when done and you'll get something like this:

You can also make circle/oval and polygon areas. You can edit all the parameters of an image map area after drawing it.

Rectangle settings (for fine tweaking):

JavaScript functions (it's up to you to write them):

Here is a setup with two rectangles and one polygon area:

When you hit save a map file is generated that looks something like this:

<img src="BarGraphImage.png" width="326" height="306" border="0" usemap="#BarGraphImageMap">

<map name="BarGraphImageMap">
  <!-- #$-:Image map file created by GIMP Image Map plug-in -->
  <!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
  <!-- #$-:Please do not edit lines starting with "#$" -->
  <!-- #$VERSION:2.3 -->
  <!-- #$AUTHOR:Steve Wellens -->
  <!-- #$DESCRIPTION:A bar graph with  no instrinsic value -->
  <area shape="rect" coords="213,62,253,269" onmouseover="ImageMapMouseHover(&apos;Biggest Bar&apos;)" onmouseout="ImageMapMouseHover(&apos;&apos;)"  nohref="nohref"></area>
  <area shape="rect" coords="114,131,158,267" href="~/Details2.aspx"></area>
  <area shape="poly" coords="57,44,76,100,181,102,183,62,142,34" href="http://www.microsoft.com"></area>
</map>

Paste the contents into a web page and you are almost there. I made some tweaks before it became usable:

  • Replaced &apos; with apostrophes in the javascript functions.
  • Changed the image path so it would find the image in my images directory
  • Tweaked the href urls.
  • Added Title="Some Text" to get tool tips.
  • Cleaned out the comments.

Result:

The final markup (with JavaScript function):

<script type="text/javascript" language="javascript">

    function ImageMapMouseHover(Msg)
    {
         $("#Label1").html(Msg);
    }

<img src="Images\BarGraphImage.png" width="326" height="306" border="0" usemap="#BarGraphImageMap">

<map name="BarGraphImageMap">
  <area shape="rect" coords="213,62,253,269" onmouseover="ImageMapMouseHover('Biggest Bar')" onmouseout="ImageMapMouseHover('')"  nohref="nohref"></area>
  <area shape="rect" coords="114,131,158,267" href="Details2.aspx" title="Details 2"></area>
  <area shape="poly" coords="57,44,76,100,181,102,183,62,142,34" href="http://www.microsoft.com"></area>
</map>

It may seem like a lot of bother but, the tool does the heavy lifting: i.e. the coordinates. Getting the regions positioned and sized is easy using a visual tool…much better than doing it by hand.

This, of course, isn't a full treatise on the tool but it should give you enough information to decide if it's helpful.

I hope someone finds this useful.

Steve Wellens

More Posts