(function($) { $.fn.shadowenable = function() { return $(this).find("+ .fx-shadow").show().end(); }; $.fn.shadowdisable = function() { return $(this).find("+ .fx-shadow").hide().end(); }; $.fn.shadowdestroy = function() { return $(this).find("+ .fx-shadow").remove().end(); }; $.fn.shadow = function(options) { options = $.extend({ offset: 1, opacity: 0.2, color: "#000", monitor: false }, options || {}); options.offset -= 1; return this.each(function() { // remove an existing shadow if it exists var $element = $(this).shadowdestroy(), // create a shadow element $shadow = $("
").hide().insertafter($element); // figure the base height and width basewidth = $element.outerwidth(), baseheight = $element.outerheight(), // get the offset position = $element.position(), // get z-index zindex = parseint($element.css("zindex")) || 0; // append smooth corners $('
').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); // 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: zindex, top: position.top+"px", left: position.left+"px", width: basewidth, height: baseheight, marginleft: $element.css("marginleft"), marginright: $element.css("marginright"), marginbottom: $element.css("marginbottom"), margintop: $element.css("margintop") }).fadein(); 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" }); } // attempt to use domattrmodified event $element.bind("domattrmodified", rearrangeshadow); // use expressions if they exist (ie) if( $shadow[0].style.setexpression ) { $shadow[0].style.setexpression("top" , "parseint(this.previoussibling.currentstyle.top ) + 'px'"); $shadow[0].style.setexpression("left", "parseint(this.previoussibling.currentstyle.left) + 'px'"); } } }); }; })(jquery);