How to determine where the current visible vertical location inside a jquery dialog is?

Question

I have a case where I am using a jquery ui dialog and I have any html table in the dialog where the dialog is fixed height:

$("#modalDialogContainer").dialog({
    resizable: false,
    height: 700,
    autoOpen: false,
    width: 1050,
    modal: true,

I call an AJAX query from a button click and I want to use jquery UI blockUI plugin to show a "loading" message. Something like this:

   $("#myTableInsideDialog").block({
                css: {
                    top: '200px',
                    bottom: "",
                    left: ''
                },
                centerY: false, baseZ: 2000, message: $("#SavingMessage")
            });

The issue I have is that the content in the dialog is longer than the height of the dialog and I given the dialog is FIXED height so that causes the dialog to have a vertical scroll bar.

Having the scroll bar is fine (that's actually what I want) but the knock on effect is that because of that depending if the user has scrolled down or not, the blockUI message is not centered (or even visible on the screen) vertically.

Question: Is there anyway I can detect what is visible areas inside a dialog that has a vertical scroll bar to vertically align the block message properly?

Above as you can see its hard coded to be 200px from the top so it works great if the user hasn't scrolled down but you can't see the message if the user has scrolled down the whole way

In short, if i am at the top of the scroll, then i would have this:

$("#myTableInsideDialog").block({
            css: {
                top: '200px',
                bottom: "",
                left: ''
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

if i am at the bottom of the scroll, then i would want this:

 $("#myTableInsideDialog").block({
            css: {
                top: '',
                bottom: "200px",
                left: ''
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

Blondell

Does the message need to be contained within the modal? Can you replicate in jsfiddle to demonstrate? – Parentage

The question title and content are asking for two different things. Position determination is one thing and message positioning is another, best achieved without determining anything as in TheGr8_Nik's answer. – Chamberlin

@MKaama, it's better to understand the OP's intent and needs BEFORE crusading. The solution you love so much involves DOM manipulation, near the top of things to avoid if possible. You are championing this cause over a simple scroll location calculation. – Scaramouch

Answer 1

I wouldn't alternate between top AND bottom properties:

For a window sized 1000px, top:800 == bottom:200

The important question, is how you can find out your scroll distance from the top. For that lets use a function:

function calcTopLocal() {
        var s = $('#modalDialogContainer').scrollTop() + 'px';
        return s;
}

Now, to apply it to your block:

 $("#myTableInsideDialog").block({
            css: {
                top: calcTopLocal()
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

This can be refactored many ways. The significant detail is using scrollTop() and applying styling.

---

response to MKaama:

My proposed answer has no loops, no timers, and no suggestions of repeated action. There is no

Repeatedly calling a js function just to keep the position fixed is an overkill, a waste of CPU

Scaramouch

Is there a way to make this a 'sticky' function. In the sense, if the user scrolls while the ajax request is underway, the block will seem to move with the scroll, wouldn't it? – Roughhouse

@Serendipity, what is the importance of being "sticky"? OP stated priority is that block is visible when button is pressed. I don't think browsers allow scrolling when a block is attached to modal, but even if they do, is there any great loss? The message is seen, and user is notified. – Scaramouch

Repeatedly calling a js function just to keep the position fixed is an overkill, a waste of CPU. This is a job for declarative position-ing. – Chamberlin

@MKaama, I don't understand your comment. I'm suggesting calling calcTopLocal() ONCE for each time .block() is called -- to calculate position. I'm rejecting even aiming for "sticky". Please explain how this qualifies as a "waste of cpu"... – Scaramouch

I agree that this is an acceptable solution as the "Loading..." message will initially show up visible. If user scrolls after that, it can become invisible, although still being relevant. My assumption about your code was mistaken, I thought it will stay visible. – Chamberlin

@MKaama, thanks, I understand. I think your comment cost me a down vote :( – Scaramouch

@Dave: that is why I was suggesting that we should block on the modal instead of the content. BlockUI would automatically figure out the positioning. And the content scrollbar will not be 'active'. – Roughhouse

Answer 2

If you want to add an loading message when the ajax is requesting the data, you can append a <div> on the dialog containing the message you want to display. Then you can apply a relative position to the dialog and an absolute position to the <div> and with margin:auto the div remains in the center of dialog always, even if you scroll the dialog.

jsFiddle demo

$("#modalDialogContainer").dialog({
    resizable: true,
    height: 300,
    autoOpen: true,
    width: 300,
    modal: true,
    buttons: {
        'call ajax': function(){
            // insert the loading div to the dialog
            $(this).parent().append("<div class='loading' />");

            $.ajax({
                type: 'json',
                url:  'jsonRequest.php',
                complete: function(){
                    // remove the loading div
                    $('.loading').remove();    
                },
                success: function(){
                    //do what you want
                }
            });
        }
    }
});

the CSS file should be something like this

#modalDialogContainer{
    position: relative;
}

#myTableInsideDialog{
    height: 1000px;
    width:  100%;
}

.loading{
    position: absolute;
    top:      0px;
    bottom:   0px;
    left:     0px;
    right:    0px;
    margin:   auto;
    ...
}

Herisau

Answer 3

Use

$('#modalDialogContainer').scrollTop() 

to find the amount of user's scroll.

You can then show your message with

 { top: $('#modalDialogContainer').scrollTop()+'px' }

And it will always be visible for them, and appear at the top of what they are looking at :)

Anaya

Answer 4

there is a useful plugin that can tell if an element is visile on screen or not ( scrolled to ) , you may simply use it , the function returns true for visible areas on screen :

Here is a quick demo:

http://opensource.teamdf.com/visible/examples/demo-basic.html

Here is the source page :

http://www.teamdf.com/web/194/jquery-element-onscreen-visibility

usage as simple as:

$('#element').visible()

Inoculum

Answer 5

Why bother with the height of the content at all?

I mean, isn't an easier solution to the problem possible by putting a "BlockUI" on the JQuery Dialog. Since you have a fixed height there, your block UI would most certainly be fixed as well. There is no way the scroll can now affect your message.

A crude example is hosted here in fiddle. It gives you both experiences so you can see how it behaves.

For example, you can put the block UI on the following class.

var container = ".ui-dialog";
$(container).block({
   message: '<h1>Processing</h1>' 
});
$.ajax({
    url: "/echo/json/",
    data: {
        json: {},
        delay: 5
    }
}).done(function() {
   console.log("Done with ajax");
    $(container).unblock();
});

Roughhouse