Customizing the appearance in JQuery Barcode widget

Customizing the Barcode color

A page or printed media with barcode often appears colorful in the background and surrounding region with other contents. In such cases the barcode can also be customized to suit the needs. You can achieve this by changing the darkBarColor, lightBarColor and textColor properties.

NOTE

This color customization is possible only for one dimensional barcodes and it is not supported for two dimensional barcodes.

  • javascript
  • $("#barcode").ejBarcode({
       text: "B5330E8278BC4C797C49DD3ED5AD9715",
       symbologyType: "code39",
       displayText: true,
       darkBarColor: "blue",
       quietZone: {
          all: 30
       }
    });

    Execute the above code to render the following output.

    Customizing-the-appearance_img2

    Customizing the Barcode dimension

    The height of the barcode can be changed using the barHeight property. The equivalent property to change the block size for two dimensional barcode is xDimension.

  • javascript
  • $("#barcode").ejBarcode({
       text: "B5330E8278BC4C797C49DD3ED5AD9715",
       symbologyType: "code39",
       displayText: true,
       darkBarColor: "#990099",
       barHeight: 45,
       quietZone: {
          all: 30
       }
    });

    Execute the above code to render the following output.

    Customizing-the-appearance_img3

    Advance size customization of the particular elements in the barcode can be done using barcodeToTextGapHeight, narrowBarWidth, quietZone, quietZone-all, quietZone-bottom, quietZone-left, quietZone-right, quietZone-top and wideBarWidth properties.

  • javascript
  • $("#barcode").ejBarcode({
       text: "B5330E8278BC4C797C49DD3ED5AD9715",
       symbologyType: "code39",
       barcodeToTextGapHeight: 50,
       narrowBarWidth: 5,
       darkBarColor: "#990099",
       barHeight: 45,
       wideBarWidth: 5,
       quietZone: {
          all: 30
       }
    });

    Customizing the text

    In one dimensional barcodes, an additional character is added as start and stop delimiters using encodeStartStopSymbol. These symbols are optional and the unique of the symbol allows the reader to determine the direction of the barcode being scanned.

  • javascript
  • $("#barcode").ejBarcode({
        text: "SYNCFUSION",
        symbologyType: "code39",
        encodeStartStopSymbol: false
     });

    To hide the text in the barcode use the property displayText.

  • javascript
  • $("#barcode").ejBarcode({
         text: "SYNCFUSION",
         symbologyType: "code39",
         displayText: false
     });

    Visibility of barcode

    To check if the barcode control is enabled use the property enabled and the event load will be triggered once the barcode is loaded.

    To disable the barcode use the method disable().

  • javascript
  • // disable the barcode
    $("#barcode").ejBarcode("disable");

    To enable the barcode use the method enable().

  • javascript
  • // enable the barcode
    $("#barcode").ejBarcode("enable");