Jump to content
iwato

Custom Close Feature with JQuery UI Overlay Tool

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:

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...