malsup / blockui Goto Github PK

It should be possible to call blockUI multiple times (e.g. for multiple ajax requests done at the same time), and then multiple unblocks. When calling blockUI twice, unblock must also be called twice before actually unblocking.

I recently tried to apply the plugin to table cell, but failed to use it:

Instead of blocking single cell the plugin blocks the whole page.

Did not find any information regarding the license. Is it MIT?

Forgive me if I'm wrong - but it looks like bindEvents doesn't really stop anything as most handlers will already trigger until event bubbles up to the document level. So if I bind my button like this in blocked area and trigger click from let's say from firebug console - it'll trigger just fine even if I set bindEvents=true. I think it makes sense to remove this option as perhaps too confusing.

$('input').click();

See demo here:

http://jsfiddle.net/rosenfeld/qY3MV/

I have a dropdown in my page, when user selects an element an ajax call is made to get data for a second dropdown. I'm using this, in a ASP.Net master page, to block the page when an ajax request happens in any page:

jQuery(document).ajaxStart(function () {
jQuery.blockUI({
bindEvents: true,
constrainTabKey: true,
css: {
border: "1px solid #000000",
padding: "20px 0px 20px 0px"
},
focusInput: false,
ignoreIfBlocked: true,
message: jQuery("#loadingMessageBox")
})
}).ajaxComplete(jQuery.unblockUI);

However, when after selecting an element from the first dropdown the user presses the arrow-down key the keystroke is accepted by the page even though it's blocked. Therefore, subsequent ajax requests are made to the server and if the user keeps doing this eventually an error is thrown by the blockui plugin: Line 242: Unable to get property 'parentNode' of undefined or null reference.

    $('#item').block({message:(function(o){
        var c=$('#alert').clone();
        return c;
    })(this)});

do not work again with jquery 1.4 a1

Hi there, I'm using this plugin and it works really nice but now I'm having problem with a legacy page when I'm reusing some templates with style from css and the content that is shown in into the modal dialog just does not preserve their styles.

Is there something to do so the content into the modal keeps the styles?

The overlay is not working in ubuntu's firefox 3.6.10. It appears it is never setting the background-color or opacity attributes in the style tag. I get the following overlay div in firefox 3.6 on the demos page.

Hello,

I’m using BlockUI plug-in for showing custom Ajax loading images and simple dialogs in one of our ASP.NET applications.

Unfortunately we still have to support IE6 and I had some problems with horizontal centering of the popup dialogs in IE6 when there is a horizontal scroll. There was also a problem with the top positioning when resizing the window under IE6.

When the overlay is shown, it covers only the visible area, but if I scroll horizontally, it does not stretch.
Also when I resize the window after an element has been blocked, top position is not recalculated.

I made a simple patch to the IE positioning part of the latest version of Block UI plug-in :

// simulate fixed position
$.each([lyr1, lyr2, lyr3], function(i, o) {
var s = o[0].style;
s.position = 'absolute';
if (i < 2) {
full ? s.setExpression('height', 'Math.max(document.body.scrollHeight, document.body.offsetHeight) - (jQuery.boxModel?0:' + opts.quirksmodeOffsetHack + ') + "px"')
: s.setExpression('height', 'this.parentNode.offsetHeight + "px"');
full ? s.setExpression('width', 'jQuery.boxModel && document.documentElement.scrollWidth || document.body.scrollWidth + "px"')
: s.setExpression('width', 'this.parentNode.scrollWidth + "px"');
if (fixL) s.setExpression('left', fixL);
if (fixT) s.setExpression('top', fixT);
}
else {
if (opts.centerY) {
if (full) {
s.setExpression('top', '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"');
}
else {
s.setExpression('top', '(this.parentNode.offsetHeight) / 2 + (blah = this.parentNode.scrollTop) + "px"');
}
s.marginTop = 0;
}
else if (!opts.centerY && full) {
var top = (opts.css && opts.css.top) ? parseInt(opts.css.top) : 0;
var expression = '((document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + ' + top + ') + "px"';
s.setExpression('top', expression);
}

if (opts.centerX) {
    if (full) {
        s.setExpression('left', '(document.documentElement.clientWidth || document.body.clientWidth) / 2 + (blah = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"');
    }
    else {
        s.setExpression('left', '(this.parentNode.scrollWidth) / 2 + (blah = this.parentNode.scrollLeft) + "px"');
    }
    //s.marginLeft = 0;
}
else if (!opts.centerX && full) {
    var left = (opts.css && opts.css.left) ? parseInt(opts.css.left) : 0;
    var expressionL = '((document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + ' + left + ') + "px"';
    s.setExpression('left', expressionL);
}

}

I use scrollWidth instead of client width, added left calculation according to centerX and top expression in case of element blocking. All these seem to work fine in our case, but I’m not sure if I know all gaps when working with IE6.

This solved the problem for me under IE6, but I'm not sure that covers all cases that can occur with WIDTH calculation when "simulating fixed position".

Can you tell me if this change is OK and hopefully include it in some of the new versions, so I don't have to patch it by hand on every update.

Best regards
Ivan

see https://github.com/voronianski/jquery.avgrund.js

It would be cool, if blockui would pass the JSHint (with default options):

http://www.jshint.com/

Currently we get a lot of warnigs like this:

Line 38: if (title) $m.append('<h1>'+ title+'</h1>');
    Expected '{' and instead saw '$m'.
Line 521: if (e.keyCode && e.keyCode == 9) {
    Expected '===' and instead saw '=='.
Line 572: setup(jQuery);
    'jQuery' is not defined.
Line 545: function focus(back) {
    'focus' is defined but never used.

Cursor stays in wait mode even after unblock has been called until the mouse is moved before the wait mode disappears. Tried in chrome12 and IE8

In complex applications using $.blockUI extensively, different components may collide in their usage e.g. a $.blockUI call is set on a timer for long-running xhr, and an other one is set on a specific set of requests (rather than a single one) which is known to be a long "process" (e.g. with a progress bar and a bunch of calls to query the installation state).

if the first case is nested within the second one, or happens at the same time, it may end up cancelling the previous $.blockUI. It would be nice if a block could be set with an arbitrary key/password/passphrase, and only calling $.unblockUI with the same string unblocked the UI.

I don't understand why do you alias fadeIn like this?

$.fn._fadeIn = $.fn.fadeIn;

P.S. awesome work with this plugin.

If you block an element and set theme: true, the block appears as a line instead of a box.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <!-- <link href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.3.2.min.js">
</script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js">
</script> -->
    <link href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.4.2.min.js">
</script>
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js">
</script>
    <script type="text/javascript" src="js/jquery.blockUI.js">
</script>
    <title></title>
  </head>
  <body>
    <script type="text/javascript">

    $(document).ready(function() { 
        $('#blockButton2').click(function() { 
            $('#Dialog').block({ 
                message: '<h1>Processing<\/h1>', 
                theme: false 
            }); 
        }); 

        $('#blockButton3').click(function() { 
            $('#Dialog').block({ 
                message: '<h1>Processing<\/h1>', 
                theme: true 
            }); 
        }); 

        $('#unblockButton').click(function() { 
            $('#Dialog').unblock(); 
        }); 
                });
    </script>
    <div id="Dialog">
      <a href="#" class="test">Test link - click me!</a> <select>
        <option>
          Option 1
        </option>
        <option>
          Option 2
        </option>
      </select> lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet <select>
        <option>
          Option 1
        </option>
        <option>
          Option 2
        </option>
      </select> lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo <a href="#" class="test">Test link - click me!</a> lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet<br>
      <textarea rows="2" cols="20">
test textarea
</textarea>
    </div>
    <form>
      <input id="blockButton2" type="button" value="Block with Message"> 
      <input id="blockButton3" type="button" value="Block with Message (Themed)">
      <input id="unblockButton" type="button" value="Unblock">
    </form>
  </body>
</html>

I've noticed that the cursor changes to the wait cursor by default on block but in Internet Explorer when the screen is unblocked the cursor doesn't change back right away. The user has to move the mouse for the cursor to change. It works fine in all other browsers. Any way to work around this?

Hi there,
Not really an issue but a possible improvement.

Just added three events to the bind() function, to prevent scrolling whatever is behind the overlay on Android browsers (tested on 2.1 and 2.3).
The added events were "touchstart touchend touchmove"

When I try to block multiple elements and use a jQuery selector as the message, the message only shows up in the last element to be blocked. After making a call to unblock the original message is not inserted back into the dom.

Here is an example on how to reproduce:

<div class="foo"></div>
<div class="foo"></div>
<div id="ajaxMessage"></div>

<script type="text/javascript">
$('.foo').block({ message: $('#ajaxMessage') });
$('.foo').unblock();
</script>

After the block call only the second div has the message showing up. Once the unblock call is made the #ajaxMessage div is no longer on the page.

see line 329

$.blockUI() and $().block() return the lyr1 or $(el) help chainable calling like that $().block().find("#btn-yes").on("click", foo)

I am using the latest blockUI script and had a problem when using it in conjunction with a very complex JS/jQuery file. Essentially I would call $.blockUI() before some methods and it wouldn't pop anything up until the last one, then would never put it away.

Found out from this link: http://forums.asp.net/t/1658867.aspx/1?Problem+getting+BlockUI+to+behave+like+I+want+it+to+

Someone was having a similar issue, they put the blockUI and unblockUI calls into a named function and viola, it works. Tested and verified here as well. If you have complex dynamic creation going on it seems to need the function to be called to call the proper instruction. My guess is it has something to do with the 'reading' of a JS file but not sure. If you need more information I will relate it to you.

Currently the code contains in line 293 an outcommented check used for applying overlay-styles only when theming is not activated in the options.
I'd suggest to uncomment it because in my opinion the check for theming is still necessary as the styling of the overlay "collides" with the theme and produces a strange looking bar underneath the displayed "message box".

Line 293:
// if (!opts.theme && (!opts.applyPlatformOpacityRules))

P.S. great plugin.

I am using blockUI in an intranet web app that is accessed via https. Internet Explorer 7 displays a "this page contains secure and non-secure items warning" as soon as blockUI starts blocking the page.

This seems to be caused by the dynamically generated <iframe src="javascript:false;></iframe>" that blockUI creates to do its work. This article warns that IE7 is very picky about iframe sources when the page was served over https.

Is there a workaround for this?

Is is possible to specify a container to receive the blockui elements? At the moment they are appended to body, but it would be nice to be able to specify a container. This would enable much more efficient jquery event handling, as it would mean I could use delegate (on the container) instead of live.

Using jQuery 1.4.4 with blockUI 2.3.6 on IE8 gives:

$.blockUI()
"'attributes' is null or not an object"

jQuery 1.4.2 works fine in the same situation.

Using this code:

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

I know there's already some code to correct this issue here: https://github.com/malsup/blockui/blob/master/jquery.blockUI.js#L118-L120

// style to replace wait cursor before unblocking to correct issue of lingering wait cursor
cursorReset: 'default',

This doesn't act on IE 10 unfortunately.

As always, if I move the mouse the wait cursor goes way, but this is not good from a user point of view, that is, the user has to move the mouse. The cursor should reset back to the default one automatically.

Works great with latest Chrome 24 and Firefox 18.

// remove the current block (if there is one)
if (full && pageBlock)
   remove(window, {fadeOut:0});

When it calls twice, it can cause the overlay to flick. Can make this to optional?

blocking a div blocks full page after block/unblock/block in latest version

It is caused by this code in version 2.60 around line 495:

/* - this causes problems, whenrunning block / unblock / block
if ($el.data('blockUI.static')) {
$el.css('position', 'static'); // #22
}
*/

To test run block/unblock/block on a div with and without the above code

On Ubuntu with Firefox(v15) or Chrome(v21), nothing is working on this demo page: http://malsup.com/jquery/block/.

is it due to JQuery upgrade from 1.8 to 1.9?

When trying to apply .block() method to a table cell, the positioning seems to fail.

Used
jQ 1.8.0
blockUI 2

Let me know if you need an example.

Currently blockui only supports adding styling in the form of css properties. However, this makes it difficult to integrate with other theme systems (such as bootstrap).

the ability to add a class to the growl or dialog box would allow this.

according to http://blog.jquery.com/2012/06/22/jquery-1-8-beta-1-see-whats-coming-and-going/

http://malsup.com/jquery/block/#overview claims to be usable with "jQuery v1.2.3 or later".

Please replace the deprecated parts of the code before jQuery 1.9 will be available.

Thank you.

Hello,

Can you add a minified version of the plugin ?

Thanks

I undrestand that to block entire window I should call $.blockUI(). It only calls install function to window element. But I need created an facility in my code to block some element, and, if I dont pass the element, I will assume window. So, I write this simpler code:

function block(element) {
$(element || window).block();
}

I think that this code is ok and should work fine. But I found a little problem with this:

$.fn.block throws an exception on this line:
this.style.zoom = 1; // force 'hasLayout' in ie

because window has no style property. It can be solved with somethig like this:
this.style && this.style.zoom = 1;

Can you fix it?

Thanks,
Bruno E. Grossi

if you are using eg. asp.net, it would be nice to have an option for the appending target selector.

a rudimental fix for Version 2.35 (23-SEP-2010):

change

//$([lyr1[0],lyr2[0],lyr3[0]]).appendTo(full ? 'body' : el);
var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);

to

//$([lyr1[0],lyr2[0],lyr3[0]]).appendTo(full ? 'form' : el);
var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);

and

    els = $('body').children().filter('.blockUI').add('body > .blockUI');

to

    els = $('form').children().filter('.blockUI').add('form > .blockUI');

/^1\.(0|1|2)/.test($.fn.jquery)

[HTTP_USER_AGENT] => Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB7.4; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET4.0C; .NET CLR 3.0.30729; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; BRI/2)

So I think BlockUI is believing the browser to be IE6 when it's really IE8 due to the following test:

var ie6  = /MSIE 6.0/.test(navigator.userAgent);

The user agent above clearly has 'MSIE 8.0' and 'MSIE 6.0' within in.

As variable ie6 is true, this then triggers the following test when it shouldn't as setExpression is not defined...

if (ie6 || expr) { ...

... and so causing the Not Implemented error on a later statement.

Perhaps code needs to be added so that ie6 can only be true if similar tests for MSIE 7 and MSIE 8 were also performed and had to be false?

var ie6  = /MSIE 6.0/.test(navigator.userAgent);
var ie7  = /MSIE 7.0/.test(navigator.userAgent);
var ie8  = /MSIE 8.0/.test(navigator.userAgent);
ie6 = ie6 && !ie7 && !ie8;

There may well be a better more elegant way, but you get the idea?

There is fragment of code in block logic:
if ($.css(this,'position') == 'static')
this.style.position = 'relative';

The problem is that after unblock it is not ralled back. So if inside div are absolute positioned element (like lightweight dialogs) they logic will be broken

I had a block setup to run with a timer, which properly fired off the unblock. If you don't have a timer, firing the $.unblockUI(); method will not properly trigger the onUnblock callback. You need to include the onUnblock callback in the call to $.unblockUI();. It seems like it should be able to use the onUnblock callback defined in the $.blockUI action instead of having to re-pass the callback.

function withTimer() {
  $.blockUI({
    timer: 500,
    onBlock: function() {
      alert('blocked');
    },
    onUnblock: function() {
      alert('unblocked');
    }
  });
}

function noTimer() {
  $.blockUI({
    timer: 500,
    onBlock: function() {
      alert('blocked');
    },
    onUnblock: function() {
      alert('unblocked');
    }
  });
}

function unblockWorks() {
  $.unblockUI({ onUnblock: function() {
      alert('unblocked');
    }
  });
}

function unblockFails() {
  $.unblockUI();
}

$().ready(function () {
  $(".timer").bind('click', function() {
    withTimer();
  });

  $(".no-timer").bind('click', function() {
    noTimer();
  });
});

Since jQuery 1.9 the browser property is not included. So the BlockUI does not function.

Hi, I am using BlockUI for exactly what i need to do, which is to load a custom html format (including css classes including background images) message on trigger. In IE, this works perfectly but in FF, Safari and Chrome, none of the background images from the CSS display at all, so i am left with an untidy/incomplete looking loading screen. What is strange is that i have an unordered list with custom styled bullet images which are defined by the css and these display without problem in FF, Safari and Chrome. It is the div background images that do not work.

Do you have any ideas. Other than that BlockUI is awesome.

Thanks

I meet the question in jQuery BlockUI Plugin.I use $(element).block(message) to blocking user interaction in IE, but it returns a exception: WRONG_DOCUMENT_ERR (4).
They are not the same document for I execute $(element).block(message) :

$(self.targetWindow.document.body).block('message');

and the BlockUI append DOM Elements(layers) to element:

(line: 228)
var lyr1 = ($.browser.msie || opts.forceIframe) ?
$('<iframe class="blockUI" style="z-index:'+ (z++) 
+';display:none;border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0" 
src="'+opts.iframeSrc+'"></iframe>', doc) : $('<div class="blockUI" style="display:none"></div>');


(line: 277)
var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
$.each(layers, function() {
    this.appendTo($par);
});

It should be gives a document in which the new elements will be created.

add:

(line: 193)
var doc = window.document;
if(typeof el.ownerDocument != 'undefined') {
    doc = el.ownerDocument;
}

change:

(line: 228)
 var lyr1 = ($.browser.msie || opts.forceIframe) ? $('<iframe class="blockUI" style="z-index:'+ (z++) 
+';display:none;border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0" 
src="'+opts.iframeSrc+'"></iframe>', doc) : $('<div class="blockUI" style="display:none"></div>');

var lyr2 = opts.theme ? $('<div class="blockUI blockOverlay ui-widget-overlay" style="z-index:'+ (z++) +';display:none">
</div>', doc) : $('<div class="blockUI blockOverlay" style="z-index:'+ (z++) 
+';display:none;border:none;margin:0;padding:0;width:100%;height:100%;top:0;left:0"></div>');

to:

 var lyr1 = ($.browser.msie || opts.forceIframe) ? $('<iframe class="blockUI" style="z-index:'+ (z++) 
+';display:none;border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0" 
src="'+opts.iframeSrc+'"></iframe>', doc) : $('<div class="blockUI" style="display:none"></div>', doc);

var lyr2 = opts.theme ? $('<div class="blockUI blockOverlay ui-widget-overlay" style="z-index:'+ (z++) +';display:none">
</div>', doc) : $('<div class="blockUI blockOverlay" style="z-index:'+ (z++) 
+';display:none;border:none;margin:0;padding:0;width:100%;height:100%;top:0;left:0"></div>', doc);

(My English is not very good, forgive me if I don't understand.)

css options in $.blockUI.defaults.css has very high priority than css in blockMsgClass: 'blockMsg'

color:      '#000',
border:     '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'

these options should be removed as they can not be overwritten by .blockMsg even with !important flag

Hi, master!

First of all, thanks a lot for our wonderful plugin. It's helping me a lot with my project.

I am developing and app with a lot of modal dialogs and ajax requests. I am trying to make it possible to be accesible via keyboard too (navigating by tabs, for example), and then I have some questions about that:

I am having annoying issue: When I load dynamic content over modal dialog (using blockUI, of course), tab navigation stop to work properly. I tried to investigate a bit on your code, and I think problem comes because "pageBlockEls" is only loaded at the beggining, and then it doesn't expect any changes. So, if we make changes on dialog, it produces inconsistency and malfunctions.

And too, I think I am trying to use blockUI to the extreme, but when I use blocks in cascade (block over block), I have some kind of problems too. Is there any kind of limitations using it in that manner?

Thanks a lot for your great work!

Because of a version parsing problem it seems like jQuery 1.10 is parsed as 1.1 and blockUI complaints about needing a version 1.3 or higher.

Details here: http://ideasandpixels.com/blockui-requires-jquery-v1-3-or-later-quick-fix

We are using blockUI for displaying multiple dialogs (that is an overlay window which might display additional sub dialogs).

Since there is no way of having multiple blockUI instances in "full" mode (right?), we use element blocking:

$('body').append('<div id="overlay"></div>');        
$('#overlay').block({
  message: '<div class="container"></div>',
  css: css
});

Now of course the problem is, that the background blocking layer overrides the CSS settings in line 270 of blockui:

That means it's impossible to cover the full screen, because position is always absolute, never fixed (if not in full mode).

Why is it so important not to use position fixed for element blocking? Is there any reason for this I might have overlooked?

What happens if you simply remove line 270? It's possible to set CSS properties for the message and the block layer anyways.

$.boxModel always returns undefined in jquery 1.8. You could use $.support.boxModel, but that check is also depricated (but still works)

When using element blocking, we have a site that has nested elements (e.g. div inside a fieldset)...

When we unblock the parent item (e.g. fieldset) we still want to maintain the block status of the child item (e.g. the div), but currently anything inside the parent item gets affected.

Is there a solution to allow children to not be affected by the parent ?

Stack Overflow question here: http://stackoverflow.com/questions/12384113/nested-blockui-elements-need-independence-from-parent