[jQuery BlockUI plugin] Strange behaviour of BlockUI

[Trejder]

Hi there,

While using great BlockUI plugin I run into two, strange problems.

1. I set: display: none to all divs that I want to present in BlockUI,
which is obvious - because I don't want these divs to be shown in
normal page flow. What is not obvious and strange is that BlockUI does
not un-hide such hidden elements when displaying them.

I have to use for example:

document.getElementById('inner-holder-error').style.display = 'block';

in JS function that brings BlockUI up.

What is even stranger I have to again hide them with:

document.getElementById('inner-holder-error').style.display = 'none';

because BlockUI does not hides them and they appear in page flow after
closing BlockUI.

2. BlockUI is incorrectly centering elements on my page. If what
should be contained in BlockUI has only one line all is OK. And it
seems to display in vertical and horizontal centering. But if I try to
put something more - a few lines or image. It is always incorrectly
centered on screen.

Even the simpliest construction as it can be:

$.blockUI({ message: $('#dialog_error') }

shows blockUI in incorrect position.

I found out that centering on a specific element with using block
instead of blockUI works fine.

I nearly 100% sure that there is something wrong with my page. Because
all examples on author's page works just perfectly. But I'm digging
through page code for over three hours now, testing really various
combinations and found nothing yet.

That's why I'm asking here. Maybe someone has simillar problems?

I would apperciate any comment or suggestion what should I do.

Cheers,
Thomas

[elubin]

We use blockUI and do NOT have to control the div content that it
displays...

<div id="Msg1Div" style="display:none">blah blah</div>

and blockUI shows it fine, and it stays hidden when the block is
done.  something else must be wrong...




On Nov 6, 11:55 am, Trejder <trejderow...@...> wrote:

> Hi there,
>
> While using great BlockUI plugin I run into two, strange problems.
>
> 1. I set: display: none to all divs that I want to present in BlockUI,
> which is obvious - because I don't want these divs to be shown in
> normal page flow. What is not obvious and strange is that BlockUI does
> not un-hide such hidden elements when displaying them.
>
> I have to use for example:
>
> document.getElementById('inner-holder-error').style.display = 'block';
>
> in JS function that brings BlockUI up.
>
> What is even stranger I have to again hide them with:
>
> document.getElementById('inner-holder-error').style.display = 'none';
>
> because BlockUI does not hides them and they appear in page flow after
> closing BlockUI.
>
> 2. BlockUI is incorrectly centering elements on my page. If what
> should be contained in BlockUI has only one line all is OK. And it
> seems to display in vertical and horizontal centering. But if I try to
> put something more - a few lines or image. It is always incorrectly
> centered on screen.
>
> Even the simpliest construction as it can be:
>
> $.blockUI({ message: $('#dialog_error') }
>
> shows blockUI in incorrect position.
>
> I found out that centering on a specific element with using block
> instead of blockUI works fine.
>
> I nearly 100% sure that there is something wrong with my page. Because
> all examples on author's page works just perfectly. But I'm digging
> through page code for over three hours now, testing really various
> combinations and found nothing yet.
>
> That's why I'm asking here. Maybe someone has simillar problems?
>
> I would apperciate any comment or suggestion what should I do.
>
> Cheers,
> Thomas

[malsup]

> 1. I set: display: none to all divs that I want to present in BlockUI,
> which is obvious - because I don't want these divs to be shown in
> normal page flow. What is not obvious and strange is that BlockUI does
> not un-hide such hidden elements when displaying them.
>
> I have to use for example:
>
> document.getElementById('inner-holder-error').style.display = 'block';


Can you post a link to this page?  Is inner-holder-error the outer
most element used for blocking?  For example, does your block call
look like this:

$.blockUI({
    message: $('#inner-holder-error')
});



> 2. BlockUI is incorrectly centering elements on my page. If what
> should be contained in BlockUI has only one line all is OK. And it
> seems to display in vertical and horizontal centering. But if I try to
> put something more - a few lines or image. It is always incorrectly
> centered on screen.

The default settings are meant to handle a simple, short message.  But
you can control the position of the message using blockUI's 'css'
option.  There is an example on the demos page that shows how to
control position with tall content.

http://www.malsup.com/jquery/block/#demos

Mike

[Trejder]

Mike,

The problem is partially solved.

> Can you post a link to this page?

No, I can't - since it is a project all the time being developed on
localhost.

> Is inner-holder-error the outer
> most element used for blocking?  For example, does your block call
> look like this:
>
> $.blockUI({
>     message: $('#inner-holder-error')
>
> });

Yes - that was the problem. I ported blockui in place of jquery ui
dialog box and messed up with div's names. After corection problem of
hiding/unhiding divs is solved.

> The default settings are meant to handle a simple, short message.  But

But I still can understand why blockui does not centers my message
vertically (horizontally is fine) if I use default options (no css no
option changing except message text)? By default centerX and centerY
are set to true, right?

Here you can see effect:
http://trejderowski.pl/trash/blockui.jpg

> you can control the position of the message usingblockUI's'css'
> option.  There is an example on the demos page that shows how to
> control position with tall content.

Yes. Bus AFAIK all examples, including the one I used:

     $.blockUI
     ({
          message: $('#inner-holder-error'),
          css:
          {
               top:  ($(window).height() - 500) /2 + 'px',
               left: ($(window).width() - 500) /2 + 'px',
               width: '500px',
               height: '500px'
          }
     });

requires providing widht and height. And what is most convinient and
most welcomed in default settings is that message is being centered
vertically and horizontally without providing it's dimensions. At
least that what should happen and happens in most situation as for one
most important for me effect you can see above - message is not being
centered vertically.

Cheers,
Tomasz

[Trejder]

In addition to above, some observations.

1. I changed:

     $.blockUI
     ({
          message: $('#inner-holder-error'),
          css:
          {
               top:  ($(window).height() - 500) /2 + 'px',
               left: ($(window).width() - 500) /2 + 'px',
               width: '500px',
               height: '500px'
          }
     });

to:

     $.blockUI
     ({
          message: $('#inner-holder-error'),
          css:
          {
               top:  ($(window).height() - $('#inner-holder-
error').height()) /2 + 'px',
               left: ($(window).width() - $('#inner-holder-
error').width()) /2 + 'px'
          }
     });

to force displaying centered message no matter of it's dimensions. But
this fails as either $('#inner-holder-error').height() returns
incorrect value (759 pixels in my situation, where 308 px should be)
or blockui changes div width AFTER displaying it. Effect - message
still not being centered vertically.

2. I used some jquery UI inner classes for forcing theming as I would
like to see it (what theme: true does is not what I want to see) and
was very surprised that block UI ignores round corners on FF for two
of four sides. See example:

http://trejderowski.pl/trash/blockui-2.jpg

Really strange I must admit.

3. Did you noticed / were aware that any alert('') places AFTER
blockUI call will be displayed BEFORE block UI blocks page?

Cheers,
T.