JQuery :: BlockUI Scroll - Slight Usability Bug With BlockUI
Feb 1, 2011
I noticed a slight usability bug with blockUI. when we block, with a message div - the page is still scrollable. however the message div that comes up, stays where it is, as user scrolls the page. So for example, if the vertical screen resolution is low, the user can not see the bottom of the message div, and in my case the message div has some appept or cancel buttons, which makes my UI unusable?
Are there any workarounds to this solution, other then placing the message div to the top of the page?
Have a asp.net mvc project using jquery-ui-1.7.2. and BlockUI. When I changed jQuery version from 1.3.2 to 1.4.1, the CSS pertaining to the block ceased to render. The functions fired (verified by in-line alerts) and firebug had no complaints. Moved back to 1.3.2 and the blocker rendered perfectly.
I posted this in the UI group and was told to put it in here... My problem is that I have a function that is to call blockUI both upon login and logout. BlockUI only fires upon logout.
Here's my code:
**code** function Processing(dataString,l_processing,control) { if (l_processing == "yes") {
I have an overlay that is implemented using Malsup BlockUI, with a "close" button, however it won't close! - here's the details... I have a DIV that I use as an overlay:
Displayed using: $.blockUI({ message: $("#mp").html() }); It has a cancel button (see above): ... <span class="divbutton greenbutton mp_no" style="margin-right: 1em">not now thanks</span> ...
Which closes the overlay by means of : $('.mp_no').click(function() { alert("close overlay"); $.unblockUI(); return false; });
However like I say, this simply refuses to close the overlay. I've used this same technique over and over again but this time something must be wrong. I just can't spot it! Moreover... if I place a button elsewhere on the page (and outside of the overlay DIV): <span class="divbutton greenbutton mp_no" style="margin-right: 1em">not now thanks</span> This will fire the click event, and is exactly the same "button" markup!
how can I have transparent borders for modal divs that I bring to frond have transparent borders? specifying: border: 10 px transparent yellow; in the settings.css will not work. I tried few things, and I am beginning to think it is not doable.
I'm sure this is simple to solve but I'm a newbie and I'm not sure what to do. I want to use the BlockUI plugin to show "page loading..." while my asp.net page loads some data - takes around 20 seconds. Once the page is fully loaded, I want the message to go away.
I'm trying to set a modal to the top right corner of the screen using block ui. In IE 6 the right margin is working, but it's ignoring the top margin and centering the modal in the window. In other browsers it behaves as expected
I am using the BlockUI Plugin version 1.33 with Jquery Version 1.2.1. When the application page is accessed in which the block and unblock UI calls are executed, IE is crashing randomly.
You should be able to replicate this on http://malsup.com/jquery/block/#pageGo to the page above and click on "Default Message" button and makesure you don't move the mouse cursor.You should see that the cursor remains a hourglass even after the pagecomes back, to get the correct cursor you have to move the mouse.
I am a ASP.NET developer and I would like to use the jQuery BlockUI inside a generic control, designed to show a popup (with javascript and CSS effects). My problem is to disable (key tab, enter and mouse clicks) the parent window (parent element) (my control is inside the page and does not use iframe). Inside my control I have a DIV and I show his content when the user call the method designed. The problem is: I only see the "caller" of BlockUI using this type of eventhandler "CLICK", ex:
$('#pageDemo2').click(function() { $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); test(); });
It is possible apply that property inside the blockUI out of my DIV (parent element), inside my control, without click ? Is it necessary to use a iframe?
How would you load a separate page in an iframe with BlockUI? I tried: forceIframe:true, iframeSrc:'/iframepage.html' but BlockUI still creates the default "Please wait..." overlay, but also creates a seemingly separate iframe overlay, but without applying any of the CSS properties to it. If BlockUI doesn't have this functionality, so any of the other overlay plugins support it? I've tried jqModal and SimpleModal, but none of them seem to explicitly support this.
I'm calling blockUI and then running ajaxForm on my whole page form. BlockUI is firing an overlay (with form field content) but only after the form has been ajaxed. Because of this my fields aren't seen as in the form and so subsequent form submits fail. Firebug says: form is null, /assets/js/jquery.form.js, Line 364 (form.clk = this;) The longer version:The javascript for these events are being returned to taconite within<eval> blocks. They are coming back in the below order: blockUI on whole page I then call a custom function which contains the "$('#page- form').ajaxForm({ dataType: 'xml' })"; When I alert inside that custom function it occurs before any blockui overlay is shown. I'm surmising that this is breaking the form submit for elements within the blockui message (which are actually already on page but hidden).
I've tried adding alerts before and after blockui is called and they run in the correct order so I'm guessing that perhaps blockui queues itself to run somehow. BlockUI doesn't have any after block callbacks that I'm aware of. I'm wondering if I can add a beforeSubmit callback to the ajaxForm method that calls itself to update the form but that just feels a bit dirty. I use the framework that I've put together extensively and it's only when adding blockui that I have this issue so I'm (at least fairly) sure that it's not a PEBKAC issue.
I'm trying to implement the Growl option for the blockUI plugin, the "hard" way ( as seen here: http:[url].... second to last example). The reason why I'm going the "hard" way is because I'd like to have multiple Growl messages - one for an error,one for a success, etc, all of which have different background images / styles (ex: a red X for error, a green checkmark for a success).The "easy" growl method, while allowing for different text content,only allows for one style. Thus I'm trying to get around this limitation using the "hard" way:
subsequently adding different styles in my stylesheet. Yet I get an error that says "data.parent = node.parentNode", when I try and run the above code. Has anyone had any luck getting *different* growl messages with different styles/images in them to run on the same page?
When I am using tablesorter , jquery.blockUI.js as well as the blockUI() and unblock() functions it will give error, Iam using jquery 1.4.2. Also what will be the solution if some of my older jquery functionalities not work with new jQuery 1.4.2.
I have a page, with two tables, each placed in a div (lets call them div1 and div2), to give the tables a fixed height. I load data into the tables with $('#div1').load() function, but before I load the data, I call $('#div1').block({message: 'wait'}), and in the load callback, I call $('#div1').unblock(). I do the same for div2. The refresh of the two tables sometimes runs in parallel.
The problem is this:
The first two or perhaps three refreshes, I get the expected behaviour, but after that, the overlay is not shown. If I look at the DOM during the opreation (both in Chrome and Firefox DOM inspectors), I can see the blockUI DOM elements being created and removed, but they never show.
I have tried several things, among others this:
1) Call unblock before block, to make sure, that the element is not blocked.
2) Only to have one div blocked - same result
I have not yet made a page with a simplified example, but that would be my next step.
I have a cgi script with an HTML form that processes DNA sequences from a user, aligning them against millions of other DNA sequences. That takes a while, so I want to display a waiting message while the query is being processed. My page is here :I am not sure what I am doing wrong, most of the time the message appears so briefly you can barely see it (if you're lucky it appears nicely but quickly disappears). The page gets reloaded with the results below the form, and it seems that both processes (blockUI and the program itself) are conflictingTo test the page, you could paste the following in the text area
And this $('#addT2').click(function() { $.blockUI({ theme: true, // true to enable jQuery UI support draggable: true, // draggable option is only supported when jquery UI script is included title: 'This is your title', // only used when theme == true message: $('#loginForm2'), css: { width: '275px' } });}); $('#yes2').click( function() { var ITNO= document.getElementById("ITNO2"); var ITNM= document.getElementById("Repdate"); var Des= document.getElementById("Quant2"); var Cat= document.getElementById("Vend"); var Quant= document.getElementById("RecByt"); var r=confirm("Are You Sure");if (r==true) { var ITNO1=ITNO.value;var ITNM1=ITNM.value var Des1= Des.value; var Cat1= Cat.value; var Quant1= Quant.value; // unblock when remote call returns $.unblockUI(); } //return false; }); $('#no2').click(function() { $.unblockUI(); return false; });}); How if I want to add a datapicker() inside one of these text fields ?
I encountered a possible blockUI bug in IE7 and IE8: If you block theui and don't move your mouse after that, the cursor displays thehourglass symbol UNTIL you move your mouse again.Thus, the .unblock() method doesn't have the desired effect on themouse cursor.You can easily reproduce the effect with the blockUI demos: just clickon the "Run" Button without moving your mouse further.
<html><head><style type="text/css"><!-- DIV {margin:0px;} --></style></head><body><div style="font-family:arial,helvetica,sans-serif;font-size:12pt">Hello
i'd like to know if it's possible change de message while the page is block by "blockUI" jquery plugin. I've tried a lot of things, but none was good. One thing i've tried was using CSS selectors like:
$('blockUI blockMsg blockPage').innerHTML but it hasn't worked. <font size="2"><span style="font-family: verdana,helvetica,sans-serif;"></span></font><div>
