Project

General

Profile

1
/*
2
	VERSION: Drop Shadow jQuery Plugin 1.6  12-13-2007
3

    
4
	REQUIRES: jquery.js (1.2.6 or later)
5

    
6
	SYNTAX: $(selector).dropShadow(options);  // Creates new drop shadows
7
					$(selector).redrawShadow();       // Redraws shadows on elements
8
					$(selector).removeShadow();       // Removes shadows from elements
9
					$(selector).shadowId();           // Returns an existing shadow's ID
10

    
11
	OPTIONS:
12

    
13
		left    : integer (default = 4)
14
		top     : integer (default = 4)
15
		blur    : integer (default = 2)
16
		opacity : decimal (default = 0.5)
17
		color   : string (default = "black")
18
		swap    : boolean (default = false)
19

    
20
	The left and top parameters specify the distance and direction, in	pixels, to
21
	offset the shadow. Zero values position the shadow directly behind the element.
22
	Positive values shift the shadow to the right and down, while negative values 
23
	shift the shadow to the left and up.
24
	
25
	The blur parameter specifies the spread, or dispersion, of the shadow. Zero 
26
	produces a sharp shadow, one or two produces a normal shadow, and	three or four
27
	produces a softer shadow. Higher values increase the processing load.
28
	
29
	The opacity parameter	should be a decimal value, usually less than one. You can
30
	use a value	higher than one in special situations, e.g. with extreme blurring. 
31
	
32
	Color is specified in the usual manner, with a color name or hex value. The
33
	color parameter	does not apply with transparent images.
34
	
35
	The swap parameter reverses the stacking order of the original and the shadow.
36
	This can be used for special effects, like an embossed or engraved look.
37

    
38
	EXPLANATION:
39
	
40
	This jQuery plug-in adds soft drop shadows behind page elements. It is only
41
	intended for adding a few drop shadows to mostly stationary objects, like a
42
	page heading, a photo, or content containers.
43

    
44
	The shadows it creates are not bound to the original elements, so they won't
45
	move or change size automatically if the original elements change. A window
46
	resize event listener is assigned, which should re-align the shadows in many
47
	cases, but if the elements otherwise move or resize you will have to handle
48
	those events manually. Shadows can be redrawn with the redrawShadow() method
49
	or removed with the removeShadow() method. The redrawShadow() method uses the
50
	same options used to create the original shadow. If you want to change the
51
	options, you should remove the shadow first and then create a new shadow.
52
	
53
	The dropShadow method returns a jQuery collection of the new shadow(s). If
54
	further manipulation is required, you can store it in a variable like this:
55

    
56
		var myShadow = $("#myElement").dropShadow();
57

    
58
	You can also read the ID of the shadow from the original element at a later
59
	time. To get a shadow's ID, either read the shadowId attribute of the
60
	original element or call the shadowId() method. For example:
61

    
62
		var myShadowId = $("#myElement").attr("shadowId");  or
63
		var myShadowId = $("#myElement").shadowId();
64

    
65
	If the original element does not already have an ID assigned, a random ID will
66
	be generated for the shadow. However, if the original does have an ID, the 
67
	shadow's ID will be the original ID and "_dropShadow". For example, if the
68
	element's ID is "myElement", the shadow's ID would be "myElement_dropShadow".
69

    
70
	If you have a long piece of text and the user resizes the	window so that the
71
	text wraps or unwraps, the shape of the text changes and the words are no
72
	longer in the same positions. In that case, you can either preset the height
73
	and width, so that it becomes a fixed box, or you can shadow each word
74
	separately, like this:
75

    
76
		<h1><span>Your</span> <span>Page</span> <span>Title</span></h1>
77

    
78
		$("h1 span").dropShadow();
79

    
80
	The dropShadow method attempts to determine whether the selected elements have
81
	transparent backgrounds. If you want to shadow the content inside an element,
82
	like text or a transparent image, it must not have a background-color or
83
	background-image style. If the element has a solid background it will create a
84
	rectangular	shadow around the outside box.
85

    
86
	The shadow elements are positioned absolutely one layer below the original 
87
	element, which is positioned relatively (unless it's already absolute).
88

    
89
	*** All shadows have the "dropShadow" class, for selecting with CSS or jQuery.
90

    
91
	ISSUES:
92
	
93
		1)	Limited styling of shadowed elements by ID. Because IDs must be unique,
94
				and the shadows have their own ID, styles applied by ID won't transfer
95
				to the shadows. Instead, style elements by class or use inline styles.
96
		2)	Sometimes shadows don't align properly. Elements may need to be wrapped
97
				in container elements, margins or floats changed, etc. or you may just 
98
				have to tweak the left and top offsets to get them to align. For example,
99
				with draggable objects, you have to wrap them inside two divs. Make the 
100
				outer div draggable and set the inner div's position to relative. Then 
101
				you can create a shadow on the element inside the inner div.
102
		3)	If the user changes font sizes it will throw the shadows off. Browsers 
103
				do not expose an event for font size changes. The only known way to 
104
				detect a user font size change is to embed an invisible text element and
105
				then continuously poll for changes in size.
106
		4)	Safari support is shaky, and may require even more tweaks/wrappers, etc.
107
		
108
		The bottom line is that this is a gimick effect, not PFM, and if you push it
109
		too hard or expect it to work in every possible situation on every browser,
110
		you will be disappointed. Use it sparingly, and don't use it for anything 
111
		critical. Otherwise, have fun with it!
112
				
113
	AUTHOR: Larry Stevens (McLars@eyebulb.com) This work is in the public domain,
114
					and it is not supported in any way. Use it at your own risk.
115
*/
116

    
117

    
118
(function($){
119

    
120
	var dropShadowZindex = 1;  //z-index counter
121

    
122
	$.fn.dropShadow = function(options)
123
	{
124
		// Default options
125
		var opt = $.extend({
126
			left: 4,
127
			top: 4,
128
			blur: 2,
129
			opacity: .5,
130
			color: "black",
131
			swap: false
132
			}, options);
133
		var jShadows = $([]);  //empty jQuery collection
134
		
135
		// Loop through original elements
136
		this.not(".dropShadow").each(function()
137
		{
138
			var jthis = $(this);
139
			var shadows = [];
140
			var blur = (opt.blur <= 0) ? 0 : opt.blur;
141
			var opacity = (blur == 0) ? opt.opacity : opt.opacity / (blur * 8);
142
			var zOriginal = (opt.swap) ? dropShadowZindex : dropShadowZindex + 1;
143
			var zShadow = (opt.swap) ? dropShadowZindex + 1 : dropShadowZindex;
144
			
145
			// Create ID for shadow
146
			var shadowId;
147
			if (this.id) {
148
				shadowId = this.id + "_dropShadow";
149
			}
150
			else {
151
				shadowId = "ds" + (1 + Math.floor(9999 * Math.random()));
152
			}
153

    
154
			// Modify original element
155
			$.data(this, "shadowId", shadowId); //store id in expando
156
			$.data(this, "shadowOptions", options); //store options in expando
157
			jthis
158
				.attr("shadowId", shadowId)
159
				.css("zIndex", zOriginal);
160
			if (jthis.css("position") != "absolute") {
161
				jthis.css({
162
					position: "relative",
163
					zoom: 1 //for IE layout
164
				});
165
			}
166

    
167
			// Create first shadow layer
168
			bgColor = jthis.css("backgroundColor");
169
			if (bgColor == "rgba(0, 0, 0, 0)") bgColor = "transparent";  //Safari
170
			if (bgColor != "transparent" || jthis.css("backgroundImage") != "none" 
171
					|| this.nodeName == "SELECT" 
172
					|| this.nodeName == "INPUT"
173
					|| this.nodeName == "TEXTAREA") {		
174
				shadows[0] = $("<div></div>")
175
					.css("background", opt.color);								
176
			}
177
			else {
178
				shadows[0] = jthis
179
					.clone()
180
					.removeAttr("id")
181
					.removeAttr("name")
182
					.removeAttr("shadowId")
183
					.css("color", opt.color);
184
			}
185
			shadows[0]
186
				.addClass("dropShadow")
187
				.css({
188
					height: jthis.outerHeight(),
189
					left: blur,
190
					opacity: opacity,
191
					position: "absolute",
192
					top: blur,
193
					width: jthis.outerWidth(),
194
					zIndex: zShadow
195
				});
196
				
197
			// Create other shadow layers
198
			var layers = (8 * blur) + 1;
199
			for (i = 1; i < layers; i++) {
200
				shadows[i] = shadows[0].clone();
201
			}
202

    
203
			// Position layers
204
			var i = 1;			
205
			var j = blur;
206
			while (j > 0) {
207
				shadows[i].css({left: j * 2, top: 0});           //top
208
				shadows[i + 1].css({left: j * 4, top: j * 2});   //right
209
				shadows[i + 2].css({left: j * 2, top: j * 4});   //bottom
210
				shadows[i + 3].css({left: 0, top: j * 2});       //left
211
				shadows[i + 4].css({left: j * 3, top: j});       //top-right
212
				shadows[i + 5].css({left: j * 3, top: j * 3});   //bottom-right
213
				shadows[i + 6].css({left: j, top: j * 3});       //bottom-left
214
				shadows[i + 7].css({left: j, top: j});           //top-left
215
				i += 8;
216
				j--;
217
			}
218

    
219
			// Create container
220
			var divShadow = $("<div></div>")
221
				.attr("id", shadowId) 
222
				.addClass("dropShadow")
223
				.css({
224
					left: jthis.position().left + opt.left - blur,
225
					marginTop: jthis.css("marginTop"),
226
					marginRight: jthis.css("marginRight"),
227
					marginBottom: jthis.css("marginBottom"),
228
					marginLeft: jthis.css("marginLeft"),
229
					position: "absolute",
230
					top: jthis.position().top + opt.top - blur,
231
					zIndex: zShadow
232
				});
233

    
234
			// Add layers to container	
235
			for (i = 0; i < layers; i++) {
236
				divShadow.append(shadows[i]);
237
			}
238
			
239
			// Add container to DOM
240
			jthis.after(divShadow);
241

    
242
			// Add shadow to return set
243
			jShadows = jShadows.add(divShadow);
244

    
245
			// Re-align shadow on window resize
246
			$(window).resize(function()
247
			{
248
				try {
249
					divShadow.css({
250
						left: jthis.position().left + opt.left - blur,
251
						top: jthis.position().top + opt.top - blur
252
					});
253
				}
254
				catch(e){}
255
			});
256
			
257
			// Increment z-index counter
258
			dropShadowZindex += 2;
259

    
260
		});  //end each
261
		
262
		return this.pushStack(jShadows);
263
	};
264

    
265

    
266
	$.fn.redrawShadow = function()
267
	{
268
		// Remove existing shadows
269
		this.removeShadow();
270
		
271
		// Draw new shadows
272
		return this.each(function()
273
		{
274
			var shadowOptions = $.data(this, "shadowOptions");
275
			$(this).dropShadow(shadowOptions);
276
		});
277
	};
278

    
279

    
280
	$.fn.removeShadow = function()
281
	{
282
		return this.each(function()
283
		{
284
			var shadowId = $(this).shadowId();
285
			$("div#" + shadowId).remove();
286
		});
287
	};
288

    
289

    
290
	$.fn.shadowId = function()
291
	{
292
		return $.data(this[0], "shadowId");
293
	};
294

    
295

    
296
	$(function()  
297
	{
298
		// Suppress printing of shadows
299
		var noPrint = "<style type='text/css' media='print'>";
300
		noPrint += ".dropShadow{visibility:hidden;}</style>";
301
		$("head").append(noPrint);
302
	});
303

    
304
})(jQuery);
(11-11/12)