Jump to content

Custom Close Feature with JQuery UI Overlay Tool


iwato
 Share

Recommended Posts

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 :Pleased:
Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...