first global commit
This commit is contained in:
@@ -0,0 +1,304 @@
|
||||
/*
|
||||
VERSION: Drop Shadow jQuery Plugin 1.6 12-13-2007
|
||||
|
||||
REQUIRES: jquery.js (1.2.6 or later)
|
||||
|
||||
SYNTAX: $(selector).dropShadow(options); // Creates new drop shadows
|
||||
$(selector).redrawShadow(); // Redraws shadows on elements
|
||||
$(selector).removeShadow(); // Removes shadows from elements
|
||||
$(selector).shadowId(); // Returns an existing shadow's ID
|
||||
|
||||
OPTIONS:
|
||||
|
||||
left : integer (default = 4)
|
||||
top : integer (default = 4)
|
||||
blur : integer (default = 2)
|
||||
opacity : decimal (default = 0.5)
|
||||
color : string (default = "black")
|
||||
swap : boolean (default = false)
|
||||
|
||||
The left and top parameters specify the distance and direction, in pixels, to
|
||||
offset the shadow. Zero values position the shadow directly behind the element.
|
||||
Positive values shift the shadow to the right and down, while negative values
|
||||
shift the shadow to the left and up.
|
||||
|
||||
The blur parameter specifies the spread, or dispersion, of the shadow. Zero
|
||||
produces a sharp shadow, one or two produces a normal shadow, and three or four
|
||||
produces a softer shadow. Higher values increase the processing load.
|
||||
|
||||
The opacity parameter should be a decimal value, usually less than one. You can
|
||||
use a value higher than one in special situations, e.g. with extreme blurring.
|
||||
|
||||
Color is specified in the usual manner, with a color name or hex value. The
|
||||
color parameter does not apply with transparent images.
|
||||
|
||||
The swap parameter reverses the stacking order of the original and the shadow.
|
||||
This can be used for special effects, like an embossed or engraved look.
|
||||
|
||||
EXPLANATION:
|
||||
|
||||
This jQuery plug-in adds soft drop shadows behind page elements. It is only
|
||||
intended for adding a few drop shadows to mostly stationary objects, like a
|
||||
page heading, a photo, or content containers.
|
||||
|
||||
The shadows it creates are not bound to the original elements, so they won't
|
||||
move or change size automatically if the original elements change. A window
|
||||
resize event listener is assigned, which should re-align the shadows in many
|
||||
cases, but if the elements otherwise move or resize you will have to handle
|
||||
those events manually. Shadows can be redrawn with the redrawShadow() method
|
||||
or removed with the removeShadow() method. The redrawShadow() method uses the
|
||||
same options used to create the original shadow. If you want to change the
|
||||
options, you should remove the shadow first and then create a new shadow.
|
||||
|
||||
The dropShadow method returns a jQuery collection of the new shadow(s). If
|
||||
further manipulation is required, you can store it in a variable like this:
|
||||
|
||||
var myShadow = $("#myElement").dropShadow();
|
||||
|
||||
You can also read the ID of the shadow from the original element at a later
|
||||
time. To get a shadow's ID, either read the shadowId attribute of the
|
||||
original element or call the shadowId() method. For example:
|
||||
|
||||
var myShadowId = $("#myElement").attr("shadowId"); or
|
||||
var myShadowId = $("#myElement").shadowId();
|
||||
|
||||
If the original element does not already have an ID assigned, a random ID will
|
||||
be generated for the shadow. However, if the original does have an ID, the
|
||||
shadow's ID will be the original ID and "_dropShadow". For example, if the
|
||||
element's ID is "myElement", the shadow's ID would be "myElement_dropShadow".
|
||||
|
||||
If you have a long piece of text and the user resizes the window so that the
|
||||
text wraps or unwraps, the shape of the text changes and the words are no
|
||||
longer in the same positions. In that case, you can either preset the height
|
||||
and width, so that it becomes a fixed box, or you can shadow each word
|
||||
separately, like this:
|
||||
|
||||
<h1><span>Your</span> <span>Page</span> <span>Title</span></h1>
|
||||
|
||||
$("h1 span").dropShadow();
|
||||
|
||||
The dropShadow method attempts to determine whether the selected elements have
|
||||
transparent backgrounds. If you want to shadow the content inside an element,
|
||||
like text or a transparent image, it must not have a background-color or
|
||||
background-image style. If the element has a solid background it will create a
|
||||
rectangular shadow around the outside box.
|
||||
|
||||
The shadow elements are positioned absolutely one layer below the original
|
||||
element, which is positioned relatively (unless it's already absolute).
|
||||
|
||||
*** All shadows have the "dropShadow" class, for selecting with CSS or jQuery.
|
||||
|
||||
ISSUES:
|
||||
|
||||
1) Limited styling of shadowed elements by ID. Because IDs must be unique,
|
||||
and the shadows have their own ID, styles applied by ID won't transfer
|
||||
to the shadows. Instead, style elements by class or use inline styles.
|
||||
2) Sometimes shadows don't align properly. Elements may need to be wrapped
|
||||
in container elements, margins or floats changed, etc. or you may just
|
||||
have to tweak the left and top offsets to get them to align. For example,
|
||||
with draggable objects, you have to wrap them inside two divs. Make the
|
||||
outer div draggable and set the inner div's position to relative. Then
|
||||
you can create a shadow on the element inside the inner div.
|
||||
3) If the user changes font sizes it will throw the shadows off. Browsers
|
||||
do not expose an event for font size changes. The only known way to
|
||||
detect a user font size change is to embed an invisible text element and
|
||||
then continuously poll for changes in size.
|
||||
4) Safari support is shaky, and may require even more tweaks/wrappers, etc.
|
||||
|
||||
The bottom line is that this is a gimick effect, not PFM, and if you push it
|
||||
too hard or expect it to work in every possible situation on every browser,
|
||||
you will be disappointed. Use it sparingly, and don't use it for anything
|
||||
critical. Otherwise, have fun with it!
|
||||
|
||||
AUTHOR: Larry Stevens (McLars@eyebulb.com) This work is in the public domain,
|
||||
and it is not supported in any way. Use it at your own risk.
|
||||
*/
|
||||
|
||||
|
||||
(function($){
|
||||
|
||||
var dropShadowZindex = 1; //z-index counter
|
||||
|
||||
$.fn.dropShadow = function(options)
|
||||
{
|
||||
// Default options
|
||||
var opt = $.extend({
|
||||
left: 4,
|
||||
top: 4,
|
||||
blur: 2,
|
||||
opacity: .5,
|
||||
color: "black",
|
||||
swap: false
|
||||
}, options);
|
||||
var jShadows = $([]); //empty jQuery collection
|
||||
|
||||
// Loop through original elements
|
||||
this.not(".dropShadow").each(function()
|
||||
{
|
||||
var jthis = $(this);
|
||||
var shadows = [];
|
||||
var blur = (opt.blur <= 0) ? 0 : opt.blur;
|
||||
var opacity = (blur == 0) ? opt.opacity : opt.opacity / (blur * 8);
|
||||
var zOriginal = (opt.swap) ? dropShadowZindex : dropShadowZindex + 1;
|
||||
var zShadow = (opt.swap) ? dropShadowZindex + 1 : dropShadowZindex;
|
||||
|
||||
// Create ID for shadow
|
||||
var shadowId;
|
||||
if (this.id) {
|
||||
shadowId = this.id + "_dropShadow";
|
||||
}
|
||||
else {
|
||||
shadowId = "ds" + (1 + Math.floor(9999 * Math.random()));
|
||||
}
|
||||
|
||||
// Modify original element
|
||||
$.data(this, "shadowId", shadowId); //store id in expando
|
||||
$.data(this, "shadowOptions", options); //store options in expando
|
||||
jthis
|
||||
.attr("shadowId", shadowId)
|
||||
.css("zIndex", zOriginal);
|
||||
if (jthis.css("position") != "absolute") {
|
||||
jthis.css({
|
||||
position: "relative",
|
||||
zoom: 1 //for IE layout
|
||||
});
|
||||
}
|
||||
|
||||
// Create first shadow layer
|
||||
bgColor = jthis.css("backgroundColor");
|
||||
if (bgColor == "rgba(0, 0, 0, 0)") bgColor = "transparent"; //Safari
|
||||
if (bgColor != "transparent" || jthis.css("backgroundImage") != "none"
|
||||
|| this.nodeName == "SELECT"
|
||||
|| this.nodeName == "INPUT"
|
||||
|| this.nodeName == "TEXTAREA") {
|
||||
shadows[0] = $("<div></div>")
|
||||
.css("background", opt.color);
|
||||
}
|
||||
else {
|
||||
shadows[0] = jthis
|
||||
.clone()
|
||||
.removeAttr("id")
|
||||
.removeAttr("name")
|
||||
.removeAttr("shadowId")
|
||||
.css("color", opt.color);
|
||||
}
|
||||
shadows[0]
|
||||
.addClass("dropShadow")
|
||||
.css({
|
||||
height: jthis.outerHeight(),
|
||||
left: blur,
|
||||
opacity: opacity,
|
||||
position: "absolute",
|
||||
top: blur,
|
||||
width: jthis.outerWidth(),
|
||||
zIndex: zShadow
|
||||
});
|
||||
|
||||
// Create other shadow layers
|
||||
var layers = (8 * blur) + 1;
|
||||
for (i = 1; i < layers; i++) {
|
||||
shadows[i] = shadows[0].clone();
|
||||
}
|
||||
|
||||
// Position layers
|
||||
var i = 1;
|
||||
var j = blur;
|
||||
while (j > 0) {
|
||||
shadows[i].css({left: j * 2, top: 0}); //top
|
||||
shadows[i + 1].css({left: j * 4, top: j * 2}); //right
|
||||
shadows[i + 2].css({left: j * 2, top: j * 4}); //bottom
|
||||
shadows[i + 3].css({left: 0, top: j * 2}); //left
|
||||
shadows[i + 4].css({left: j * 3, top: j}); //top-right
|
||||
shadows[i + 5].css({left: j * 3, top: j * 3}); //bottom-right
|
||||
shadows[i + 6].css({left: j, top: j * 3}); //bottom-left
|
||||
shadows[i + 7].css({left: j, top: j}); //top-left
|
||||
i += 8;
|
||||
j--;
|
||||
}
|
||||
|
||||
// Create container
|
||||
var divShadow = $("<div></div>")
|
||||
.attr("id", shadowId)
|
||||
.addClass("dropShadow")
|
||||
.css({
|
||||
left: jthis.position().left + opt.left - blur,
|
||||
marginTop: jthis.css("marginTop"),
|
||||
marginRight: jthis.css("marginRight"),
|
||||
marginBottom: jthis.css("marginBottom"),
|
||||
marginLeft: jthis.css("marginLeft"),
|
||||
position: "absolute",
|
||||
top: jthis.position().top + opt.top - blur,
|
||||
zIndex: zShadow
|
||||
});
|
||||
|
||||
// Add layers to container
|
||||
for (i = 0; i < layers; i++) {
|
||||
divShadow.append(shadows[i]);
|
||||
}
|
||||
|
||||
// Add container to DOM
|
||||
jthis.after(divShadow);
|
||||
|
||||
// Add shadow to return set
|
||||
jShadows = jShadows.add(divShadow);
|
||||
|
||||
// Re-align shadow on window resize
|
||||
$(window).resize(function()
|
||||
{
|
||||
try {
|
||||
divShadow.css({
|
||||
left: jthis.position().left + opt.left - blur,
|
||||
top: jthis.position().top + opt.top - blur
|
||||
});
|
||||
}
|
||||
catch(e){}
|
||||
});
|
||||
|
||||
// Increment z-index counter
|
||||
dropShadowZindex += 2;
|
||||
|
||||
}); //end each
|
||||
|
||||
return this.pushStack(jShadows);
|
||||
};
|
||||
|
||||
|
||||
$.fn.redrawShadow = function()
|
||||
{
|
||||
// Remove existing shadows
|
||||
this.removeShadow();
|
||||
|
||||
// Draw new shadows
|
||||
return this.each(function()
|
||||
{
|
||||
var shadowOptions = $.data(this, "shadowOptions");
|
||||
$(this).dropShadow(shadowOptions);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
$.fn.removeShadow = function()
|
||||
{
|
||||
return this.each(function()
|
||||
{
|
||||
var shadowId = $(this).shadowId();
|
||||
$("div#" + shadowId).remove();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
$.fn.shadowId = function()
|
||||
{
|
||||
return $.data(this[0], "shadowId");
|
||||
};
|
||||
|
||||
|
||||
$(function()
|
||||
{
|
||||
// Suppress printing of shadows
|
||||
var noPrint = "<style type='text/css' media='print'>";
|
||||
noPrint += ".dropShadow{visibility:hidden;}</style>";
|
||||
$("head").append(noPrint);
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user