https://www.city.tokushima.tokushima.jp/js/jquery.dropshadow.js

1/*
2  VERSION: Drop Shadow jQuery Plugin 1.6  12-13-2007
3
4  REQUIRES: jquery.js (verified for 1.3.2)
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 inl

95ine 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.  This work is in the public domain,
114          and 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: 0.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
305
306})(jQuery);