This is implemented as 3 files:
- handviewer.html - This is the page we point to in iframes. It contains about 70 lines of HTML with all the required DIVs, and loads the CSS and JS (called handviewer-old.html in the test below)
- hvstyles.css - The CSS for the page
In handviewer.html, the active elements have inline onclick attributes that call functions in handviewer.js.
The problem is that when we embed lots of these on a page, performance suffers. Iframes are a pain to begin with, and lots of them all pointing to the same server run into connection limits. And even though they're all pointing at the same script, the parameters in the query string act as a cache-buster. Loading a page with 12 of these diagrams takes 3-5 seconds with reasonably fast browsers. Looking at the timeline, you can see that the loads are staggered. So I'd like to convert it to a widget that can be applied to a DIV, with the parameters as inline arguments.
A test page with these 12 iframes is at:
I'm preparing to do this by hand -- I'll wrap a function around the whole thing, replace the IDs with classes, so that document.getElementById(x) becomes theDiv.getElementsByClass(x), and rewrite the function that extracts query string parameters to get them from an options argument. But I wonder if there are any tools around that can assist in the process. If anyone has done a conversion like this, do you have techniques that help?
I took a look at your code ...
Don't do that. Make a classic JS array of booleans to mark "empty items".
And generally, don't access DOM too much. It seems, that your whole "model" (from MVC terminology) and application state is stored in DOM.