iwato Posted January 21, 2013 Share Posted January 21, 2013 Background: I have implemented the jQuery UI Overlay Tool and am seeking to customize the Apple effect. Although I have been able to obtain the desired display, I am unable to implement the close function properly. Online queries have shown that I am not the only one with this problem. Unfortunately, each case appears to be different, and none matches mine. I have tried resetting the configuration options of the Overlay tool itself, but to know avail. What confuses me even more is that I have been able to get the close function to work for one set of overlays, but not for another. The only difference for the two set ups is the size and shape of the displayed image. After much frustration I stumbled on the following passage: Due to a major bug in jQuery you should not load overlays with the Apple effect upon document.ready() event when using external stylesheets. This causes unpredictable behaviour in Safari 3+ and Chrome (WebKit-based browsers). There are two workarounds for handling this: Use $(window).load() instead. This will definitely be executed after the stylesheets have been loaded.Define your overlay style directly on the page or inline for the element.Question: How does one replace the $(function() {...}); script with the $(window).load() script? Roddy Link to comment Share on other sites More sharing options...
dsonesuk Posted January 21, 2013 Share Posted January 21, 2013 $(function(){ ...}); or $(document).ready(function(){...}); becomes $(window).load(function(){...}); Link to comment Share on other sites More sharing options...
iwato Posted January 22, 2013 Author Share Posted January 22, 2013 Thanks dsonesuk.Now that I understand how to transform the $(document).ready(function(){...}); syntax into the alternative $(window).load(function)(){...}); syntax, should I be concerned about its location in the HTML document in which it appears.Until now I have been placing the $(function(){...}); script at the bottom of my <body> tag. May I place the $(window).load(function)(){...}); script there as well? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 22, 2013 Share Posted January 22, 2013 Scripts that use these, run the code within them AFTER the page has fully loaded, and usually placed in the <head>...</head> of the page, scripts that do not use these are usually placed at the bottom, that's because elements that are referenced within the code have to be created first, these are created as the page loads from top to bottom, if the code WITHOUT onload(), ready() was placed in <head>..</head> the script would run before these elements had been created and throw up an 'undefined' error for each element id or class it tried to reference. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now