You're not using the script and styles I demonstrated in my demo page.
You're using the blockui plugin instead. As I explained before, you're
not going to get it to work if you have your script inside a document
ready block because the DOM itself is the slow part (when running the
SQL query). When the DOM is simple/small, as it is with your big image
example, then it's fine.
If you're willing to try my suggestion, I'm happy to continue helping
you. Otherwise, good luck.
--Karl
On Oct 13, 2009, at 1:59 PM, sdtacoma wrote:
Hello,
Your example page does work as it should. Now replace the "Lorum
Ipsum" content with content from a SQL Query and it won't work the
same way. (at least that is the issue I am having)
- http://meded.ucsd.edu/testQuery.cfm
(does not work as expected, doesn't show the loading message while the
query is running)
- http://meded.ucsd.edu/testStatic.cfm
(does work as expected, shows the loading message while the images are
loading)
Josh
On Oct 12, 5:30 pm, Karl Swedberg <k...@englishrules.com> wrote:
You've lost me there. If you're trying to block the page based on
some
user interaction, then the blockui plugin should work just fine. I
thought the problem you were having, though, was with the page not
being blocked immediately when the user first visits the page. You
asked about document ready and whether it could fire sooner. I
offered
a solution that didn't rely on document ready so that the ui would be
blocked immediately until everything was loaded.
I put a test page up so you can see that it does, in fact, solve the
problem that you originally
presented:http://test.learningjquery.com/blockui.html
Note that I added a setTimeout inside the $(window).load() function
to
simulate a heavy page.
--Karl
____________
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Oct 12, 2009, at 4:59 PM, sdtacoma wrote:
Thanks for you help Karl but that didn't seem to solve my problem.
I have more info to add to the issue though. The "Loading..."
message
works great if there are say, images on the page loading. It does
NOT
work if I am waiting for a query to finish and it's results to be
displayed back to the page.
Any idea why it would work for one and not the other or how I can
get
it to work with a query too?
DOES NOT WORK:
<script language="javascript" type="text/javascript" src="/tools/js/
jquery/jquery_1.2.4b.js"></script>
<script language="javascript" type="text/javascript" src="/tools/js/
jquery/jquery.blockui.js"></script>
<script>
$(document).ready(function() {
$.blockUI();
$(window).load(function(){unBlockFunction(); });
});
function unBlockFunction(){
$.unblockUI();
}
</script>
<cfquery datasource="#application.dsn#" name="qSelect"
maxrows="100">
select *
from user_info
</cfquery>
<cfdump var="#qSelect#">
DOES WORK:
<script language="javascript" type="text/javascript" src="/tools/js/
jquery/jquery_1.2.4b.js"></script>
<script language="javascript" type="text/javascript" src="/tools/js/
jquery/jquery.blockui.js"></script>
<script>
$(document).ready(function() {
$.blockUI();
$(window).load(function(){unBlockFunction(); });
});
function unBlockFunction(){
$.unblockUI();
}
</script>
<img src="http://wnsl.physics.yale.edu/media/
education_full.jpg"><br>
<img src="http://sprottshaw.com/uploads/images/Misc.%20Images/
242351742.jpg"><br>
<img src="http://www.nfq.ie/nfq/en/images/FanDec2006.jpg";><br>
<img src="http://www.efytimes.com/admin/useradmin/photo/The%20Mobile
%20Computer%20Education%20Bus.jpg"><br>
On Oct 10, 9:54 am, Karl Swedberg <k...@englishrules.com> wrote:
document.ready fires when the DOM is fully registered. If you have
large images in the document, document.ready doesn't wait for those
to
completely load. So, it's typically earlier than window.onload, but
it
isn't going to fire before you see stuff on the page.
I haven't tested this at all, and I'm just creating this in
email, so
proceed with caution ... but you might want to consider putting
something like this in the <head>:
<script type="text/javascript">document.documentElement.className =
'js';</script>
and in your stylesheet do this:
#uiblocker {
display: none;
}
.js #uiblocker {
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
cursor: wait;
z-index:1001;
}
and in your html, put this right after the opening <body> tag:
<div id="uiblocker"></div>
and in a javascript file, do this:
$(window).bind('load', function() {
$('#uiblocker').hide();
});
So, that /should/ work. For IE6 support, you'll need to either
simulate position: fixed with a css expression or change it to
position: absolute and hope for the best.
Hope that helps.
--Karl
____________
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Oct 9, 2009, at 2:27 PM, sdtacoma wrote:
Hello,
I am using jQuery and BlockUI to display a "Loading..." message to
the
user while the page is loading.
The problem is that the "Loading..." message seems to show up
AFTER
the page has loaded, not during load. Shouldn't the document.ready
fire sooner than that?
What am I doing wrong?
<script>
$(document).ready(function() {
$.blockUI();
setTimeout($.unblockUI, 2000);
});
</script>
![http://www.nfq.ie/nfq/en/images/FanDec2006.jpg"](http://www.nfq.ie/nfq/en/images/FanDec2006.jpg"){kind=link}