Adding Ajax

Mixer: SVG and Ajax

The implementation of SVG within browsers is still very young, but the commitment is there, and as new versions of browsers are rolled out, we have stronger integration between SVG elements and regular web elements. This is my way of saying that the examples mixing SVG and Ajax are limited primarily to Firefox and Opera, WebKit (mostly), and rarely, IE. I've avoided working within such limitations in the book, but we're due for a little fun. For your own production needs, you can use embedded SVG and script, and if you use an iframe, you can communicate between the two environments. You might want to restrict the use for nonessentials.

In Example 8-10, we will take the paginated example from Example 8-1 and add a "popularity bubble." A small SVG circle is embedded below the pagination table. Moving the mouse over the table highlights rows as it goes, setting the row background to red, and then back to gray after the mouse passes. The number of comments for each post, located in the last cell of the table row, is accessed, and its value is used to determine how big the SVG circle is, from no size at all for zero comments, to larger for more commented posts.

The additions to the JavaScript from Example 8-2 would be quite small except for the problem of having to deal with browser differences. Inline SVG isn't supported in enough browsers, so the SVG is created in a separate file and then loaded into a web object. When the page is loaded, depending on whether the ...