>Multiple Barcodes in a single HTML

Multiple barcodes in a single HTML web page

GS1-128

(00)12345000000000000

I2of5

98765432

This example demonstrates two barcodes in a HTML web page.

The steps to insert two different barcodes (e.g. GS1-128 and I2of5) are

1. Insert the following tags to the <Body> of the HTML file.

                                        <div class="barcodeVal1">(00)12345000000000000</div>

                                        <div class="humanReadable1"></div>

                                        <div class="barcodeVal2">98765432</div>

                                        <div class="humanReadable2"></div>

barcodeVal1 represents the data for GS1-128 while barcodeVal2 represents the data for I2of5.

2. Include the javascript files for barcode generation into the HTML. As we will be generating GS1-128 and I2of5, we need to include

                                        <script src="barcode.js"></script>

                                        <script src="gs1128.js"></script>

                                        <script src="i2of5.js"></script>

                                        <script src="app.js"></script>

3. The javascript app.js has to be edited to process the data within barcodeVal1 and barcodeVal2. It basically instantiates the UCCEAN (GS1-128) and I2of5 classes and uses them to perform the encoding.

                                        
                                            var I2of5 = net.technoriver.I2of5;

                                            window.onload = function () {

                                              var elementBarcode1 = document.getElementsByClassName("barcodeVal1");

                                              for (var x = 0; x < elementBarcode1.length; x++) {

                                               var barcode1 = new UCCEAN(elementBarcode1[x].innerHTML);

                                               var result1 = barcode1.encode();

                                               var hrText1 = barcode1.getHRText();

                                               elementBarcode1[x].innerHTML = result1;

                                               var elementHumanReadableText1 = document.getElementsByClassName("humanReadable1");

                                               elementHumanReadableText1[x].innerHTML = hrText1;

                                              }

                                              var elementBarcode2 = document.getElementsByClassName("barcodeVal2");

                                              for (var x = 0; x < elementBarcode2.length; x++) {

                                               var barcode2 = new I2of5(elementBarcode2[x].innerHTML, true);

                                               var result2 = barcode2.encode();

                                               var hrText2 = barcode2.getHRText();

                                               elementBarcode2[x].innerHTML = result2;

                                               var elementHumanReadableText2 = document.getElementsByClassName("humanReadable2");

                                               elementHumanReadableText2[x].innerHTML = hrText2;

                                              }

                                            };

4. Add the web barcode fonts for GS1-128 and I2of5 to the CSS of the HTML. To do so, we define the font-families WebCode128 and WebCodeI2of5 and assign them to barcodeVal1 and barcodeVal2 respectively.

                                    
                                        <style type="text/css" media="screen,print">

                                        @font-face {

                                          font-family: WebCode128;

                                          src: url("WebCode128H3.eot");

                                          src: url("WebCode128H3.otf") format("opentype"), url("WebCode128H3.woff") format("woff");

                                        }

                                        div.barcodeVal1 {

                                          font-weight: normal;

                                          font-style: normal;

                                          line-height: normal;

                                          font-family: 'WebCode128', sans-serif;

                                          font-size: 32px;

                                        }

                                        div.barcodeVal1 {

                                          white-space:pre;

                                        }

                                        @font-face {

                                          font-family: WebCodeI2of5;

                                          src: url("WebCodeI2of5H3.eot");

                                          src: url("WebCodeI2of5H3.otf") format("opentype"), url("WebCodeI2of5H3.woff") format("woff");

                                        }

                                        div.barcodeVal2 {

                                          font-weight: normal;

                                          font-style: normal;

                                          line-height: normal;

                                          font-family: 'WebCodeI2of5', sans-serif;

                                          font-size: 32px;

                                        }

                                        div.barcodeVal2 {

                                          white-space:pre;

                                        }

                                        body {

                                          font-family: 'Tahoma', sans-serif;

                                        }

                                        </style>