Index: fx/current/fx.shadow.js =================================================================== --- fx/current/fx.shadow.js (revision 3814) +++ fx/current/fx.shadow.js (working copy) @@ -3,80 +3,92 @@ //Make nodes selectable by expression $.extend($.expr[':'], { shadowed: "(' '+a.className+' ').indexOf(' fx-shadowed ')" }); - $.fn.shadowEnable = function() { if($(this[0]).next().is(".fx-shadow")) $(this[0]).next().show(); } - $.fn.shadowDisable = function() { if($(this[0]).next().is(".fx-shadow")) $(this[0]).next().hide(); } + $.fn.shadowEnable = function() { $(this[0]).next(".fx-shadow").show(); } + $.fn.shadowDisable = function() { $(this[0]).next(".fx-shadow").hide(); } $.fn.shadow = function(options) { + options = $.extend({ + offset: 1, + opacity: 0.2, + color: "#000", + monitor: false + }, options || {}); + options.offset -= 1; - options = options || {}; - options.offset = options.offset ? options.offset : 0; - options.opacity = options.opacity ? options.opacity : 0.2; - options.color = options.color || "#000"; - return this.each(function() { - var cur = $(this); + // Remove an existing shadow if it exists + $(this[0]).next(".fx-shadow").remove(); + var $element = $(this), + //Create a shadow element - var shadow = $("
"); cur.after(shadow); + $shadow = $("").insertAfter($element); //Figure the base height and width - var baseWidth = cur.outerWidth(); - var baseHeight = cur.outerHeight(); + baseWidth = $element.outerWidth(), + baseHeight = $element.outerHeight(), //get the offset - var position = cur.position(); + position = $element.position(), + //get z-index + zIndex = parseInt($element.css("zIndex")) || 0; + //Append smooth corners - $('').css({ position: 'absolute', opacity: options.opacity-0.05, left: 5+options.offset, top: 5+options.offset, width: baseWidth+1, height: baseHeight+1 }).appendTo(shadow); - $('').css({ position: 'absolute', opacity: options.opacity-0.1, left: 7+options.offset, top: 7+options.offset, width: baseWidth, height: baseHeight-3 }).appendTo(shadow); - $('').css({ position: 'absolute', opacity: options.opacity-0.1, left: 7+options.offset, top: 7+options.offset, width: baseWidth-3, height: baseHeight }).appendTo(shadow); - $('').css({ position: 'absolute', opacity: options.opacity, left: 6+options.offset, top: 6+options.offset, width: baseWidth-1, height: baseHeight-1 }).appendTo(shadow); + $('').css({ position: 'absolute', opacity: options.opacity - 0.05, left: options.offset, top: options.offset, width: baseWidth + 1, height: baseHeight + 1 }).appendTo($shadow); + $('').css({ position: 'absolute', opacity: options.opacity - 0.10, left: options.offset + 2, top: options.offset + 2, width: baseWidth, height: baseHeight - 3 }).appendTo($shadow); + $('').css({ position: 'absolute', opacity: options.opacity - 0.10, left: options.offset + 2, top: options.offset + 2, width: baseWidth - 3, height: baseHeight }).appendTo($shadow); + $('').css({ position: 'absolute', opacity: options.opacity, left: options.offset + 1, top: options.offset + 1, width: baseWidth - 1, height: baseHeight - 1 }).appendTo($shadow); //Add color - $("div.fx-shadow-color", shadow).css("background-color", options.color); + $("div.fx-shadow-color", $shadow).css("background-color", options.color); - //Determine the stack order (attention: the zIndex will get one higher!) - if(!cur.css("zIndex") || cur.css("zIndex") == "auto") { - var stack = 0; - cur.css("position", (cur.css("position") == "static" ? "relative" : cur.css("position"))).css("z-index", "1"); - } else { - var stack = parseInt(cur.css("zIndex")); - cur.css("zIndex", stack+1); - } + //Set zIndex +1 and make sure position is at least relative + //Attention: the zIndex will get one higher! + $element + .css({ + zIndex: zIndex + 1, + position: ($element.css("position") == "static" ? "relative" : "") + }); //Copy the original z-index and position to the clone //alert(shadow); If you insert this alert, opera will time correctly!! - shadow.css({ - position: "absolute", - zIndex: stack, - left: position.left, - top: position.top, - width: baseWidth, - height: baseHeight, - marginLeft: cur.css("marginLeft"), - marginRight: cur.css("marginRight"), - marginBottom: cur.css("marginBottom"), - marginTop: cur.css("marginTop") + $shadow.css({ + position: "absolute", + zIndex: zIndex, + left: position.left+"px", + top: position.top+"px", + width: baseWidth, + height: baseHeight, + marginLeft: $element.css("marginLeft"), + marginRight: $element.css("marginRight"), + marginBottom: $element.css("marginBottom"), + marginTop: $element.css("marginTop") }); - function rearrangeShadow(el,sh) { - var $el = $(el); - $(sh).css($el.position()); - $(sh).children().css({ height: $el.outerHeight()+"px", width: $el.outerWidth()+"px" }); - } + if ( options.monitor ) { + function rearrangeShadow() { + var $element = $(this), $shadow = $element.next(); + // $shadow.css( $element.position() ); + $shadow.css({ + top: parseInt($element.css("top")) +"px", + left: parseInt($element.css("left")) +"px" + }) + $(">*", $shadow).css({ height: this.offsetHeight+"px", width: this.offsetWidth+"px" }); + } - if($.browser.msie) { - //Add dynamic css expressions - shadow[0].style.setExpression("left","parseInt(jQuery(this.previousSibling).css('left'))+'px' || jQuery(this.previousSibling).position().left"); - shadow[0].style.setExpression("top","parseInt(jQuery(this.previousSibling).css('top'))+'px' || jQuery(this.previousSibling).position().top"); - } else { - //Bind events for good browsers - this.addEventListener("DOMAttrModified",function() { rearrangeShadow(this,shadow); },false); + //Attempt to use DOMAttrModified event + $element.bind("DOMAttrModified", rearrangeShadow); + + // Use expressions if they exist (IE) + if( $shadow[0].style.setExpression ) { + $shadow[0].style.setExpression("left", "parseInt(jQuery(this.previousSibling).css('left')) + 'px'"); + $shadow[0].style.setExpression("top" , "parseInt(jQuery(this.previousSibling).css('top') ) + 'px'"); + } } - }); };