jQuery ready function with holdReady

I used this the other day in GWT, prior to backing it out and placing style classes in better places so i could use straight CSS targeting.  But, I thought it could be useful and it uses the new jQuery.holdReady function so here it is.

My goal was this: In order to get the correct horizontal scrollbar in a GWT app, I had to target the div right ABOVE the root div placed in my Root View (which contains the structural layout of my page). I used jQuery to target that div, but they went back and placed a styleclass in the RootLayoutPanel widget instead so that i could target this more cleanly (within GWT) with CSS’s :nth-of-type / :nth-child selector.  I found the exact DIV that i needed to target by placing overflow-x: auto !important on all the parent divs until it worked ‘correctly.’

The ‘pageScrolling’ style class is defined with only overflow-x: auto !important

/* Startup functions */

* First, place a hold on the document ready function... GWT loads more stuff
* after the DOM loads, and we need to add a little extra delay to account for that.
* By using document ready and hold ready together, i am able to make sure that the
* startup function runs after the page is completely ready.

// Set up the on-DOM-ready function
jQuery(function($) {
  // Find the DIV that should handle scrolling for the "body" and mark it

* GWT needs to create its structure, which happens after DOM loads??
* Therefore, hold the document READY function until an expected element
* is detected
* (ps.. This holds ALL jQuery ready functions anywhere the system... if there are any)
var waitForPageToLoad = function() {
  if (jQuery('.myRootPanel').size() > 0) {
    // it exists now.. trigger the ready function
  } else {
    // Doesn't exist yet.. wait some randomly selected time period.
    setTimeout( waitForPageToLoad, 200 );

* Trigger the timeout function to wait for the page to REALLY load,
* and then release the document READY hold.

Leave a Reply

Your email address will not be published. Required fields are marked *