Random thoughts from an unusual company

Thing-a-Day 5: Scrolling your dialog

Tim Davis  17 July 2009 08:00:00
This is Day 5 of my week of tips for web development in Domino. I hope some of you find them useful.

I have been talking about Web 2.0 dialog effects. Today I want to talk about how to keep your dialog positioned on the page as you scroll up and down, to give you a proper dialog effect.

In modern browsers, this is fairly easy. You can use the css style position:fixed. However IE6 and earlier don't support this. What a surprise. I do see a lot of IE6 in corporate environments, so I need a workaround.

The trick here is to intercept the onScroll event of the page and use that to reposition your dialog div.

You can do this using some javascript in the jsheader of your form:

window.onscroll = function() { positionDialog();  }

where positionDialog is (obviously) a function to reposition your dialog in the screen.

You will need to know the scroll position of the window, and this is one of those nightmare cross-browser things. I use this function I found somewhere:

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  return [ scrOfX, scrOfY ];

There may be better functions out there.

So in your repositionDialog function, you can do something like this:

        var dialog = document.getElementById( "myDialog" );
        var scrollXY = getScrollXY();
        var y = scrollXY[1] + 100;
        dialog.style.top = y + "px";

Thanks for listening this week. I realise I have only scratched the surface of these sort of effects, but from these basic building blocks you can create some very sophisticated sites.
No Comments Found