Ajax Loader
HTML 
<!doctype html>
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8">
5
    <title>CSS Barcode</title>
6
    <link rel="stylesheet" href="./custom.css">
7
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
8
  </head>
9
  <body>
10
    <div class="holder">
11
      <div id="red-strike"></div>
12
      <div id="upc-a">
13
        <div id="upc-wrap">
14
          <!--NOTE: the CSS structure is odd due to: http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items -->
15
          <!-- begin UPC -->
16
          <div
17
          class="m e long"></div><div
18
          class="m o long"></div><div
19
          class="m e long"></div><!--
20
Quiet Zone
21
--><div class="l"><!--
22
begin L --><div
23
24
          id="l1"><div
25
26
          class="m o"></div><div
27
          class="m o"></div><div
28
          class="m o"></div><div
29
          class="m e"></div><div
30
          class="m e"></div><div
31
          class="m o"></div><div
32
          class="m e"><!--
33
 
34
 --></div></div><div
35
        id="l2"><div
36
37
        class="m o"></div><div
38
        class="m o"></div><div
39
        class="m e"></div><div
40
        class="m o"></div><div
41
        class="m o"></div><div
42
        class="m e"></div><div
43
        class="m e"><!--
44
 
45
 --></div></div><div
46
        id="l3"><div
47
48
        class="m o"></div><div
49
        class="m o"></div><div
50
        class="m o"></div><div
51
        class="m e"></div><div
52
        class="m e"></div><div
53
        class="m o"></div><div
54
        class="m e"><!--
55
 
56
 --></div></div><div
57
        id="l4"><div
58
59
        class="m o"></div><div
60
        class="m e"></div><div
61
        class="m o"></div><div
62
        class="m e"></div><div
63
        class="m e"></div><div
64
        class="m e"></div><div
65
        class="m e"><!--
66
 
67
 --></div></div><div
68
        id="l5"><div
69
70
        class="m o"></div><div
71
        class="m o"></div><div
72
        class="m e"></div><div
73
        class="m o"></div><div
74
        class="m o"></div><div
75
        class="m e"></div><div
76
        class="m e"><!--
77
 
78
 --></div></div><div
79
        id="l6"><div
80
81
        class="m o"></div><div
82
        class="m e"></div><div
83
        class="m o"></div><div
84
        class="m e"></div><div
85
        class="m e"></div><div
86
        class="m e"></div><div
87
        class="m e"><!--
88
 
89
end L -->
90
        </div></div></div><!--
91
begin M
92
--><div
93
        class="m o long"></div><div
94
        class="m e long"></div><div
95
        class="m o long"></div><div
96
        class="m e long"></div><div
97
        class="m o long"></div><!--
98
end M
99
--><div class="r"><!--
100
begin R --><div
101
102
        id="r1"><div
103
104
        class="m o"></div><div
105
        class="m e"></div><div
106
        class="m e"></div><div
107
        class="m e"></div><div
108
        class="m o"></div><div
109
        class="m e"></div><div
110
        class="m e"><!--
111
 
112
 --></div></div><div
113
        id="r2"><div
114
115
        class="m o"></div><div
116
        class="m o"></div><div
117
        class="m e"></div><div
118
        class="m o"></div><div
119
        class="m o"></div><div
120
        class="m e"></div><div
121
        class="m e"><!--
122
 
123
 --></div></div><div
124
        id="r3"><div
125
126
        class="m o"></div><div
127
        class="m e"></div><div
128
        class="m e"></div><div
129
        class="m o"></div><div
130
        class="m e"></div><div
131
        class="m e"></div><div
132
        class="m e"><!--
133
 
134
 --></div></div><div
135
        id="r4"><div
136
137
        class="m o"></div><div
138
        class="m e"></div><div
139
        class="m e"></div><div
140
        class="m e"></div><div
141
        class="m e"></div><div
142
        class="m o"></div><div
143
        class="m e"><!--
144
 
145
 --></div></div><div
146
        id="r5"><div
147
148
        class="m o"></div><div
149
        class="m e"></div><div
150
        class="m e"></div><div
151
        class="m o"></div><div
152
        class="m e"></div><div
153
        class="m e"></div><div
154
        class="m e"><!--
155
 
156
 --></div></div><div
157
        id="r6"><div
158
159
        class="m o"></div><div
160
        class="m e"></div><div
161
        class="m o"></div><div
162
        class="m e"></div><div
163
        class="m e"></div><div
164
        class="m e"></div><div
165
        class="m e"><!--
166
 
167
end R
168
--></div></div></div><!--
169
Quiet Zone
170
--><div
171
        class="m e long"></div><div
172
        class="m o long"></div><div
173
        class="m e long"></div>
174
        <!-- end UPC -->
175
      </div><!-- end upc-wrap -->
176
177
      <div id="l-digits" class="digits">20626</div>
178
      <div id="r-digits" class="digits">72838</div>
179
      </div><!-- end upc-a -->
180
181
      <div id="query">
182
        Type barcode #: <input id="barcodenum" type="text" name="barcodenum" maxlength="11" />
183
184
        <p class="instructions">
185
          <strong>UPC-A barcodes</strong> have 12 digits.
186
        </p>
187
        <p>
188
          <a href="http://en.wikipedia.org/wiki/Universal_Product_Code">First digit is UPC code type. Next five is manufacturer number. The next five is product number. Last digit is calculated checksum.</a>
189
        </p>
190
        <p>
191
          This barcode generator takes 11 digits and prints 10 digits (5 manufacturer and 5 product number) below. The last digit is automatically calculated. All 12 digits are reflected in the barcode graphic.
192
        </p>
193
        <p id="result">
194
          You entered <span id="entered_bc">x</span>. The checksum digit was <span id="calc_check">y</span>. Your barcode above is encoded as <span id="all_digits">z</span>.
195
        </p>
196
      </div>
197
    </div>
198
  </body>
199
</html>
 
CSS 
/* css barcode */
1
/* css barcode */
2
/* by rexfeng 2012 */
3
 
4
html, body {height: 400px;}
5
 
6
body {
7
  background-color: #fff;
8
  padding: 1px;
9
  color: #000;
10
  font-family: Helvetica, Arial;
11
}
12
 
13
.holder {
14
  width: 280px;
15
  position: relative;
16
  margin: 30px auto;
17
}
18
 
19
#query {
20
  padding: 15px;
21
  width: 280px;
22
  background: #eee;
23
  border-radius: 5px;
24
  border: 1px solid #ccc;
25
  color: #888;
26
  font-size: 13px;
27
  margin-top: 30px;
28
}
29
 
30
#query a {
31
  text-decoration: none;
32
  color: blue;
33
}
34
 
35
#barcodenum {
36
}
37
 
38
.instructions {
39
  color: #333;
40
}
41
 
42
#upc-a {
43
  background: #eee;
44
  border-radius: 5px;
45
  border: 1px solid #ccc;
46
  width: 285px;
47
  padding: 13px;
48
}
49
 
50
#upc-wrap {
51
  width: 285px; /* 95 *3 */
52
  height: 186px; /* 62 *3 */
53
}
54
 
55
.m { /* module 1px *3 width */
56
  width: 3px;
57
  height: 179px;  /* 186 / 244 * 235 = 179px */
58
  display: inline-block;
59
  vertical-align: top;
60
}
61
 
62
.long {
63
  height: 186px;
64
}
65
 
66
.o {
67
  background-color: #fff;
68
}
69
 
70
.e {
71
  background-color: #000;
72
}
73
 
74
.l {
75
  display: inline-block;
76
}
77
 
78
.r {
79
  display: inline-block;
80
}
81
 
82
.r .o.m {
83
  background-color: #000;
84
}
85
 
86
.r .e.m {
87
  background-color: #fff;
88
}
89
 
90
#l1, #l2, #l3, #l4, #l5, #l6 {
91
  display: inline-block;
92
}
93
 
94
#r1, #r2, #r3, #r4, #r5, #r6 {
95
  display: inline-block;
96
}
97
 
98
.digits {
99
  font-family: monospace, Courier;
100
  font-size: 2em;
101
  display: inline;
102
  position: relative;
103
  top: -10px;
104
  letter-spacing: 3px;
105
}
106
 
107
#l-digits {
108
  margin-left: 20px;
109
}
110
 
111
#r-digits {
112
  margin-left: 24px;
113
}
114
 
115
#red-strike {
116
  width: 301px;
117
  height: 3px;
118
  background-color: red;
119
  position: absolute;
120
  margin: 100px 30px 0 22px;
121
}
 
JavaScript 
$(document).ready(function() {
1
$(document).ready(function() {
2
  // css barcode w/ js
3
  // by rexfeng 2012
4
 
5
  $('#result').hide(); // set initially hidden
6
  $('#red-strike').hide(); // set initially hidden
7
 
8
  $('input[name=barcodenum]').keyup(function() {
9
    var bcnum = $('input[name=barcodenum]').val();
10
    var intcheck = /^\d+$/; // regex only 0-9
11
12
    if ( (intcheck.test(bcnum)) && (bcnum.length == 11) ) {
13
 
14
      // update graphics for first 11
15
        var elements = ['l1','l2','l3','l4','l5','l6','r1','r2','r3','r4','r5'];
16
 
17
        jQuery.each(elements, function(i, val) {
18
          var code_update = bcnum.substring(i,i+1);
19
          var bcx = eval("bc".concat(code_update));
20
          $("#" + this).html(bcx);
21
        });
22
 
23
      // calculate last digit and update
24
 
25
        var bcdigits = bcnum.split('');
26
 
27
        var checksum_s1 = 0; //init odd holder
28
        var checksum_s2 = 0; //init even holder
29
 
30
        jQuery.each(bcdigits, function(i,val){
31
          if(i%2 == 0) {
32
            checksum_s1 += parseInt(val);
33
          } else {
34
            checksum_s2 += parseInt(val);
35
          }
36
        });
37
 
38
        var checksum_s3 = checksum_s1*3 + checksum_s2;
39
 
40
        var s3_string = checksum_s3.toString();
41
        var s3_last = s3_string.substring(s3_string.length - 1);
42
 
43
        if (s3_last == "0") {
44
          $("#r6").html(bc0);
45
          var diff = 0;
46
        } else {
47
          var diff = 10 - parseInt(s3_last);
48
          var diff_bc = eval("bc".concat(diff));
49
          $("#r6").html(diff_bc);
50
        };
51
 
52
      // update digits displayed
53
      // by rexfeng 2012
54
        $('#l-digits').text(bcnum.slice(1,6));
55
        $('#r-digits').text(bcnum.slice(6,11));
56
 
57
      // toggle hidden fields
58
        $('#red-strike').hide(); // set hidden
59
        $("#entered_bc").text(bcnum);
60
        $("#calc_check").text(diff);
61
        $("#all_digits").text(bcnum + diff);
62
        $('#result').show();
63
 
64
    } else {
65
66
      // error msg
67
        $('#l-digits').text("Enter digits");
68
        $('#r-digits').text("");
69
        $('#red-strike').show();
70
        $('#result').hide();
71
    }
72
  });
73
 
74
// define barcode graphics
75
    var bc0 = "<div \
76
             class=\"m o\"><\/div><div \
77
             class=\"m o\"><\/div><div \
78
             class=\"m o\"><\/div><div \
79
             class=\"m e\"><\/div><div \
80
             class=\"m e\"><\/div><div \
81
             class=\"m o\"><\/div><div \
82
             class=\"m e\">\
83
             <\/div>";
84
 
85
    var bc1 = "<div \
86
             class=\"m o\"><\/div><div \
87
             class=\"m o\"><\/div><div \
88
             class=\"m e\"><\/div><div \
89
             class=\"m e\"><\/div><div \
90
             class=\"m o\"><\/div><div \
91
             class=\"m o\"><\/div><div \
92
             class=\"m e\">\
93
             <\/div>";
94
 
95
    var bc2 = "<div \
96
             class=\"m o\"><\/div><div \
97
             class=\"m o\"><\/div><div \
98
             class=\"m e\"><\/div><div \
99
             class=\"m o\"><\/div><div \
100
             class=\"m o\"><\/div><div \
101
             class=\"m e\"><\/div><div \
102
             class=\"m e\">\
103
             <\/div>";
104
 
105
    var bc3 = "<div \
106
             class=\"m o\"><\/div><div \
107
             class=\"m e\"><\/div><div \
108
             class=\"m e\"><\/div><div \
109
             class=\"m e\"><\/div><div \
110
             class=\"m e\"><\/div><div \
111
             class=\"m o\"><\/div><div \
112
             class=\"m e\">\
113
             <\/div>";
114
 
115
    var bc4 = "<div \
116
             class=\"m o\"><\/div><div \
117
             class=\"m e\"><\/div><div \
118
             class=\"m o\"><\/div><div \
119
             class=\"m o\"><\/div><div \
120
             class=\"m o\"><\/div><div \
121
             class=\"m e\"><\/div><div \
122
             class=\"m e\">\
123
             <\/div>";
124
 
125
    var bc5 = "<div \
126
             class=\"m o\"><\/div><div \
127
             class=\"m e\"><\/div><div \
128
             class=\"m e\"><\/div><div \
129
             class=\"m o\"><\/div><div \
130
             class=\"m o\"><\/div><div \
131
             class=\"m o\"><\/div><div \
132
             class=\"m e\">\
133
             <\/div>";
134
 
135
    var bc6 = "<div \
136
             class=\"m o\"><\/div><div \
137
             class=\"m e\"><\/div><div \
138
             class=\"m o\"><\/div><div \
139
             class=\"m e\"><\/div><div \
140
             class=\"m e\"><\/div><div \
141
             class=\"m e\"><\/div><div \
142
             class=\"m e\">\
143
             <\/div>";
144
 
145
    var bc7 = "<div \
146
             class=\"m o\"><\/div><div \
147
             class=\"m e\"><\/div><div \
148
             class=\"m e\"><\/div><div \
149
             class=\"m e\"><\/div><div \
150
             class=\"m o\"><\/div><div \
151
             class=\"m e\"><\/div><div \
152
             class=\"m e\">\
153
             <\/div>";
154
 
155
    var bc8 = "<div \
156
             class=\"m o\"><\/div><div \
157
             class=\"m e\"><\/div><div \
158
             class=\"m e\"><\/div><div \
159
             class=\"m o\"><\/div><div \
160
             class=\"m e\"><\/div><div \
161
             class=\"m e\"><\/div><div \
162
             class=\"m e\">\
163
             <\/div>";
164
 
165
    var bc9 = "<div \
166
             class=\"m o\"><\/div><div \
167
             class=\"m o\"><\/div><div \
168
             class=\"m o\"><\/div><div \
169
             class=\"m e\"><\/div><div \
170
             class=\"m o\"><\/div><div \
171
             class=\"m e\"><\/div><div \
172
             class=\"m e\">\
173
             <\/div>";
174
 
175
});
 

CSS Barcode (UPC-A) Generator

CSSDeck G+