jquery blockui positioning

Question

I'm using blockui to throw some forms up on my site but for some reason the blockui element is positioned about 20-30 pixels from the bottom of the screen. I tried, per the docs (jquery blockui options for v2) to reposition it using this code:

 $.blockUI({css: {top : '10px'}});

But that just yawned at me in a universe mocking kind of way and did nothing. The default, again, per the docs, is top : 40%. I don't want to wipe out all the blockui css, just reset the top positioning.

Andean

Answer 1

I use this and the Load Message is positioned to the top right hand corner. Just play with the css to suit.

Hope this helps.

Rob

$.blockUI({
         message: '<img src="_assets/images/loading.gif" /><span style="margin-left:5px; font-family:arial;">Loading...</span>',
         fadeIn: 700,
         fadeOut: 700,
         timeout: 1000,
         showOverlay: false,
         centerY: false,
         css: {
             width: '150px',
             top: '10px',
             left: '',
             right: '10px',
             border: 'none',
             padding: '5px'
         }
     }); 

Tavarez

Thanks, I can't try it just yet, will give it a whirl tomorrow. – Andean

The key here is setting centerY: false. If you don't do this, then setting css: { top: '10px' } has no effect. But with centerY: false, the top property kicks in. – Hercules

Answer 2

The documentation gives this example:

$.blockUI({ css: { border = '5px solid red'} });

So I would try this:

$.blockUI({ css: {top = '10px'}});

Using an equal sign (=) instead of a second colon. Hope this helps!

Candracandy

yeah, I tried the = sign with no luck, but +1 for the try... : ) – Andean