Karl, these are other tips if loading jQuery using Google AJAX Library API.
I know it is possible to only load jQuery from Google without needing their API but I also know that sometime there are good reasons and features in using them. Google JSAPI implements the same technique implemented in jQuery ready (). Their "google.setOnLoadCallback()" method accepts two parameters, the first is a function to be executed, the second is a boolean that indicates if the function is executed at "onload" time (false or absent) or when the DOM is ready (true). So here is one way on how to use the ready() method (both Google and jQuery ones) in case one load jQuery through Google JSAPI (known and easy): <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript" > // Load jQuery google.load("jquery", "1.3.1"); // fire when page load complete google.setOnLoadCallback(function() { alert("Google onload()"); }, false); // fire when DOM is complete google.setOnLoadCallback(function() { alert("Google ready()"); }, true); </script> <script type="text/javascript" > $(document).ready(function() { alert("jQuery ready()"); }); </script> In the above example the jQuery ready() call is in a script block different from the one were it is loaded. The other way, this avoids using an extra script tag (and is less known/obvious): <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript" > // Load jQuery google.load("jquery", "1.3.1"); // fire when page load complete google.setOnLoadCallback(function() { alert("Google onload()"); }, false); // fire when DOM is complete google.setOnLoadCallback(function() { $(document).ready(function() { alert("jQuery ready()"); }); alert("Google ready()"); }, true); </script> Both in the first and second method I have left in the "google.setOnLoadCallback( fn, false )" just to show the small syntax difference (true/false). Using the Google JSAPI is possible to load older jQuery versions (< 1.2.3) and still use a more recent and stable ready() method from Google JSAPI. Evaluate and see if this has it's place somewhere in the docs, Diego On 2 Feb, 21:26, Karl Swedberg <[email protected]> wrote: > Hi Diego, > > Thanks. Yes, it is in the documentation for ready(). I should have > linked to it here, as I did on jquery-en where the OP was cross-posted. > > http://docs.jquery.com/Events/ready: > > > Note: Please make sure that all stylesheets are included before your > > scripts (especially those that call the ready function). Doing so > > will make sure that all element properties are correctly defined > > before jQuery code begins executing. Failure to do this will cause > > sporadic problems, especially on WebKit-based browsers such as Safari. > > --Karl > > ____________ > Karl Swedbergwww.englishrules.comwww.learningjquery.com > > On Feb 2, 2009, at 3:01 PM, Diego Perini wrote: > > > > > > > > > Karl, > > nice tip, is there a link to this in the documentation for ready() ? > > > It will not force users to read the documentation but you can answer > > back with a link to the docs. > > > I see this may pop up frequently for Webkit/Opera users so a small > > description will hopefully cut on the number of hits. > > > Diego > > > On 2 Feb, 14:20, Karl Swedberg <[email protected]> wrote: > >> If the problem you're having is with stylesheet info not being > >> available on ready, the solution is to change the source order in the > >> html: make sure that you reference them in the head before you > >> reference your scripts. > > >> --Karl > > >> ____________ > >> Karl Swedbergwww.englishrules.comwww.learningjquery.com > > >> On Feb 2, 2009, at 6:53 AM, Tom Tom wrote: > > >>> Hello. > >>> I discovered some time ago that in browsers based on WebKit, the > >>> ready not working properly. Looking into the code of jQuery 1.3.1 in > >>> binready I noticed it was missing the code. Because it tests only > >>> for IE and mozilla. It does not test for Opera, Safari and Chrome. > >>> I analyzed the version 1.2.6 and the bindready code has changed, > >>> result, in opera, safari and chrome, the ready does not work > >>> properly (stylesheets are loaded after the page content) > >>> Could you give me an alternative to not put the code of 1.2.6 in > >>> 1.3.1? > > >>> Here is the code I changed. The ready work correctly with these > >>> changes : > > >>> // Figure out what browser is being used > >>> jQuery.browser = { > >>> version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) > >>> || [0,'0'])[1], > >>> safari: /webkit/.test( userAgent ), > >>> opera: /opera/.test( userAgent ), > >>> msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ), > >>> mozilla: /mozilla/.test( userAgent ) && !/(compatible| > >>> webkit)/.test( userAgent ), > >>> language: navigator.language? navigator.language : > >>> navigator.userLanguage, > >>> chrome : /chrome/.test(navigator.userAgent.toLowerCase()) > >>> }; > > >>> function bindReady(){ > >>> if ( readyBound ) return; > >>> readyBound = true; > > >>> // Mozilla, Opera (see further below for it) and webkit > >>> nightlies currently support this event > >>> if ( document.addEventListener && !jQuery.browser.opera && ! > >>> jQuery.browser.safari && !jQuery.browser.chrome) > >>> // Use the handy event callback > >>> document.addEventListener( "DOMContentLoaded", > >>> jQuery.ready, false ); > > >>> // If IE is used and is not in a frame > >>> // Continually check to see if the document is ready > >>> if ( jQuery.browser.msie && window == top ) (function(){ > >>> if (jQuery.isReady) return; > >>> try { > >>> // If IE is used, use the trick by Diego > >>> Perini > >>> //http://javascript.nwbox.com/ > >>> IEContentLoaded/ > >>> document.documentElement.doScroll("left"); > >>> } catch( error ) { > >>> setTimeout( arguments.callee, 0 ); > >>> return; > >>> } > >>> // and execute any waiting functions > >>> jQuery.ready(); > >>> })(); > > >>> if ( jQuery.browser.opera ) > >>> document.addEventListener( "DOMContentLoaded", > >>> function () { > >>> if (jQuery.isReady) return; > >>> for (var i = 0; i < > >>> document.styleSheets.length; i++) > >>> if > >>> (document.styleSheets[i].disabled) { > > >>> setTimeout( arguments.callee, 0 ); > >>> return; > >>> } > >>> // and execute any waiting functions > >>> jQuery.ready(); > >>> }, false); > > >>> if ( jQuery.browser.safari || jQuery.browser.chrome) { > >>> var numStyles; > >>> (function(){ > >>> if (jQuery.isReady) return; > >>> if ( document.readyState != "loaded" && > >>> document.readyState != "complete" ) { > >>> setTimeout( arguments.callee, 0 ); > >>> return; > >>> } > >>> if ( numStyles === undefined ) > >>> numStyles = jQuery("style, > >>> link[rel=stylesheet]").length; > >>> if ( document.styleSheets.length != > >>> numStyles ) { > >>> setTimeout( arguments.callee, 0 ); > >>> return; > >>> } > >>> // and execute any waiting functions > >>> jQuery.ready(); > >>> })(); > >>> } > > >>> // A fallback to window.onload, that will always work > >>> jQuery.event.add( window, "load", jQuery.ready ); > >>> } > > >>> Thank you in advance. > > >>> Votre correspondant a choisi Hotmail et profite d'un stockage > >>> quasiment illimité. Créez un compte Hotmail gratuitement ! --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en -~----------~----~----~----~------~----~------~--~---
