Execute jQuery function when DOM is visible

Question

I have a page with some custom validation which displays a result in a validation summary. I would like to reposition this validation summary to the bottum of the page without causing the page to scroll with the length of the validation summary. I have a jQuery function which does this very nicely, however, I need to execute this jQuery after the validation summary is displayed and i'm not sure which event to trigger.

$(document).ready(function(){
$("#<%= vsmSummary.ClientID %>").change(function(){
    var newTop =   $(window).height() - $("#vsmSummary").height();
    var newLeft = ($(window).width()  - $("#vsmSummary").width()) / 2;

        $("#vsmSummary").css(
            {
                'position': 'absolute',
                'left': newLeft,
                'top': newTop
            }
        );
    });
});

In my custom validation method I build this string and register with the RadScriptManager...

Dim scriptText As String = "$(document).ready(function(){ " + _
                            "$(""#<%= vsmSummary.ClientID %>"").ready(function(){" + _
                                "var newTop =   $(window).height() - $(""#vsmSummary"").height();" + _
                                "var newLeft = ($(window).width()  - $(""#vsmSummary"").width()) / 2;" + _
                                    "$(""#vsmSummary"").css(" + _
                                     "{" + _
                                            "'position': 'absolute'," + _
                                            "'left': newLeft," + _
                                            "'top': newTop" + _
                                     "}" + _
                                    ");" + _
                                "});" + _
                            "});"


RadScriptManager.RegisterClientScriptBlock(Me.upSCPPage, Me.upSCPPage.GetType(), "DynamicVSM", scriptText, True)

This works!! Thanks for the learning experience, I had no clue that I could call this from my code behind!! I will be doing this much more in the future!

Answer 1

If i understand right you want to reposition an element that holds your validation summary when it appears, well AFAIK jQuery does not provide any event to detect innerHtml changes.

My suggestion is to move that to a function and call it on demand, from inside your validation code.

//in your validation code
$("#vsmSummary").html('Your Validation Message Here');
Reposition();

//in a separate function
function Reposition()
{
var newTop =   $(window).height() - $("#vsmSummary").height();
    var newLeft = ($(window).width()  - $("#vsmSummary").width()) / 2;

        $("#vsmSummary").css(
            {
                'position': 'absolute',
                'left': newLeft,
                'top': newTop
            }
        );
}

If you want it cleaner you can even create that as a jQuery function:

jQuery.fn.reposition = function () {
var newTop =   $(window).height() - $(this).height();
var newLeft = ($(window).width()  - $(this).width()) / 2;

            $(this).css(
                {
                    'position': 'absolute',
                    'left': newLeft,
                    'top': newTop
                }
            );
}

and then call it like this:

$("#vsmSummary").html('Your Validation Message Here').reposition();

NOTE: You can check with innerHTML.length and setInterval(), but its an overkill solution.

Answer 2

Try this:

#vsmSummary {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 25px;
}

Have this style applied all the time, rather than only when the validation summary shows. It should fix your div to the bottom of the page.