Here is a short list of my requirements:

• Only one Dialog will ever be visible at any time
• Multiple Dialog instances may live on the page at any given time
• A predefined class provides behavior cues ie6-dialog-zfix and elements in question will be decorated with ie6-dialog-zfix

The code shows the power of jQuery’s Live function. Using the live function allows the code to work on ANY dialog event, regardless of when it’s initialized. There may be a better way to do this like duck punch the dialog control but this was quick and very light.

The entire code is wrapped in lambda to provide a sort of “namespace” and help prevent variable collisions, pretty common practice in jQuery land.

// IE6 Dialog Form Element Z-Fix
(function($){

	var elements = [],
		inputSelector = ".ie6-dialog-zfix:visible";

	// Only attach the fixes in IE6
	if ( $.browser.msie && $.browser.version.substr(0,1) < 7 ) {
		$(".ui-dialog").live('dialogopen', function() {
			elements = $(inputSelector).css("visibility", "hidden");
		});
		$(".ui-dialog").live('dialogclose', function() {
			if(elements.length) {
				elements.css("visibility", "visible");
			}
		});
	}
})(jQuery);

The above code will set visibility: hidden on all visible elements with .ie6-dialog-zfix class when any dialog is shown, references to these elements will be cached and visibility will be set to visibile when any dialog is closed. Notice my requirements assume only one dialog will ever be active at any given time.

This code could easily be turned into a plug-in but i don't really have a need for that at the moment. I presenting an idea not a production quality solution. The main goal here is to find whats causing my overlay/ie6 issues and fix that.

Thanks for listening, please leave your feedback. If people are interested I can clean this up and provide some better examples. Maybe even make a plug-in.

When you want to move the template around you can use the following methods.
Usage

//inserts the template into the content
var contentElement = $get("conatiner1");
contentElement.appendChild(Samples.Template.get_template());

//inserts the template into the hidden storage container.
Samples.Template.storeTemplate();

One of the nice things is that i can attach eventhandlers onto the elements in the template and they remain after moving the template around the DOM. I’ve only tested this in IE6/7 and FF 2/3, but it works great! Here is the asp.net ajax behavior which lets you manage the template through a singleton object.

The Javascript Object

Type.registerNamespace("Samples");

/////////////////////////
//  base class
////////////////////////
Samples.NodeTemplate = function(storageName, templateName) {
    this._storage = null;
    this._storageName = storageName;
    this._templateName = templateName;
};
Samples.NodeTemplate.prototype = {

    onDisabledChanged: function(disabled) { },

    get_template: function() {
        return $get(this._templateName);
    },

    get_storage: function() {
    ///
    /// returns an element where the template is hidden when not inserted into the tree
    ///
        if (!this._storage) {
            this._storage = $get(this._storageName);
        }
        return this._storage;
    },

    get_disabled: function() {
        return this._disabled;
    },
    set_disabled: function(value) {
        if (this._disabled != value) {
            this._disabled = value;
            this.onDisabledChanged(value);
        }
    },

    storeTemplate: function() {
    ///
    /// Finds the template container by id and returns it to the storage area
    ///
        this.get_storage().appendChild(this.get_template());

    }
};
Samples.NodeTemplate.registerClass('Samples.NodeTemplate');

/////////////////////////
//  Singleton Template class
////////////////////////
Samples._Template = function(storageName, templateName) {
    Samples._Template.initializeBase(this, [storageName, templateName]);
};
Samples._Template.prototype = {

    onDisabledChanged: function(disabled) {
        ///
        /// overridable method to handle any changes required on disabled
        ///
        this.get_iconElement().disabled = disabled;
    },

    get_iconElement: function() {
        //would prolly be best to use a helper method since childnodes '
        //differs on a per browser basis, but works for this example
        return this.get_template().childNodes[0];
    }
};
Samples._Template.registerClass('Samples._Template', Samples.NodeTemplate);
//creating instance with a hardcoded id
Samples.Template = new Samples._Template("storage", "template");

Well, this code is setup to work with a pretty specific use case but the base class can be extended into a wide range of neat DOM manipulation tools. This little template is used to choose a type and submit. A simple use case, when you need to turn a region into edit mode you can use this little guy to act as your singleton edit region. Moving it into place whenever you need to, of course you’ll still have to bind data and wire up event handlers, but that’s another blog. The mark-up below shows it can handle asp.net controls, assuming they don’t change over runtime. it’s also important to note that you’ll need to manage the clientstate, if you need to support postbacks anyways.

The HTML

Two things i really like about this code. 1. The power of code is seen in the usage, the behavior is just an overweight static set of helper methods. 2. This feels good to use. Sure, it could be optimized a ton, but i’m not going to for this blog. 3.Javascript singletons are always interesting.

DOWNLOAD THE EXAMPLE CODE HERE

javascript references for intellisense

/// 
/// 
/// 
/// 
/// 
/// 
/// 

/// 

specifically this sample doesn’t use the intellisense from all of these references but this is generally what i start with as my js references for any javascript class i’m looking to create. And yes, the intellisense builder requires that the js file references be in an order of dependence. Ok, now we can finally move on to what i’m actually trying to blog about. The scroll to animation.

Type.registerNamespace("boudreau");boudreau.scrollTo = function(element) {
    boudreau.scrollTo.initializeBase(this, [element]);
       this.animation = null;
}
boudreau.scrollTo.prototype = {
    initialize: function() {
    ///

    /// creates our animation and adds a click handler.
    ///
        boudreau.scrollTo.callBaseMethod(this, 'initialize');
        this.animation = new $AA.InterpolatedAnimation(this.get_element(), 2, 25, "scrollTop");
// Important: Notice that the value is passed as a function.
        // This overrides the animation's getAnimatedValue function.
        this.animation.getAnimatedValue = this.__getAnimatedValue;
    },

dispose: function() {
    ///

    /// Does the cleanup work
    //
        this.animation.dispose();
        boudreau.scrollTo.callBaseMethod(this, 'dispose');
    },

scrollTo : function( target ) {
    ///

    /// scrolls the container to to the target element.
    ///

        var container = this.get_element();
        // If we wanted the item to scroll to the middle of the
        // container we set offset = middle.
        var middle = ($common.getContentSize(container).height / 2.0 );

        // For now we just use a 40 pixel offset so it isn't hugging
        // the top of the container.
        var offset = 40;

        //set start and ending positions of the scroll window.
        this.animation.set_startValue(container.scrollTop);
        this.animation.set_endValue(target.offsetTop - 40);

        //let the framework do it's job.
        this.animation.play();

    },

__getAnimatedValue : funtion ( percentage ) {
        ///

        ///  This method is run in the context of the animation object.  Therefore it's
        ///  important to understand that when this function is executing that "this"
        ///  referes to the animation object, NOT the boudreau.scrollTo object.
        ///  Besides that this function performs a simple linear interpolation.
        ///
        ///
        /// It's important to note the reason we have to define this function is that it's a
        ///  MustOverride on the InterpolatedAnimation object.
        ///  The reason i used InterpolatedAnimation is so that i could
        ///  implement a non-linear animation.
        ///

        return this.get_startValue() + (this.get_endValue() - this.get_startValue()) * (percentage * / 100);

    }

}

boudreau.scrollTo.registerClass('boudreau.scrollTo', Sys.UI.Behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

That’s the code.
If you aren’t comfortable with prototypical development in javascript then you’ll you should brush up on that. [Blog Link, WWW Link?] But if you are then lets dive into the details.

The Behavior
scrollTo object derives from microsoft’s Sys.UI.Behavior which is used to extend the functionality of a particular DOM element. This behavior acts on the scrollable container you define as the target element. If someone asked me what this behavior did i’d tell them ” It’s a javascript object that holds a reference to a DOM element, the container, (This is what we get from microsoft ajax library.) The javascript object knows hows to scroll, with animation, to a given target element inside the container. ” If you can decipher that you’ve got it. On to the gory details.

The constructor – new $AA.InterpolatedAnimation()
In the init method we define a new InterpolatedAnimation first off $AA is a shorthand for AjaxControlToolkit.Animation, it saves us some 20 chars to type, and download for that matter. The constructor used above takes some 7 parameters but we are only passing in 4 because i’m happy with the default values for the others for now. The first, the target element, is the object that should contain the scrollBar you want to animate. The second and third are fps and duration respectively (which i won’t discuss cause they are pretty self explanitory.) the fourth parameter is the property of the the target element you want to animate using the InterpolatedAnimation. Kind of important to understand what’s going on here, this parameter is what the interpolated animation updates when it is told to .play(). So, in our case we want to animate the scrollTop property of the target element. scrollTop is just a javascript property that gets/sets the top of the content area in a scrollable window. Alright, that’s creating the animation. Hopefully you see what’s going on here, lets recap. We are creating an interpolated animation object inside of our behavior and telling it what property on what element we want to animate. Next we’ll look at the scrollTo function and see how the behavior does the work.

The worker – scrollTo()
the scrollTo() method does all the work of finding and scrolling to the correct distance inside the container. At the end we hope to see that our target element is 40 px below the scrollTop of the container content window. First we define the properties on the animation that will be interpolated, the start and end scrollTop value of the container. These two properties on the InterpolatedAnimation are the values you want the animation to interpolate across. (remember how we set scrollTop as the property in the constructor.) Our InterpolatedAnimation is going to interpolate the values between start_value and end_value on the container element (the scrollable element) and update the property scrollTop with the value at each step in the animation. This is how it works, if you don’t understand the previous explanation read it again, it’s the magic and hopefully you can tell there is no real magic at all!

// For now we just use a 40 pixel offset so it isn't hugging
// the top of the container.
var offset = 40;

//set start and ending positions of the scroll window.
this.animation.set_startValue(container.scrollTop);
this.animation.set_endValue(target.offsetTop - 40);

this.animation.play();

So that’s pretty much it, after you

$create(boudreau.scrollTo, null,null,null, $get(scrollableElementId))

a scrollTo behavior on a scrollable element you use

$find(scrollableElementId).scrollTo(element_to_scroll_to_in_container)

to produce a nice smooth scroll to the target element inside the scrollable container.