Wow, easy there Karl. I was just showing you working examples of the issue I was experiencing.
I have applied the code that you sent me and it does work, kinda. Your code does not actually wait for the data to finish loading. It merely unblocks the UI after a period of time. This is not what I want. I want the UI to become unblocked after the page is done loading, not after a certain period of time passes. http://meded.ucsd.edu/testKarl.cfm (your code as-is) http://meded.ucsd.edu/testKarl2.cfm (your code with a query. Does not block the UI while the query is being run) http://meded.ucsd.edu/testKarl3.cfm (your code with images) Again, the issue I am having is that the UI is not blocked when running queries on the page, one when static content is loading. On Oct 13, 12:14 pm, Karl Swedberg <k...@englishrules.com> wrote: > 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}