| Container Release Notes |
| |
| *** version 2.6.0 *** |
| |
| Changes: |
| -------- |
| |
| + 1px rounded corners in Sam-Skin, added in 2.3.0, are no longer |
| rendered in IE6 or IE7. |
| |
| hasLayout and relative positioning applied |
| to the header, body and footer elements to achieve the 1px |
| rounded corners had functional side effects (such as the inability |
| to shrink-wrap auto width containers, and the creation of invalid |
| stacking contexts) |
| |
| 1px rounded corners can be re-applied with a CSS patch if required, |
| as discussed on the container documentation web page. |
| |
| + We now attempt to focus the first focusable element inside a Panel, |
| when it is shown (as is done with Dialog). |
| |
| + Setting the "height" configuration property will now result in the |
| container's body element being resized to fill out any empty |
| vertical space. This behavior can be configured using the |
| "autofillheight" configuration property discussed below. |
| |
| Added the following features: |
| ----------------------------- |
| |
| + Added a new "preventcontextoverlap" configuration property used |
| to manage whether or not an Overlay instance should overlap its |
| context element (defined using the "context" configuration property) |
| when the "constraintoviewport" configuration property is set |
| to "true". |
| |
| + Added ability to specify event triggers when using the "context" |
| configuration property. The container wil re-align itself with |
| the context element in response to these trigger events. |
| |
| See context configuration property documentation for usage details. |
| |
| + Added "autofillheight" configuration property, which is set to "body" |
| by default. This configuration property can be used to specify which |
| of the 3 container element - "header", "body", "footer" should be |
| resized to fill out any remaining vertical space when the container's |
| "height" configuration property is set. |
| |
| The property can be set to false/null to disable the feature if |
| desired. |
| |
| + Panel now supports focusFirst and focusLast methods, as |
| well as tab, shift-tab looping when modal (similar to Dialog). |
| |
| Fixed the following bugs: |
| ------------------------- |
| |
| + Fixed issue with tooltip iframe remaining visible in situations |
| where the page was scrolled down. |
| |
| + Fixed OverlayManager.find to return null, if the Overlay cannot |
| be found. |
| |
| + OverlayManager no longer overwrites focus or blur methods on the |
| registered container, if they already exist (e.g. for Menu). Instead |
| it registers focus/blur event listeners to maintain OverlayManager |
| state in such situations. |
| |
| + Panels/Dialogs without a fixed width specified (auto width containers) |
| now shrink-wrap correctly in IE6, IE7 (see 1px rounded corner discussion |
| above) |
| |
| + Added text to the close icon, to enhance accessibility for screen |
| readers. Also changed the close icon element from a span, to an anchor |
| to facilate keyboard tab access. |
| |
| + Added title to text resize monitor iframe, to assist screen readers. |
| |
| + Fixed modal mask resizing when going from a larger to a smaller window |
| size. |
| |
| + hideMaskEvent is now fired after all modal mask relatd state changes |
| (including changes to the document.body) have taken place. |
| |
| Originally it was fired before removing the "masked" class from |
| document.body. |
| |
| + Fixed Sam Skin look/feel for default Dialog buttons. Originally |
| disabled default buttons looked the same as enabled default buttons. |
| |
| + Fixed asynchronous Dialog submission failure for cases where the form |
| contained elements named "action" or "method". |
| |
| + Fixed Dialog button focus methods when using YUI Buttons. |
| |
| + Modal Dialogs buttons are now included in the tab, shift-tab flow. |
| Originally buttons in Modal dialogs were unreachable when tabbing. |
| |
| + Individual focus handlers attached to all non-container focusable |
| elements (used to enforce modality), resulted in poor performance |
| when showing/hiding modal Panels, especially in IE, on pages with |
| a large number of focusable elements. |
| |
| Instead of individual listeners, Panel now registers a single |
| focus listener on the document to enforce modality, improving |
| performance and scalability for modal solutions. |
| |
| + Files for optional component dependencies (e.g. animation, dragdrop, |
| connection) can now be included after container's js files, without |
| breaking related functionality. |
| |
| + Fixed Config to remove (null out) current entry from the |
| config queue, before invoking fireEvent for the entry, to |
| keep it from being re-added to the end of the queue if |
| listeners were to set a property which superceded the entry. |
| |
| *** version 2.5.2 *** |
| |
| + No change. |
| |
| *** version 2.5.1 *** |
| |
| Fixed the following bugs: |
| ------------------------- |
| |
| + Module.setBody, setHeader and setFooter methods now accept |
| DocumentFragments. This feature was implicitly available |
| in versions prior to 2.5.0 and is now officially supported. |
| |
| Changes: |
| -------- |
| |
| + Optimized addition of Modality focus handlers on masked |
| elements (which are used to enforce modality) and added |
| ability to disable feature, to avoid timeout script errors |
| in IE if your page contains a very large number of focusable |
| elements. |
| |
| Additionally changes to Event in 2.5.1 should allow |
| for increased scalability, when using Modal panels containing |
| large numbers of focusable elements on the page. |
| |
| Added a YAHOO.widget.Panel.FOCUSABLE property, defining |
| the set of elements which should have focus handlers applied |
| when covered by the Modal mask. |
| |
| If you wish to disable the addition of focus handlers to all |
| focusable elements on the page when a Modal Panel is displayed, |
| the property can be set to an empty array: |
| |
| YAHOO.widget.Panel.FOCUSABLE = []; |
| |
| NOTE: This will mean that elements under mask may still be |
| accessible using the keyboard, however the mask will still |
| prevent mouse access to elements. |
| |
| *** version 2.5.0 *** |
| |
| Fixed the following bugs: |
| ------------------------- |
| |
| + We now add the text resize monitor iframe to the DOM in a timeout, |
| to help alleviate the perpetual loading indicator seen in |
| Firefox 2.0.0.8 (Gecko 1.8.1.8) and above on Windows. |
| |
| + Changed the closing script tag string used in the resize monitor, to |
| allow container-min.js, container_core-min.js content to be used inline. |
| |
| + Fixed problem with underlay size being too short in IE6 when setting up |
| an initially visible Dialog with buttons. |
| |
| + Removed overflow:auto applied to the modal mask for all browsers other |
| than gecko/MacOS to help avoid the "missing text cursor" Gecko bug. |
| Overflow:auto is still applied to for Gecko/MacOS to help avoid |
| scrollbar bleedthrough, another Gecko bug (discussed in Container's |
| known issues section). |
| |
| Added the following features: |
| ----------------------------- |
| |
| + Added a "hideaftersubmit" config property to Dialog, to allow the end |
| user to configure whether or not the Dialog should be hidden after |
| it has been submitted. By default it is set to false, to provide |
| backwards compatibility. |
| |
| + Added contextMouseOverEvent, contextMouseOutEvent and |
| contextTriggerEvent events to Tooltip, which provide access to the |
| context element when the user mouses over a context element, mouses |
| out of a context element, and before a tooltip is about to be |
| triggered (displayed) for a context element. See the API docs for |
| these events for futher details. |
| |
| + Added a "disabled" config property to Tooltip, to allow the user |
| to dynamically disable a tooltip. |
| |
| Changes: |
| -------- |
| |
| + Optimized constraintoviewport handling for Overlays which haven't |
| been specifically positioned, so that the constraint checks aren't |
| made before every show. |
| |
| *** version 2.4.0 *** |
| |
| Fixed the following bugs: |
| ------------------------- |
| |
| + constraintoviewport and fixedcenter now handle Overlays which are |
| larger than the viewport. The Overlay will be positioned such that |
| it's top, left corner is in the viewport. Panel's draggable |
| behavior now also honors constraintoviewport, if the panel is |
| larger than the viewport. |
| |
| + constrainToViewport will now correctly constrain Overlays which |
| haven't been specifically positioned (don't have an XY value set). |
| |
| + Overlay/OverlayManager bringToTop methods will bring Overlays to |
| the top of the stack, even if their current zindex is the same as |
| other Overlays on the page. |
| |
| + Fixed double textResizeEvents fired on gecko based browsers (e.g |
| Firefox 2.x). |
| |
| + Panel underlay now resizes correctly in Safari 2.x, when the |
| content of the Panel is modified (e.g. when setBody() is called). |
| |
| + Tooltip "text" configuration property is no longer overridden by |
| the "title" attribute value on the context element if both are |
| set. The "text" configuration property takes precedence |
| (as indicated in the Tooltip documentation). |
| |
| + Transparent shadows no longer become opaque (black) in IE6/IE7 |
| when a Panel with ContainerEffect.FADE is hidden and then |
| shown again. Also on IE6/IE7 transparent shadows no longer |
| appear opaque while animation is in progress. |
| |
| + An empty header is no longer created for non-draggable |
| Dialogs/SimpleDialogs which don't provide their own headers. |
| By design, an empty header is still created for draggable |
| Dialogs/SimpleDialogs which don't provide a header, in order |
| to provide a drag handle. |
| |
| + Select boxes inside Modal Panels on IE6 are no longer hidden. |
| |
| + In Sam Skin, Dialog/SimpleDialog default and non-default HTML |
| buttons (used when YUI Button is not included on the page) now |
| have a consistent look. Previously style properties intended |
| for default YUI Buttons, were being incorrectly applied to |
| default HTML buttons, giving them a look inconsistent with |
| non-default buttons. |
| |
| Added the following features: |
| ----------------------------- |
| |
| + Added "dragOnly" configuration property to Panel, to leverage |
| the "dragOnly" configuration property added to the DragDrop |
| utility for 2.4.0. |
| |
| When the "dragOnly" configuration property is set to true, |
| the DD instance created for the Panel will not check for drop |
| targets on the page, improving performance during drag operations |
| which don't require drop target interaction. |
| |
| The property is set to "false" by default to maintain backwards |
| compatibility with older 2.x releases, but should be set to "true" |
| if no drop targets for the Panel exist on the page. |
| |
| See the DragDrop utilities 2.4.0 README for additional information. |
| |
| *** version 2.3.1 *** |
| |
| Fixed the following bugs: |
| ------------------------- |
| |
| + To help reduce the occurrence of "Operation Aborted" errors in IE, |
| containers which are rendered to the document's BODY element (e.g. |
| myOverlay.render(document.body)) are now inserted before the first |
| child of the BODY element. This applies to both the container |
| element as well as the iframe shim if enabled. |
| |
| Prior to 2.3.1, these two elements were appended as the last |
| children of the BODY element. |
| |
| When rendering to any other element on the page, the behavior is |
| unchanged and both the container and shim are appended as the last |
| children of the element. |
| |
| Upgrade Impact For Containers Rendered To Document.Body |
| ------------------------------------------------------- |
| If you have an xy coordinate and non-zero z-index specified for |
| your container there should be no negative impact. |
| |
| If you haven't specified an xy position, the fix could result |
| in a shift in your container position, depending on other elements |
| on the page. |
| |
| If you haven't specified a z-index and are relying on DOM order to |
| stack the container, you may see a change in stacking order of |
| the container or iframe shim. |
| |
| Both these changes can be resolved by setting a specific z-index |
| and position based on the layout of other elements on your page. |
| |
| If you do need to revert to 2.3.0 behavior, a configuration property |
| "appendtodocumentbody" has been added to Module, which can be set to |
| true. |
| |
| The change to stacking order is discussed in detail below in |
| relation to other z-index fixes made for 2.3.1. |
| |
| + Z-index is now applied correctly for Overlay/Panel elements, their |
| corresponding iframe shims, and modal masks (for Panels). |
| This fix applies to both the default z-index based on the CSS |
| for the Overlay/Panel and specific z-indices set using the |
| "zindex" configuration parameter. |
| |
| Default z-index values are: |
| |
| Overlay/Panel element: 2 |
| Iframe shim: 1 |
| Mask: 1 |
| |
| The iframe shim and modal mask z-index will always be set to one less |
| than the Overlay/Panel z-index. |
| |
| PLEASE NOTE: |
| |
| As a result of the fix to reduce "Operation Aborted" errors, |
| setting a z-index of 1 on an Overlay/Panel rendered to document.body |
| will result in its iframe shim and modal mask (which will have a |
| z-index of 0) being rendered behind other positioned elements in the |
| document. |
| |
| This is because the Overlay/Panel, iframe shim and mask are |
| inserted as the first children of the BODY element and hence any |
| positioned elements with a z-index of 0 or auto which occur after |
| them in the document will be stacked on top of them as per W3C spec. |
| |
| If you need to keep the Overlay/Panel above positioned elements on your |
| page, it's z-index needs to be set to 2 or more. |
| |
| In general it's advisable to manage the z-index of positioned elements |
| on your page deliberately by setting a z-index, to avoid having their |
| order in the document define their stacking order. |
| |
| For detailed stacking order information see: |
| - http://www.w3.org/TR/CSS21/visuren.html#layers |
| - http://developer.mozilla.org/en/docs/Understanding_CSS_z-index:The_st |
| acking_context |
| |
| + Module now correctly recognizes standard module header, body and footer |
| DIVs when they have extra CSS classes applied in addition to the |
| required hd, bd, and ft classes. e.g. <div class="bd news"></div>. |
| |
| + An empty header (set to $#160;) is created for draggable Panels which |
| don't have a header specified, to provide a drag handle. This fixes a |
| regression introduced in 2.3.0 so that 2.2.2 behavior is restored. |
| |
| + Dialog.destroy has been fixed to account for Dialog form elements which |
| may not be direct children of the standard module body ("bd") element. |
| |
| + SimpleDialog.destory now completes successfully if the optional |
| button-beta.js dependancy is not included on the page. |
| |
| + Destroying Overlays registered with the OverlayManager no longer results in a |
| JavaScript error. The Overlay is destroyed and removed from the |
| OverlayManager correctly. |
| |
| + Submitting a Dialog form directly (e.g. using a "submit" button, hitting |
| enter on a single text field form) no longer throws a JavaScript error. |
| |
| Known Issues |
| ------------ |
| |
| + IE: Borders for tables with border-collapse:collapse remain visible |
| ------------------------------------------------------------------- |
| If an Overlay, or any of its subclasses, contains a table with its |
| border-collapse CSS property set to "collapse" instead of the default |
| value of "separate", the borders of the table will remain visible, when |
| the Overlay is configured to be hidden initially. The table contents |
| will be hidden correctly. |
| |
| This is due to an IE bug, reproducible by the basic test case below: |
| |
| <style type="text/css"> |
| .box {visibility:hidden;} |
| td {border:1px solid red;} |
| table {border-collapse:collapse;} |
| </style> |
| |
| <div class="box"> |
| <table> |
| <tr> |
| <td>1</td> |
| <td>2</td> |
| </tr> |
| </table> |
| </div> |
| |
| Setting the DIV elements "style.visibility" JS property fixes the |
| problem with the simple test case. NOTE: Setting the style in markup |
| using the DIV's style attribute does not. |
| |
| Extending this to Container, the simplest workaround if you're not |
| using effects, is to use Overlay's hide() method to setup visibility. |
| This will set the Overlay's element "style.visibility" property. e.g. |
| |
| // Start visible, then hide. |
| var ovr = YAHOO.widget.Overlay("ovr"); |
| ovr.render(); |
| ovr.hide(); |
| |
| You can also apply this workaround if you want to use effects by |
| setting the effect up after you hide. e.g. |
| |
| // Start visible, but don't apply effects, |
| // to avoid initial animation. |
| var ovr = YAHOO.widget.Overlay("ovr"); |
| ovr.render(); |
| ovr.hide(); |
| ovr.cfg.setProperty("effect", {effect:.....}); |
| |
| If initial flicker is a problem with the above, you can set the |
| visibility directly on the Overlay element after rendering e.g. |
| |
| var ovr = YAHOO.widget.Overlay("ovr", {visible:false}); |
| ovr.render(); |
| YAHOO.util.Dom.setStyle(ovr.element, "visibility", "hidden"); |
| |
| but if possible one of the previous methods should be used since |
| they use the public API as opposed to manipulating the DOM directly. |
| |
| *** version 2.3.0 *** |
| |
| Fixed the following bugs: |
| ------------------------- |
| |
| + Improved creation of the <iframe> element used to monitor changes to the |
| browser's font size so that: |
| |
| - Safari's status bar no longer displays a "Loading..." message after the |
| page has loaded. |
| |
| - Firefox no longer reports duplicate cookie information. |
| |
| - The browser scrollbars no longer flash on and off in Firefox. |
| |
| + It is now possible to set the "button" configuration property of a |
| YAHOO.widget.Dialog instance after it has be rendered. |
| |
| + Form elements appended to a YAHOO.widget.Dialog instance via the "setBody" |
| method are now automatically registered using the "registerForm" method. |
| |
| + The "focusFirst" method of YAHOO.widget.Dialog will no longer result in a |
| JavaScript error in IE if the first element in the Dialog instance's form |
| is a radio button. |
| |
| + YAHOO.widget.Panel instances whose "draggable" property is set to "true" and |
| "width" property is set to "auto" are now able to be dragged in IE 6 (Quirks |
| and Strict Mode) and IE 7 Quirks Mode. |
| |
| + Updated focus methods of YAHOO.widget.Dialog to prevent JavaScript errors |
| that result from trying to set focus to elements that hidden or disabled. |
| |
| + Pressing the enter key will no longer result in a YAHOO.widget.Dialog |
| instance's "validate" method being called twice. |
| |
| + Pressing the enter key while focused on a form field inside a Dialog will no |
| longer trigger the "click" event handler defined by the Dialog's default |
| button in IE and Firefox. |
| |
| + Pressing the enter key when focused on a form field inside a |
| YAHOO.widget.Dialog instance with no buttons created via its "buttons" |
| configuration property will no longer result in a JavaScript error. |
| |
| + Aqua scrollbars will no longer bleed through Container widgets in Firefox |
| for Mac OS X. |
| |
| + The "width" and "height" configuration properties of YAHOO.widget.Overlay |
| now supersede the "fixedcenter" and "context" configuration properties to |
| ensure correct positioning of Overlay instances using the "fixedcenter" |
| and "context" configuration properties. |
| |
| + Calling the "destroy" method on a YAHOO.widget.Overlay instance no longer |
| results in a JavaScript error on the subsequent focus of another |
| Overlay instance. |
| |
| + YAHOO.widget.Tooltip instances without a value specified for the "width" |
| configuration property will be rendered at a width equal to the offsetWidth |
| of their root <DIV/> element to prevent their width from being clipped or |
| constrained by their parent HTML element. |
| |
| |
| Changes: |
| -------- |
| |
| + Rendering of YAHOO.widget.Tooltip instances is now deferred using the |
| "onDOMReady" event handler of YAHOO.util.Event rather than waiting until |
| the "load" event of the Tooltip's parent window fires. |
| |
| + Deprecated "browser" property of YAHOO.widget.Module in favor |
| of YAHOO.env.ua. |
| |
| + The "moveEvent" of a YAHOO.widget.Panel instance now also fires with the |
| "endDrag" event of the its YAHOO.util.DD instance. |
| |
| + Updated modal functionality of YAHOO.widget.Panel: |
| |
| - The creation of a Panel instance's modality mask is now deferred until it |
| is initially made visible. |
| |
| - Showing a modal Panel instance will now result in the Panel and its |
| associated modality mask element having a higher z-index than all other |
| YAHOO.widget.Overlay instances and Overlay subclasses. |
| |
| + Updated the "underlay" configuration property of YAHOO.widget.Panel: |
| |
| - The creation of the underlay element is deferred until the Panel |
| instance is initially made visible. |
| |
| - For Gecko-based browsers on Mac OS X the underlay elment is always |
| created as it is used as a shim to prevent Aqua scrollbars below a Panel |
| instance from poking through it. |
| |
| - For IE 7 (Quirks Mode) and IE 6 (Quirks Mode and Standard Mode) the |
| underlay element is resized in response to a change to a Panel instance's |
| "width" or "height" configuration properties, a change to the browser's |
| font size or the firing of the contentChangedEvent (triggered by use of |
| the "setHeader," "appendToHeader," "setBody," "appendToBody," |
| "setFooter," or "appendToFooter" methods). |
| |
| + Updated the "iframe" configuration property of YAHOO.widget.Overlay: |
| |
| - The creation of the <iframe> shim element is deferred until the Overlay |
| instance is initially made visible. |
| |
| - The <iframe> shim element is resized when a change to an Overlay |
| instance's content is made at runtime via the "setHeader," |
| "appendToHeader," "setBody," "appendToBody," "setFooter," or |
| "appendToFooter" methods. |
| |
| + Updated the "buttons" configuration property of YAHOO.widget.Dialog: |
| |
| - YAHOO.widget.Button is now an optional dependancy, and if included, each |
| button in a Dialog will be an instance of Button. |
| |
| - The "text" property of each button now accepts HTML |
| |
| - The "handler" property of each button can now be set to: |
| |
| + A reference to a function that should fire when the button is |
| clicked. (In this case scope of this function is always its |
| Dialog instance.) |
| |
| + An object literal representing the code to be executed when the |
| button is clicked. The format is: |
| { |
| fn: Function (The handler to call when the event fires.), |
| obj: Object (An object to pass back to the handler.), |
| scope: Object (The object to use for the scope of the handler.) |
| } |
| |
| |
| Added the following features: |
| ----------------------------- |
| |
| + Added ability for YAHOO.widget.Tooltip instances to have shadow: |
| |
| - The shadow for a Tooltip is implemented by appending a new element as the |
| last child of its root <DIV/> element: |
| |
| <DIV class="yui-tt"> |
| <DIV class="bd"> ... </DIV> |
| <DIV class="yui-tt-shadow"/> |
| </DIV> |
| |
| - The code that creates the shadow element resides inside the Tooltip's |
| public "onRender" prototype method. To disable the creation of a |
| Tooltip's shadow override the prototype of the "onRender" method: |
| |
| YAHOO.widget.Tooltip.prototype.onRender = function () {}; |
| |
| - The actual creation of the shadow element is deferred until the Tooltip |
| is made visible for the first time. |
| |
| - A Tooltip's shadow element can be styled via two CSS classes: |
| |
| + "yui-tt-shadow" - Applied to the shadow element when it is created. |
| + "yui-tt-shadow-visible" - Applied to the shadow element when the |
| Tooltip is visible; it is removed the Tooltip is hidden. |
| |
| - The shadow element is only styled when using the new "Sam" skin, for |
| the previous default skin its "display" property is set to "none." |
| |
| + Prototype of all classes (Module, Overlay, Panel, Dialog, SimpleDialog, |
| Tooltip, Config, and ContainerEffect) are augmented with |
| YAHOO.util.EventProvider, facilitating subscribing to an instance's |
| Custom Events by name via a "subscribe" method that is a direct member of |
| the class. For example: |
| |
| var oOverlay = new YAHOO.widget.Overlay("myoverlay"); |
| |
| oOverlay.subscribe("show", onShow); |
| |
| + Added a new "bringToTop" method to YAHOO.widget.Overlay that places the |
| Overlay on top of all other Overlay instances. |
| |
| + Added a new "bringToTop" method to YAHOO.widget.OverlayManager that places |
| the specified Overlay instance on top of all other Overlay instances. This |
| method is called on each Overlay instance that is registered with an |
| OverlayManager instance. |
| |
| + Dialog instances are now able to upload files should the Dialog instance's |
| form contain <input type="file"/> elements. PLEASE NOTE: If a Dialog |
| instance will be handling asyncronous file uploads, its "callback" property |
| will need to be setup with an "upload" handler rather than the standard |
| "success" and, or "failure" handlers. For more information, see the |
| Connection Manager documenation on file uploads: |
| http://developer.yahoo.com/yui/connection/#file |
| |
| + Added a new "getButtons" method to YAHOO.widget.Dialog that returns an array |
| containing each of the Dialog's buttons; by default an array of HTML <BUTTON> |
| elements. If the Dialog's buttons were created using the |
| YAHOO.widget.Button class (via the inclusion of the optional Button |
| dependancy on the page), an array of YAHOO.widget.Button instances |
| is returned. |
| |
| + Added a "destroy" method to YAHOO.util.Config that sets all properties to |
| null, unsubscribes all listeners from each property's change event and all |
| listeners from the configChangedEvent. The "destroy" method of |
| YAHOO.widget.Module now automatically calls the "destroy" method of its |
| configuation object. |
| |
| + Added a "IFRAME_OFFSET" constant to YAHOO.widget.Overlay that controls how |
| much the <iframe> shim should be offset from each side of an |
| Overlay instance. |
| |
| + Added a new "syncIframe" method to YAHOO.widget.Overlay that syncronizes the |
| size and position of the <iframe> shim to that of the Overlay. |
| |
| + Added a "ICON_CSS_CLASSNAME" constant to YAHOO.widget.SimpleDialog that |
| represents the name of the CSS class applied to the element created by the |
| "icon" configuration property. |
| |
| |
| Known Issues |
| ------------ |
| |
| + "Sam" skin Panel missing left and right borders when declared with a height |
| --------------------------------------------------------------------------- |
| If the height of a Panel instance exceeds the total height of its header, |
| body and footer elements, the space not filled with content will lack a left |
| and right border. Therefore, to set a Panel instance to a fixed height |
| when using the "Sam" skin, apply the desired height to the body element, |
| taking into account the height of the header and footer elements. To set the |
| height of a Panel instance's body via CSS: |
| |
| #mypanel .bd { |
| height: 100px; |
| } |
| |
| Or via JavaScript: |
| |
| oMyPanel.body.style.height = "100px"; |
| |
| + Elements with scrollbars poke through Overlay instances floating above them |
| --------------------------------------------------------------------------- |
| There is a bug in Gecko-based browsers for Mac OS X where an element's |
| scrollbars will poke through absolutely positioned elements floating above |
| them. To fix this problem the "overflow" property of an Overlay instance's |
| root element is toggled between "hidden" and "auto" (through the application |
| and removal of the "hide-scrollbars" and "show-scrollbars" CSS classes) as its |
| "visibility" configuration property is toggled between "false" and "true." |
| |
| PLEASE NOTE: |
| |
| 1) The "hide-scrollbars" and "show-scrollbars" CSS classes classes are |
| applied only for Gecko on Mac OS X and are added/removed to/from the |
| Overlay's root HTML element (DIV) via the "hideMacGeckoScrollbars" and |
| "showMacGeckoScrollbars" methods of YAHOO.widget.Overlay. |
| |
| 2) For Panel (and its subclasses) it is the underlay element, not the root |
| element, whose "overflow" property is toggled between "hidden" and "auto." |
| The underlay element therefore acts as a shim to correct the |
| scrollbar problem. |
| |
| 3) For Tooltip instances using the "Sam" skin it is the shadow element, not |
| the root element, whose "overflow" property is toggled between "hidden" |
| and "auto." The shadow element therefore acts as a shim to correct the |
| scrollbar problem. |
| |
| 4) Once the fix is applied the bug will reappear if the window loses focus. |
| This can be remedied via Javascript by hiding and showing the Overlay |
| instance when the window receives focus: |
| |
| YAHOO.util.Event.on(window, "focus", function () { |
| |
| oMyOverlay.hide(); |
| oMyOverlay.show(); |
| |
| }); |
| |
| ** For more information see |
| https://bugzilla.mozilla.org/show_bug.cgi?id=187435 |
| |
| + Scrollbars remain visible after an Overlay is hidden |
| ---------------------------------------------------- |
| There is a bug in Gecko-based browsers for Mac OS X where an element's |
| scrollbars and the scrollbars of its child nodes remain visible when its |
| "visibility" property property is set to "hidden." To fix this problem, |
| the "overflow" property of an Overlay instance's root element and child nodes |
| is toggled between "hidden" and "auto" (through the application and removal |
| of the "hide-scrollbars" and "show-scrollbars" CSS classes) as its |
| "visibility" configuration property is toggled between "false" and "true." |
| |
| PLEASE NOTE: |
| |
| 1) The "hide-scrollbars" and "show-scrollbars" CSS classes classes are |
| applied only for Gecko on Mac OS X and are added/removed to/from the |
| Overlay's root HTML element (DIV) via the "hideMacGeckoScrollbars" and |
| "showMacGeckoScrollbars" methods of YAHOO.widget.Overlay. |
| |
| 2) There may be instances where the CSS for a web page or application |
| contains style rules whose specificity override the rules implemented by |
| the Container CSS files to fix this bug. In such cases, is necessary to |
| leverage the provided "hide-scrollbars" and "show-scrollbars" classes to |
| write custom style rules to guard against this bug. For example: |
| |
| To fix the scrollbars issue for an Overlay instance with an id of |
| "myoverlay" whose body element has scrollbars applied by default: |
| |
| #myoverlay .bd { |
| |
| height: 100px; |
| |
| /* Apply scrollbars for all browsers. */ |
| overflow: auto; |
| |
| } |
| |
| #myoverlay.hide-scrollbars .bd { |
| |
| /* Hide scrollbars by default for Gecko on OS X */ |
| overflow: hidden; |
| |
| } |
| |
| #myoverlay.show-scrollbars .bd { |
| |
| /* Show scrollbars for Gecko on OS X when the Overlay is visible */ |
| overflow: auto; |
| |
| } |
| |
| To fix the scrollbars issue for a Panel instance with an id of "mypanel" |
| whose body element has scrollbars applied by default: |
| |
| #mypanel .bd { |
| |
| height: 100px; |
| |
| /* Apply scrollbars for all browsers. */ |
| overflow: auto; |
| |
| } |
| |
| .yui-panel-container.hide-scrollbars #mypanel .bd { |
| |
| /* Hide scrollbars by default for Gecko on OS X */ |
| overflow: hidden; |
| |
| } |
| |
| .yui-panel-container.show-scrollbars #mypanel .bd { |
| |
| /* Show scrollbars for Gecko on OS X when the Panel is visible */ |
| overflow: auto; |
| |
| } |
| |
| ** For more information see |
| https://bugzilla.mozilla.org/show_bug.cgi?id=187435 |
| |
| + Flash Movies appear on top of Overlay instances |
| ----------------------------------------------- |
| Flash movies can appear on top of Overlay instances in IE and Gecko-based |
| browsers. To fix this problem, set the "wmode" of the Flash movie to either |
| "transparent" or "opaque" as indicated below: |
| |
| Via the <object> tag: |
| |
| <object> |
| <param name="wmode" value="opaque"> |
| </object> |
| |
| <object> |
| <param name="wmode" value="transparent"> |
| </object> |
| |
| Via the <embed> tag: |
| |
| <embed wmode="transparent"> ... </embed> |
| <embed wmode="opaque"> ... </embed> |
| |
| ** For more information see |
| http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523 |
| |
| + Overlay instances not rendered at correct z-index in IE |
| ------------------------------------------------------- |
| In IE, when an Overlay instance is rendered inside a relatively positioned |
| element the z-index of the Overlay instance is now relative to its |
| relatively positioned parent element. This is not a bug in the |
| Overlay class, but rather a bug in IE where relatively positioned elements |
| establish a new stacking context for their child nodes. To avoid this |
| bug it is recommend that all Overlay instances that need to be able to float |
| above any other element in the document be made direct descendants of the |
| <body> element. |
| |
| ** For more information see |
| http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html |
| |
| + Header elements for Panel instances using "Sam" skin shrinkwrap in IE 7 |
| ----------------------------------------------------------------------- |
| In IE 7 (Standards Mode) if a Panel instance is created without specifying a |
| value for the "width" configuration property the width of the Panel's |
| header element will shrinkwrap to the width of its text node. To avoid |
| triggering this bug in IE always specify a value for the "width" |
| configuration property when using Panel. |
| |
| + Panel instances render at 100% of the browser viewport |
| ------------------------------------------------------ |
| In IE 7 (Quirks Mode) and IE 6 (Quirks Mode and Standards Mode) if any of the |
| child nodes of a Panel instance's root element have "layout" |
| (http://msdn2.microsoft.com/en-us/library/ms533776.aspx) and no value |
| has been specified for the "width" configuration property, the Panel will |
| render at 100% of the width of browser's viewport. This bug will manifest |
| when using the "Sam" skin as layout is applied to the header, body and |
| footer elements (by setting the CSS "zoom" property of the element to "1" ) |
| in order to get the negative margins required for the rounded corners to |
| render correctly. To avoid triggering this bug in IE always specify a value |
| for the "width" configuration property when using Panel. |
| |
| + Panel instances render at 2px wider when using "Sam" skin |
| --------------------------------------------------------- |
| For the "Sam" skin a Panel instance's rounded corners are created via the |
| application of negative 1px left and right margins on the header, body and |
| footer elements. These negative margins will cause a Panel instance to be |
| rendered at 2px wider than the value specified by the "width" configuration |
| property. Therefore, when using the "Sam" skin consider the negative left |
| and right margins and subtract 2 from the value passed to the "width" |
| configuration property in order to have the Panel render at the desired |
| width. For example, to render a Panel 300px wide, pass a value of "298px" |
| to the "width" configuration property. |
| |
| |
| *** version 2.2.2 *** |
| |
| + Clicking the close button of a Panel (or any instance of a Panel subclass) |
| registered with an OverlayManager will no longer result in the Panel |
| receiving focus. |
| |
| + Overlay instances registered with an OverlayManager will now correctly |
| blur themselves when hidden. |
| |
| + Calling the "destroy" method of an Overlay instance will now result in it |
| being removed from its OverlayManager instance(s). |
| |
| + The DOM event listener for the event defined by the "focusevent" |
| configuration property of an OverlayManager instance is now removed from each |
| Overlay instance when it is removed from its OverlayManager. |
| |
| + All subscribers for an Overlay instance's "focus" and "blur" events are |
| now unsubscribed when it is removed from its OverlayManager. |
| |
| |
| *** version 2.2.1 *** |
| |
| + Made the default scope for all Custom Events published by Module, Overlay, |
| Panel, Tooltip, Dialog and SimpleDialog the widget instance. Previously the |
| default scope for Custom Events was inconsistent across classes; the default |
| scope for Custom Events published by Overlay was always the Overlay instance |
| whereas the Custom Events published by all of the other classes had no |
| default scope. |
| |
| + Added default scope for CustomEvents published by YAHOO.util.Config: |
| - Default scope for the "configChangedEvent" is now the Config instance. |
| - Default scope for Config property events is now the Config's owner (widget). |
| |
| + Panel and Tooltip now always convert the value of a DOM element's "tagName" |
| property to uppercase before evaluating it. This improves |
| XHTML compatibility. |
| |
| + Pressing the enter key while focused on a form field inside a Dialog will |
| now trigger the "click" event handler defined by the Dialog's default |
| button in IE and Firefox. Previously, this behavior only worked in Safari |
| and Opera. |
| |
| + Added a "yui" prefix to the default CSS class name for Module to be |
| consistent with the other Container family widgets. |
| |
| + Container/Panel's underlay shadow is now defined as partially-transparent |
| black rather than gray. This prevents the shadow from lightening the |
| background color of elements beneath it. |
| |
| + Fixed memory leaks in Panel and Dialog. |
| |
| + The Drag and Drop library is now a truly optional dependency for Panel and its |
| subclasses. |
| |
| + Panel "focus" and "blur" events are now fired when Panels are focused and |
| blurred via the "focus" and "blurAll" methods of YAHOO.widget.OverlayManager. |
| |
| + Panel instances rendered without setting the value for the "width" |
| configuration property will now have their "width" configuration |
| property set to the value of the Panel's element's "offsetWidth" property |
| when rendered. This fixes an issue in IE 6 and 7 where Panels that are |
| rendered without setting the "width" configuration property will only be |
| draggable by mousing down on the text inside the header, rather than anywhere |
| inside the header. |
| |
| + Refactored the Container family including the Config class to improve |
| performance, especially when working with a large number of instances in IE6. |
| |
| |
| |
| *** version 2.2.0 *** |
| |
| Module |
| - Removed hardcoded file paths for image roots. Affected properties |
| include: |
| - YAHOO.widget.Module.IMG_ROOT |
| - YAHOO.widget.Module.IMG_ROOT_SSL |
| - HTML elements, created via createElement, now use lowercase. |
| |
| Panel |
| - To shield against CSS class collision, the following references now |
| have a "yui-" prefix: |
| - YAHOO.widget.Panel.CSS_PANEL now references CSS class "yui- |
| panel". |
| - YAHOO.widget.Panel.CSS_PANEL_CONTAINER now references CSS class |
| "yui-panel-container". |
| - Close button can now be configured via the CSS class "container- |
| close". |
| - HTML elements, created via createElement, now use lowercase. |
| |
| Dialog |
| - To shield against CSS class collision, the following references now |
| have a "yui-" prefix: |
| - YAHOO.widget.Dialog.CSS_DIALOG now references CSS class "yui- |
| dialog". |
| - HTML elements, created via createElement, now use lowercase. |
| |
| SimpleDialog |
| - Removed hardcoded file paths for SimpleDialog icons, which are now |
| configurable in CSS: |
| - YAHOO.widget.SimpleDialog.ICON_BLOCK now references CSS class |
| "blckicon". |
| - YAHOO.widget.SimpleDialog.ICON_ALARM now references CSS class |
| "alrticon". |
| - YAHOO.widget.SimpleDialog.ICON_HELP now references CSS class |
| "hlpicon". |
| - YAHOO.widget.SimpleDialog.ICON_INFO now references CSS class |
| "infoicon". |
| - YAHOO.widget.SimpleDialog.ICON_WARN now references CSS class |
| "warnicon". |
| - YAHOO.widget.SimpleDialog.ICON_TIP now references CSS class |
| "tipicon". |
| - To provide shield against CSS class collision the following |
| references now have a "yui-" prefix: |
| - YAHOO.widget.SimpleDialog.CSS_SIMPLEDIALOG now references CSS |
| class "yui-simple-dialog"; |
| |
| Tooltip |
| - To shield against CSS class collision, the following references now |
| have a "yui-" prefix: |
| - YAHOO.widget.Tooltip.CSS_TOOLTIP now references CSS class "yui- |
| tipicon" "yui-tt"; |
| |
| *** version 0.12.2 *** |
| |
| Module |
| - Corrected issue where listener was not properly removed from resize |
| monitor element when "monitorresize" is disabled |
| |
| Panel |
| - Fixed issue that would sometimes prevent select lists from working |
| properly in Firefox |
| |
| Dialog |
| - Fixed error that would occur when trying to create a Dialog where |
| the first form element is set to "disabled" |
| - Modified "close" property handler for Dialog/SimpleDialog to call |
| "cancel" instead of "hide" |
| |
| *** version 0.12.1 *** |
| |
| All Classes |
| - "monitorresize" property now functions in situations where |
| document.domain has been modified. |
| - YAHOO.widget.Module.textResizeEvent now fires when the font size is |
| changed (except for Opera, which uses "zoom" functionality that |
| prevents this) |
| - Event listeners attached to container elements are now properly |
| purged on destroy using YAHOO.util.Event.purgeElement |
| |
| Panel |
| - Fixed issue where focus events were broken on the page when a modal |
| Panel was created |
| |
| Dialog |
| - Fixed bug where hitting "enter" on a Dialog was forcing the default |
| submission behavior of the form's action to execute |
| - Dialog no longer tries to give focus to hidden form elements. |
| - Replaced references in Panel with   for XHTML |
| compliance. |
| - Fixed issue that was preventing Safari from successfully using the |
| getData() function |
| |
| *** version 0.12 *** |
| |
| All Classes |
| - New documentation format implemented, and removed unnecessary |
| prototype null references previously used for generating |
| documentation |
| |
| Config |
| - Added 'undefined' check when reading initial properties for |
| .reset() |
| - Fixed Firefox warning on .resetProperty() |
| - Fixed issue preventing resetProperty() from resetting values |
| correctly |
| |
| Module |
| - Removed unused "childNodesInDom" property |
| |
| Overlay |
| - Converted center() to use Dom utility |
| - Fixed configVisible() to properly detect actual visible/hidden |
| status in Internet Explorer, which reports "inherit" for all elements |
| by default. |
| - Updated onDomResize to properly reapply "context" property |
| - Unified scroll/resize handlers so that they fire properly (when the |
| event has completed) as opposed to constantly (as seen in Mozilla- |
| based browsers) |
| |
| Panel |
| - Modified modality mask to show before Panel is shown (prior to any |
| animation) |
| - Modified buildWrapper to eliminate cloning of the initial markup |
| module, which fixes issues with select options not maintaining their |
| default selections in IE |
| - Modality mask is now z-indexed properly so that the mask z-index is |
| always one less than the Panel z-index |
| |
| Dialog |
| - Fixed Connection to get "action" attribute using getAttribute, to |
| allow for form fields named "action" |
| - Added support for "GET" by retrieving the form "method" rather than |
| always defaulting to "POST" |
| |
| KeyListener |
| - Fixed to work properly with Safari 2.0 by matching against keyCode |
| or charCode |
| |
| *** version 0.11.4 *** |
| |
| - Panel: Modality mask is now properly removed from DOM on Panel |
| destroy. |
| |
| *** version 0.11.3 *** |
| |
| - Module: Fixed SSL warning issue in IE |
| - Overlay: Fixed memory leak related to iframe shim in IE |
| - Panel: No focusable elements under the mask can now be tabbed to |
| - Panel: Set Panel container overflow to hidden to fix scrolling issue |
| in Opera 9 |
| |
| *** version 0.11.2 *** |
| |
| - All: JsLint optimization |
| - Overlay: Fixed SSL issues with monitorresize property |
| - OverlayManager: Fixed z-index incrementing issues |
| - Dialog: Form elements called "name" will now function properly |
| - Dialog: Removed unnecessary scope:this reference |
| |
| *** version 0.11.1 *** |
| |
| - Tooltip: Removed incorrect logger statement |
| - Dialog: Corrected logic that was causing browser lockup in IE for |
| SimpleDialog |
| - Dialog: Fixed "firstButtom" typo |
| |
| *** version 0.11.0 *** |
| |
| - toString function added to all classes for easy logging |
| - YAHOO.extend is now being used for inheritance on all container |
| classes |
| - Module: monitorresize feature now works on all browsers |
| - Module: Fixed bug with image root and isSecure |
| - Overlay: Fixed bugs related to IFRAME shim positioning |
| - Overlay: center() now works in quirks mode |
| - Overlay: Overlay now has a custom destroy() method that also removes |
| the IFRAME shim |
| - OverlayManager: Fixed bug in the prototype that was preventing |
| multiple Managers on one page |
| - OverlayManager: focusEvent now fires at all appropriate times |
| - Tooltip: context can now be specified as an array, so Tooltips can be |
| reused across multiple context elements |
| - Tooltip: preventoverlap now functions properly for large context |
| elements (i.e, images) |
| - Tooltip: fixed bugs regarding setTimeout |
| - Tooltip: added mousemove event to allow for more accurate Tooltip |
| positioning |
| - Panel: added dragEvent for monitoring all event handlers for drag and |
| drop |
| - Panel: modality mask is now resized on scroll |
| - Panel: KeyListeners are now properly destroyed when the Panel is |
| destroyed |
| - Panel: Header is now sized properly in quirks mode |
| - Dialog: Blinking cursor issue is fixed for Firefox |
| - Dialog: callback object for Connection is now public (this.callback) |
| - Dialog: onsuccess/onfailure properties removed (as a result of the |
| public callback object) |
| - Dialog: Dialog is now invisible by default |
| - Dialog: Buttons are now properly cleaned up on destroy |
| |
| *** version 0.10.0 *** |
| |
| * Initial release |
