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!

can you explain a little more what are you trying to do, i dont fully understand what you mean with 'when the DOM is visible' — JOBG, Dec 17 '10 at 18:31
The validation message will not always be visible. It will only be visible when validation fails. I need to apply the styles when the message is visible. — Tgibson, Dec 17 '10 at 18:40

JOBG · Accepted Answer · 2010-12-17T19:09:15.810

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.

Where can I call this? From the code behind of the .aspx page? — Tgibson, Dec 17 '10 at 20:26
can you post some code of the actual html and when exactly you want to change the css of the 'vsmSummary'. Because if you are doing a full post to validate on the server side, then why dont just set that css at the server. — JOBG, Dec 17 '10 at 20:37

score 0 · Answer 2 · answered Dec 17 '10 at 19:00

0

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.

answered Dec 17 '10 at 19:00

steve_c

6,235
4
32
42

This extended the page (created a scroll effect) – Tgibson Dec 17 '10 at 20:27

Execute jQuery function when DOM is visible

2 Answers2