GoogleIt Mail IT Print IT PermaLinkA Collaborative Work In Progress: Non-Scrolling, Non-Sucking Web Action Bars In Domino
10:44:13 PM
Written By : Richard SchwartzCategory : AJAX With IBM Lotus Domino
Location : Nashua, NH

With a little bit of serendipity and contributions from a bunch of people, a demo database has come together showing a technique for dramatically improving the action bars that Domino generates in browsers -- which in addition to scrolling off the screen when your documents get too long, are just plain ugly. Work on this started with two independent blog posts, one by Scott Good, and one by Jake Howlett. Scott's post dealt with the ugliness of action bars, and Jake's article dealt with the fact that they scroll. I happen to read both Scott's and Jake's blogs, and I saw the synergy between the two articles and set the wheels in motion to combine the ideas.

Scott had posted his article Web Action Buttons That Don't Suck back in May, but I didn't get around to reading it until recently. In it, he documented a technique that Henry Newberry had shown me a while ago. The idea is that by using some JavaScript code to poke around in the DOM, it's quite easy to identify the HTML table that Domino generates to contain the action bar, a to it that make the table much prettier. Scott's article got me thinking about something that hadn't occurred to me when Henry had initially shown the technique: once you've found the action bar, it seems like it ought to be pretty easy to lift it out of it's place in the DOM and put it somewhere else -- like in a non-scrolling iframe or a div that is anchored to the top of the page. I added that thought as a comment to Scott's post.

Just a couple of days later, I saw that Jake had posted an article Faking Action Bars With CSS, which demonstrated a way to make your own action bar that stays fixed at the top of the browser window, not scrolling with the rest of the page. I posted a response in Jake's thread, too, pointing to Scott's artcile and suggesting that by combining the two techniques one could have the best of both worlds: you could use Domino Designer to build your action bar, but you'd get a nice-looking version that doesn't scroll.

Chris Blatnick took up the challenge and built a new demo database that combined the two techniques. Jake posted it on Chris' behalf, That's when Stan Rogers joined the fun, pointing out that my suggestion of using the outerHTML method to grab the action bar table out of the DOM was specific to Internet Explorer. Confessing my general ignorance on the intricacies of cross-browser CSS/JavaScript/DOM, I responded by asking for suggestions of a better way. Stan and Ed Wrenbeck both came back with answers, and at that point I decided it was time for me to stop talking and start coding.

So, here is my demo, just a minor variation of Chris' version. It's cross-platform (running in both IE and Firefox, anyhow), except for one thing: It looks right in both browsers, and behaves properly for IE users, but I seem to have lost the non-scrolling behavior for Firefox users. So close, but no cigar! I might be able to figure it out, but perhaps someone else who is stronger with CSS can go in and just see how to fix that part a lot more easily than I will... and since this has been a collaborative effort along, why not? The code is downloadable as an NSF here.

BTW: Once the CSS is straightened out, my next idea... using Ajax to dynamically add actions to the bar. (Well, maybe not Ajax strictly speaking; but xmlHttpRequest, anyhow.)

This page has been accessed 582 times. .
Comments :v

1. Stan Rogers07/13/2005 12:48:47 AM

It's the expression(). Again, IE only. The way it's used here, it degrades well so that the action bar and content don't overlap when expression() is not available. That, however, merely names the problem, it doesn't solve it.

There's no way to declaratively set the height of the content block by pixels in relation to the size of the window except in IE. Percentages, yes, but not in any absolute units. You can size in the onload and onresize events, but that's a little less than seamless in Moz.

Every reasonably-modern browser other than Internet Explorer properly supports "position: fixed", which will anchor the div to the top of the screen. Make the rest of the page "position: absolute", set it to start below the action bar, and it will scroll under the action bar (bar needs to have a higher z-index). The position of the scroll bar might seem odd -- it attaches to the whole cliewnt window rather than just to the scrollable portion, but that's the only real oddness.

That brings us to making the code cross-browser. Use the major selectors to set the IE styles using expression. Then use child selectors (not supported by IE) to set the "fixed" version for other browsers, as below:

HTML>BODY {blah: blah; yada: yada;}

You really didn't believe that "write once, run everywhere" stuff, did you?

2. Richard Schwartz07/13/2005 01:09:16 AM

Ah... I see. Actually, Stan, I didn't follow all of that -- but I got enough of the point. And now I see that Chris' CSS is very different from Jake's. Jake's uses position:absolute for the action bar, whereas Chris' uses position:absolute for the main content, and there's a lot of IE-specific syntax there that isn't in Jake's.


3. Stan Rogers07/13/2005 01:23:46 AM

I'll see what I can give you when I've had a chance to think. I wuz just attending to my blog addiction after a too-late night (good G_d, I'm getting old in a hurry). I don't quite know what it is about CSS (maybe the assumed volumes of knowledge), but I've never really been able to explain it well to anybody -- and I'm usually a good teacher.

4. Ed Wrenbeck07/13/2005 05:46:14 PM

I still don't think you need to actually clone the table. Since a node can only have one parent, adding it as a child element to the div will automagically detach it from its previous parent. Then you don't have to worry about hiding the original. In my testing that has proven to be true.

5. leilei391502/28/2017 02:26:36 AM

20170228 leilei3915

6. zzzzz02/28/2017 08:51:22 PM

Enter Comments^

Email addresses provided are not made available on this site.

You can use UUB Code in your posts.

[b]bold[/b]  [i]italic[/i]  [u]underline[/u]  [s]strikethrough[/s]

URL's will be automatically converted to Links

:-x :cry: :laugh: :-( :cool: :huh: :-) :angry: :-D ;-) :-p :grin: :rolleyes: :-\ :emb: :lips: :-o
bold italic underline Strikethrough

Remember me    

Monthly Archive
Responses Elsewhere

About The Schwartz


All opinions expressed here are my own, and do not represent positions of my employer.