I'm enjoying this thread. :-)
On Oct 14, 2:04 pm, Karl Swedberg <k...@englishrules.com> wrote:
> > Wow, easy there Karl. I was just showing you working examples of the
> > issue I was experiencing.
>
> easy there? I was just trying to help. You showed examples that didn't
> include my suggestions, after we had already established that your
> first attempts were not going to work.
>
> > 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.
>
> Exactly. That's why I wrote this...
>
> >>>> Note that I added a setTimeout inside the $(window).load() function
> >>>> to
> >>>> simulate a heavy page.
>
> It was a demonstration, since I didn't have your queries at my
> disposal. Feel free to remove the setTimeout. The $
> (window).bind('load', fn) part should be telling the script to wait
> until everything is fully loaded before it executes the code inside it
> ( $('#uiblocker').fadeOut(); )
>
> > 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.
>
> I'm not sure what's going on with your queries. I did notice some odd
> stuff, though, when I looked at what was actually coming to the
> browser inhttp://meded.ucsd.edu/testKarl2.cfm:
>
> 1. You have this :
>
> <link rel="stylesheet" type="text/css"
> href="http://meded.ucsd.edu/meded/meded.css
> "> before
>
> before this :
>
> <!DOCTYPE html>
>
> Can you try putting that styesheet reference inside <head> ?
>
> 2. I doubt this will make a difference, but try putting this line:
> <script type="text/javascript">document.documentElement.className =
> 'js';</script>
> directly after the <title> and before you load any styles or other
> scripts
>
> 3. you have a <style> tag inside the <body>. Again, might not make a
> difference, but worth moving to the <head>
>
> Hope that helps.
>
> --Karl
>
> On Oct 14, 2009, at 12:00 PM, sdtacoma wrote:
>
>
>
>
>
> > 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}