Hi all, I have written a small extension for the window.js ( http://prototype-window.xilinus.com/ version 1.3).
*What does it do?* It adds an optional hover-function for the minimize, maximize and close buttons. Backward-compatibility is guaranteed. *How do I add this feature for my windows or dialog?* 1. apply the diff to the window.js v1.3 2. Add styles-tags for your active and blurred windows ending in _close_hover, maximize_hover and minimize_hover to define the style of your buttons while the mouse hovers over them. 3. Add the option "buttonHoverStyles:true," when initializing your window. *What does the .diff do in detail?* It adds the option-default for buttonHoverStyles as false in the initialize-method to guarantee backward-compatibility. In _createWindow() it checkes buttonHoverStyles and accordingly adds in-tag event-handlers for onmouseover and onmouseoutto the button-divs. These in turn change the classname of the div to realise the hover-effect. Have fun! Henning. -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/hv8N4Fq76GUJ. To post to this group, send email to prototype-scriptaculous@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
67 > buttonHoverStyles: false, 599,601c600,620 < var closeDiv = this.options.closable ? "<div class='"+ className +"_close' id='"+ id +"_close' onclick='Windows.close(\""+ id +"\", event)'> </div>" : ""; < var minDiv = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)'> </div>" : ""; < var maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)'> </div>" : ""; --- > var closeDiv = ""; > var minDiv = ""; > var maxDiv = ""; > if(this.options.buttonHoverStyles) { > closeDiv = this.options.closable ? "<div class='"+ className +"_close' id='"+ id +"_close' onclick='Windows.close(\""+ id +"\", event)' " > +"onmouseover=\"$('" + id + "_close').className = $('" + id + "_close').className + '_hover';\" " > +"onmouseout=\"$('" + id + "_close').className = $('" + id + "_close').className.sub('_hover','');\"> </div>" > : ""; > minDiv = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)' " > +"onmouseover=\"$('" + id + "_minimize').className = $('" + id + "_minimize').className + '_hover';\" " > +"onmouseout=\"$('" + id + "_minimize').className = $('" + id + "_minimize').className.sub('_hover','');\"> </div>" > : ""; > maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)' " > +"onmouseover=\"$('" + id + "_maximize').className = $('" + id + "_maximize').className + '_hover';\" " > +"onmouseout=\"$('" + id + "_maximize').className = $('" + id + "_maximize').className.sub('_hover','');\"> </div>" > : ""; > } else { > closeDiv = this.options.closable ? "<div class='"+ className +"_close' id='"+ id +"_close' onclick='Windows.close(\""+ id +"\", event)'> </div>" : ""; > minDiv = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)'> </div>" : ""; > maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)'> </div>" : ""; > }