bach-theme/jquery.animatedborder.js at master · bi0xid/bach-theme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/*
 * jquery.animatedborder. Animated borders on elements
 *
 * Copyright (c) 2010 Craig Davis
 * http://there4development.com
 *
 * Licensed under MIT
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Launch  : 2/20/2010 9:35:59 AM
 * Version : 0.1.0-alpha
 * Released: 2/20/2010 9:36:18 AM
 * Debug: jquery.animatedborder.js
 */

/**
 * Adds an animated border around any block level element.
 *
 * It does this by adding 4 absolutely positioned divs around
 * the element. The 4 highlight divs use an animated gif with
 * white blocks and transparent areas. This allows the background
 * of the div to be visible and be treated as the color of the
 * animated border.
 *
 * This plugin requires 3 style rules:
 * .animatedBorderSprite { position: absolute; background: url(stripe.gif); margin: 0; }
 * .animatedBorderSprite-top { -moz-border-radius-topleft: 2px; -webkit-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; -webkit-border-radius-topright: 2px;}
 * .animatedBorderSprite-bottom { -moz-border-radius-bottomleft: 2px; -webkit-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-radius-bottomright: 2px;}
 *
 * If you have to remake the animated gif, you should build
 * an 8x8 2 frame gif animation, with a 4x4 checkerboard grid
 * made of white and transparent blocks
 *
 */

(function($){
  $.fn.extend({
    animatedBorder: function(options) {
      var defaults = {
            size: 2,
            color: '#6699CC'
            }
      var options =  $.extend(defaults, options);

      return this.each(function() {
        var o = options;

        if ($(this).hasClass('animatedBorder')) {
          $('.animatedBorderSprite',$(this)).remove();
          $(this).removeClass('animatedBorder');
          return;
        }

        $(this).addClass('animatedBorder');
        var offset = $(this).offset();
        var size = {
                   height : $(this).outerHeight(),
                   width : $(this).outerWidth()
                   }
        $(this).append(
          $('<div />')
            .addClass('animatedBorderSprite')
            .addClass('animatedBorderSprite-top')
            .css({
              'top' : offset.top - o.size,
              'left' : offset.left - o.size,
              'width' : size.width + (2 * o.size),
              'height' : o.size,
              'background-color' : o.color
              })
          );
        $(this).append(
          $('<div />')
            .addClass('animatedBorderSprite')
            .addClass('animatedBorderSprite-bottom')
            .css({
              'top' : offset.top + size.height,
              'left' : offset.left - o.size,
              'width' : size.width + (2 * o.size),
              'height' : o.size,
              'background-color' : o.color
              })
          );
        $(this).append(
          $('<div />')
            .addClass('animatedBorderSprite')
            .css({
              'top' : offset.top,
              'left' : offset.left - o.size,
              'width' : o.size,
              'height' : size.height,
              'background-color' : o.color
              })
          );
        $(this).append(
          $('<div />')
            .addClass('animatedBorderSprite')
            .css({
              'top' : offset.top,
              'left' : offset.left + size.width,
              'width' : o.size,
              'height' : size.height,
              'background-color' : o.color
              })
          );
        });
      }
  });
})(jQuery);