Running With It
It's one thing getting positive feedback to my articles, but it's much nicer to see people actually doing something with the stuff. It's nice to see people "run with it", as they say.
Last week's article prompted some discussion, which was nice, that led to some action (pun intended) by Chris Blatnick, who worked on the ideas Scott Good and Richard Schwartz to create this database (about).
The idea is to make a real Action Bar static. Here's a page with a normal Action Bar and here's one with the same Action Bar but it's static on the page.
It's IE-only but there's no reason it couldn't be tweaked to work in Mozilla. Either way, the idea is there and it's a good example of how you can use what I talk about as the starting-block for bigger, better things.
Skip to the 
You can subscribe to an individual
outerFrigginHTML? I didn't think any sane people used that. Luckily, the "fix" isn't all that complicated. Good concept, though. Nice.
Maybe I should have added a disclaimer to this code before I hosted it on my server...
Nah. You *did* say it was IE-only, and I was kinda expecting it.
Showing my ignorance here... what's wrong with outerHTML? I've never actually had occasion to use it in code, but it seemed to me to be the right property for what was needed here. Care to elaborate?
-rich
Neither innerHTML nor outerHTML are W3C-endorsed bindings, but most browsers support innerHTML. (Netscape has since some dot release of Navigator 4.) outerHTML, on the other hand, has never been supported outside of IE. outerHTML isn't wrong, as such, it's just not cross-browser, and it's proprietary in a way that prevents a simple code fork from overcoming the difference. Now that we can safely ignore G4 browsers, we might as well try to make our code as general as possible to avoid platform lock-in.
Hmmmmm .... code aside, that toolbar is damn ugly. I can't even read the choices with the colours the way they are. I didn't mod any of my browser colours. Anyone else find the text unreadable?
Thanks, Stan. It's been on the books for so long, I guess I just figured it had become part of the standard toolkit. Silly me.
Michael: check out the Scott Good article that I referenced in the earlier thread. He shows how to dynamically apply CSS to pretty up the toolbar.
-rich
Not that I'm an expert or anything but I have read that the inner and outerHTML elements that are so popular are unhealthy because they perpetuate the idea that HTML is just a bunch of text; reducing dynamic HTML to string manipulation. Instead we should all be thinking in DOM terms and creating DOM tree objects.
That's only what I read... I'm as guilty as the next of relying on innerHTML.
That about wraps it up, Andrew. DOM treats the document as a data structure rather than as text, so it's "purer" in that sense. I'm not a huge purist, and will go for innerHTML when it does the job easily. outerHTML,on the other hand, is a platform lock-in, soI avoid it like the plague.
Well, I certainly go along with avoiding the platform lock-in of outerHTML (make a note of that, Rich!), but the "purity" argument about innerText doesn't wash for me. It seems to me that HTML *is* just text -- in the same sense that source code is just text.
I don't write program code by invoking the object library used by the C compiler to construct an in-memory representation of my program's parse tree, and I don't feed compiled byte-codes into the Execute() or Evaluate() functions in LotusScript... so why should I painstakingly build the in-memory representation of a DOM tree when I need to do something dynamic in JavaScript? It makes far more sense to me -- in a lot of cases -- to just write some HTML source code and let the computer do the work.
If the argument is that a document is data, and therefore different than a program, well... there simply wouldn't be such a thing as a web application if that were true. Documents are more than just data, and HTML is (part of) the source code.
-rich
But outerHTML is only a platform lockin in the way innerHTML used to be. The Mozilla people must have added this MS addition for one reason or another. Maybe they'll bow to pressure and add outerHTML at some point?
Creating HTML the "proper" way can be a little tedious. I described it in a blog a while back - {Link}
These are great comments. I think it brings us back around to the same old argument...At heart, I think most of us would like to be purists and do things 'the right way'. However, remember the saying "you can have it good, fast, cheap...pick two"! :-) This is, unfortunately, a truism in many business environments. For us, we're an all IE shop when it comes to the browser, so we probably succumb too much to using the IE-only way.
By the way, does someone want to post the better, cross-browser way of doing this? I would give it a shot, but I don't have enough time!!! ;-)
The impure and evil (but fastest an quickest) method is to create both the div AND an new table, then use the innerHTML of the original table instead of the outerHTML. Not much of a change. The purist method would be to create the div, then do a cloneNode(true) to take a deep clone of the table, then use appendChild to throw the copy of the table onto the div. Not much code, really, since you can do a deep clone with one line. If it were anything other than a copy, then DOM methods can get very verbose in a hurry.
This is a good idea that I can't believe never really occured to me before. I'm thinking that you could put this code into a subform which you could just add to the form and have it "fix" the action bar
Here is a solution that would work in a completely DOM way. I don't see any reason why the table couldn't continue to exist inside the div. Here is a sample which would move the table into a div with the id of "actionbar"
actionBarElement = document.getElementsByTagName("table")[0]
actionDiv = document.getElementById("actionbar");
actionDiv.appendChild(actionBarElement);
Here's a version that works in Firefox and IE.
{Link}
I'll post the code shortly.
-rich
Whoops! Not true. It works in the sense that it clones the table into the div without resorting to either outerHTML or innerHTML, but the div is scrolling with the rest of the page. Perhaps there's a trick that I don't know for getting CSS positioning working right in both browsers.
Anyone?
-rich
My code is posted here
{Link}
I've added what I can in a comment at Rich's place (may the Schwartz be with you) -- if anyone has anything more intelligent to add, please do.