https://www.fontanelle.org/js/tooltip/jquery.dropshadow.js

1/*******************************************************************************
2 jquery.mb.components
3 Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi); Open lab srl, Firenze - Italy
4 email: [email protected]
5 site: http://pupunzi.com
6
7 Licences: MIT, GPL
8 http://www.opensource.org/licenses/mit-license.php
9 http://www.gnu.org/licenses/gpl.html
10 ******************************************************************************/
11
12/*
13	VERSION: Drop Shadow jQuery Plugin 1.6  12-13-2007
14
15	REQUIRES: jquery.js (1.2.6 or later)
16
17	SYNTAX: $(selector).dropShadow(options);  // Creates new drop shadows
18					$(selector).redrawShadow();       // Redraws shadows on elements
19					$(selector).removeShadow();       // Removes shadows from elements
20					$(selector).shadowId();           // Returns an existing shadow's ID
21
22	OPTIONS:
23
24		left    : integer (default = 4)
25		top     : integer (default = 4)
26		blur    : integer (default = 2)
27		opacity : decimal (default = 0.5)
28		color   : string (default = "black")
29		swap    : boolean (default = false)
30
31	The left and top parameters specify the distance and direction, in	pixels, to
32	offset the shadow. Zero values position the shadow directly behind the element.
33	Positive values shift the shadow to the right and down, while negative values 
34	shift the shadow to the left and up.
35	
36	The blur parameter specifies the spread, or dispersion, of the shadow. Zero 
37	produces a sharp shadow, one or two produces a normal shadow, and	three or four
38	produces a softer shadow. Higher values increase the processing load.
39	
40	The opacity parameter	should be a decimal value, usually less than one. You can
41	use a value	higher than one in special situations, e.g. with extreme blurring. 
42	
43	Color is specified in the usual manner, with a color name or hex value. The
44	color parameter	does not apply with transparent images.
45	
46	The swap parameter reverses the stacking order of the original and the shadow.
47	This can be used for special effects, like an embossed or engraved look.
48
49	EXPLANATION:
50	
51	This jQuery plug-in adds soft drop shadows behind page elements. It is only
52	intended for adding a few drop shadows to mostly stationary objects, like a
53	page heading, a photo, or content containers.
54
55	The shadows it creates are not bound to the original elements, so they won't
56	move or change size automatically if the original elements change. A window
57	resize event listener is assigned, which should re-align the shadows in many
58	cases, but if the elements otherwise move or resize you will have to handle
59	those events manually. Shadows can be redrawn with the redrawShadow() method
60	or removed with the removeShadow() method. The redrawShadow() method uses the
61	same options used to create the original shadow. If you want to change the
62	options, you should remove the shadow first and then create a new shadow.
63	
64	The dropShadow method returns a jQuery collection of the new shadow(s). If
65	further manipulation is required, you can store it in a variable like this:
66
67		var myShadow = $("#myElement").dropShadow();
68
69	You can also read the ID of the shadow from the original element at a later
70	time. To get a shadow's ID, either read the shadowId attribute of the
71	original element or call the shadowId() method. For example:
72
73		var myShadowId = $("#myElement").attr("shadowId");  or
74		var myShadowId = $("#myElement").shadowId();
75
76	If the original element does not already have an ID assigned, a random ID will
77	be generated for the shadow. However, if the original does have an ID, the 
78	shadow's ID will be the original ID and "_dropShadow". For example, if the
79	element's ID is "myElement", the shadow's ID would be "myElement_dropShadow".
80
81	If you have a long piece of text and the user resizes the	window so that the
82	text wraps or unwraps, the shape of the text changes and the words are no
83	longer in the same positions. In that case, you can either preset the height
84	and width, so that it becomes a fixed box, or you can shadow each word
85	separately, like this:
86
87		<h1><span>

87Your</span> <span>Page</span> <span>Title</span></h1>
88
89		$("h1 span").dropShadow();
90
91	The dropShadow method attempts to determine whether the selected elements have
92	transparent backgrounds. If you want to shadow the content inside an element,
93	like text or a transparent image, it must not have a background-color or
94	background-image style. If the element has a solid background it will create a
95	rectangular	shadow around the outside box.
96
97	The shadow elements are positioned absolutely one layer below the original 
98	element, which is positioned relatively (unless it's already absolute).
99
100	*** All shadows have the "dropShadow" class, for selecting with CSS or jQuery.
101
102	ISSUES:
103	
104		1)	Limited styling of shadowed elements by ID. Because IDs must be unique,
105				and the shadows have their own ID, styles applied by ID won't transfer
106				to the shadows. Instead, style elements by class or use inline styles.
107		2)	Sometimes shadows don't align properly. Elements may need to be wrapped
108				in container elements, margins or floats changed, etc. or you may just 
109				have to tweak the left and top offsets to get them to align. For example,
110				with draggable objects, you have to wrap them inside two divs. Make the 
111				outer div draggable and set the inner div's position to relative. Then 
112				you can create a shadow on the element inside the inner div.
113		3)	If the user changes font sizes it will throw the shadows off. Browsers 
114				do not expose an event for font size changes. The only known way to 
115				detect a user font size change is to embed an invisible text element and
116				then continuously poll for changes in size.
117		4)	Safari support is shaky, and may require even more tweaks/wrappers, etc.
118		
119		The bottom line is that this is a gimick effect, not PFM, and if you push it
120		too hard or expect it to work in every possible situation on every browser,
121		you will be disappointed. Use it sparingly, and don't use it for anything 
122		critical. Otherwise, have fun with it!
123				
124	AUTHOR: Larry Stevens ([email protected]) This work is in the public domain,
125					and it is not supported in any way. Use it at your own risk.
126*/
127
128
129(function($){
130
131	var dropShadowZindex = 1;  //z-index counter
132
133	$.fn.dropShadow = function(options)
134	{
135		// Default options
136		var opt = $.extend({
137			left: 4,
138			top: 4,
139			blur: 2,
140			opacity: .5,
141			color: "black",
142			swap: false
143			}, options);
144		var jShadows = $([]);  //empty jQuery collection
145		
146		// Loop through original elements
147		this.not(".dropShadow").each(function()
148		{
149			var jthis = $(this);
150			var shadows = [];
151			var blur = (opt.blur <= 0) ? 0 : opt.blur;
152			var opacity = (blur == 0) ? opt.opacity : opt.opacity / (blur * 8);
153			var zOriginal = (opt.swap) ? dropShadowZindex : dropShadowZindex + 1;
154			var zShadow = (opt.swap) ? dropShadowZindex + 1 : dropShadowZindex;
155			
156			// Create ID for shadow
157			var shadowId;
158			if (this.id) {
159				shadowId = this.id + "_dropShadow";
160			}
161			else {
162				shadowId = "ds" + (1 + Math.floor(9999 * Math.random()));
163			}
164
165			// Modify original element
166			$.data(this, "shadowId", shadowId); //store id in expando
167			$.data(this, "shadowOptions", options); //store options in expando
168			jthis
169				.attr("shadowId", shadowId)
170				.css("zIndex", zOriginal);
171			if (jthis.css("position") != "absolute") {
172				jthis.css({
173					position: "relative",
174					zoom: 1 //for IE layout
175				});
176			}
177
178			// Create first shadow layer
179			bgColor = jthis.css("backgroundColor");
180			if (bgColor == "rgba(0, 0, 0, 0)") bgColor = "transparent";  //Safari
181			if (bgColor != "transparent" || jthis.css("backgroundImage") != "none" 
182					|| this.nodeName == "SELECT" 
183					|| this.nodeName == "INPUT"
184					|| this.nodeName == "TEXTAREA") {		
185				shadows[0] = $("<div></div>")
186					.css("background", opt.color);								
187			}
188			else {
189				shadows[0] = jthis
190					.clone()
191					.removeAttr("id")
192					.removeAttr("name")
193					.removeAttr("shadowId")
194					.css("color", opt.color);
195			}
196			shadows[0]
197				.addClass("dropShadow")
198				.css({
199					height: jthis.outerHeight(),
200					left: blur,
201					opacity: opacity,
202					position: "absolute",

203					top: blur,
204					width: jthis.outerWidth(),
205					zIndex: zShadow
206				});
207				
208			// Create other shadow layers
209			var layers = (8 * blur) + 1;
210			for (i = 1; i < layers; i++) {
211				shadows[i] = shadows[0].clone();
212			}
213
214			// Position layers
215			var i = 1;			
216			var j = blur;
217			while (j > 0) {
218				shadows[i].css({left: j * 2, top: 0});           //top
219				shadows[i + 1].css({left: j * 4, top: j * 2});   //right
220				shadows[i + 2].css({left: j * 2, top: j * 4});   //bottom
221				shadows[i + 3].css({left: 0, top: j * 2});       //left
222				shadows[i + 4].css({left: j * 3, top: j});       //top-right
223				shadows[i + 5].css({left: j * 3, top: j * 3});   //bottom-right
224				shadows[i + 6].css({left: j, top: j * 3});       //bottom-left
225				shadows[i + 7].css({left: j, top: j});           //top-left
226				i += 8;
227				j--;
228			}
229
230			// Create container
231			var divShadow = $("<div></div>")
232				.attr("id", shadowId) 
233				.addClass("dropShadow")
234				.css({
235					left: jthis.position().left + opt.left - blur,
236					marginTop: jthis.css("marginTop"),
237					marginRight: jthis.css("marginRight"),
238					marginBottom: jthis.css("marginBottom"),
239					marginLeft: jthis.css("marginLeft"),
240					position: "absolute",
241					top: jthis.position().top + opt.top - blur,
242					zIndex: zShadow
243				});
244
245			// Add layers to container	
246			for (i = 0; i < layers; i++) {
247				divShadow.append(shadows[i]);
248			}
249			
250			// Add container to DOM
251			jthis.after(divShadow);
252
253			// Add shadow to return set
254			jShadows = jShadows.add(divShadow);
255
256			// Re-align shadow on window resize
257			$(window).resize(function()
258			{
259				try {
260					divShadow.css({
261						left: jthis.position().left + opt.left - blur,
262						top: jthis.position().top + opt.top - blur
263					});
264				}
265				catch(e){}
266			});
267			
268			// Increment z-index counter
269			dropShadowZindex += 2;
270
271		});  //end each
272		
273		return this.pushStack(jShadows);
274	};
275
276
277	$.fn.redrawShadow = function()
278	{
279		// Remove existing shadows
280		this.removeShadow();
281		
282		// Draw new shadows
283		return this.each(function()
284		{
285			var shadowOptions = $.data(this, "shadowOptions");
286			$(this).dropShadow(shadowOptions);
287		});
288	};
289
290
291	$.fn.removeShadow = function()
292	{
293		return this.each(function()
294		{
295			var shadowId = $(this).shadowId();
296			$("div#" + shadowId).remove();
297		});
298	};
299
300
301	$.fn.shadowId = function()
302	{
303		return $.data(this[0], "shadowId");
304	};
305
306
307	$(function()  
308	{
309		// Suppress printing of shadows
310		var noPrint = "<style type='text/css' media='print'>";
311		noPrint += ".dropShadow{visibility:hidden;}</style>";
312		$("head").append(noPrint);
313	});
314
315})(jQuery);