This plugin can be used to create customized nutrition labels like the ones that can be seen on
http://www.nutritionix.com for normal html page labels and
http://m.nutritionix.com for mobile html page labels.
You can read more about this on this
blog post
Version 9.0.1 and above now allow users to use the Legacy version (original version of the plugin) or the
2018 version or the
UK version
Main Demo Page
These are the default values on the plugin that you need to change to create a customized nutrition label to suit your needs.
//default fixedWidth of the nutrition label width : 280, //to allow custom width - usually needed for mobile sites allowCustomWidth : false, widthCustom : 'auto', //to allow the label to have no border allowNoBorder : false, //to enable rounding of the nutritional values based on the FDA rounding rules http://goo.gl/RMD2O allowFDARounding : false, //to enabled the google analytics event logging allowGoogleAnalyticsEventLog : false, gooleAnalyticsFunctionName : 'ga', //enable triggering of user function on quantity change: global function name userFunctionNameOnQuantityChange: null, //enable triggering of user function on quantity change: handler instance userFunctionOnQuantityChange: null, //when set to true, this will hide the values if they are not applicable hideNotApplicableValues : false, //when set to true, this will hide all the percent daily values hidePercentDailyValues : false, //the brand name of the item for this label (eg. just salad) brandName : 'Brand where this item belongs to', //to scroll the ingredients if the innerheight is > scrollHeightComparison scrollLongIngredients : false, scrollHeightComparison : 100, //the height in px of the ingredients div scrollHeightPixel : 95, //this is to set how many decimal places will be shown on the nutrition values (calories, fat, protein, vitamin a, iron, etc) decimalPlacesForNutrition : 1, //this is to set how many decimal places will be shown for the "% daily values*" decimalPlacesForDailyValues : 0, //this is to set how many decimal places will be shown for the serving unit quantity textbox decimalPlacesForQuantityTextbox : 1, //to scroll the item name if the jQuery.height() is > scrollLongItemNamePixel scrollLongItemName : true, scrollLongItemNamePixel : 36, //this is needed to fix some issues on the 2018 label as the layout of the label is very different than the legacy one scrollLongItemNamePixel2018Override : 34, //show the customizable link at the bottom showBottomLink : false, //url for the customizable link at the bottom urlBottomLink : 'http://www.nutritionix.com', //link name for the customizable link at the bottom nameBottomLink : 'Nutritionix', //this value can be changed and the value of the nutritions will be affected directly //the computation is "current nutrition value" * "serving unit quantity value" = "final nutrition value" //this can't be less than zero, all values less than zero is converted to zero //the textbox to change this value is visible / enabled by default //if the initial value of the serving size unit quantity is less than or equal to zero, it is converted to 1.0 //when enabled, user can change this value by clicking the arrow or changing the value on the textbox and pressing enter. //the value on the label will be updated automatically //different scenarios and the result if this feature is enabled //NOTE 1: [ ] => means a textbox will be shown //NOTE 2: on all cases below showServingUnitQuantityTextbox == true AND showServingUnitQuantity == true //if showServingUnitQuantity == false, the values that should be on the 'serving size div' are empty or null //CASE 1a: valueServingSizeUnit != '' (AND NOT null) && valueServingUnitQuantity >= 0 //RESULT: textServingSize [valueServingUnitQuantity] valueServingSizeUnit //NOTE 3: on all cases below showServingUnitQuantityTextbox == true AND showItemName == true //if showItemName == false, the values that should be on the 'item name div' are empty or null //CASE 1b: valueServingSizeUnit != '' (AND NOT null) && valueServingUnitQuantity <= 0 //RESULT: [valueServingUnitQuantity default to 1.0] itemName //CASE 3a: valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity > 0 //RESULT: [valueServingUnitQuantity] itemName //CASE 3b: valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity <= 0 //RESULT: [valueServingUnitQuantity default to 1.0] itemName //NOTE 4: to see the different resulting labels, check the html/demo-texbox-case*.html files valueServingUnitQuantity : 1.0, valueServingSizeUnit : '', showServingUnitQuantityTextbox : true, //the name of the item for this label (eg. cheese burger or mayonnaise) itemName : 'Item / Ingredient Name', showServingUnitQuantity : true, //allow hiding of the textbox arrows hideTextboxArrows : false, //these 2 settings are used internally. //this is just added here instead of a global variable to prevent a bug when there are multiple instances of the plugin like on the demo pages originalServingUnitQuantity : 0, //this is used to fix the computation issue on the textbox nutritionValueMultiplier : 1, //this is used for the computation of the servings per container totalContainerQuantity : 1, //default calorie intake calorieIntake : 2000, //these are the recommended daily intake values dailyValueTotalFat : 65, //this should be 70 for the uk version dailyValueSatFat : 20, dailyValueCholesterol : 300, dailyValueSodium : 2400, dailyValuePotassium : 3500, dailyValuePotassium_2018 : 4700, //this is for the 2018 version dailyValueCarb : 300, //this should be 260 for the uk version dailyValueFiber : 25, dailyValueCalcium : 1300, //this is for the 2018 version dailyValueIron : 18, dailyValueVitaminD : 20, dailyValueAddedSugar : 50, dailyValueSugar : 100, //this should be 90 for the uk version dailyValueEnergyKcal : 2000, //this is for the uk version dailyValueProtein : 50, //this is for the uk version dailyValueSalt : 6, //this is for the uk version //these values can be change to hide some nutrition values showCalories : true, showFatCalories : true, showTotalFat : true, showSatFat : true, showTransFat : true, showPolyFat : false, showMonoFat : false, showCholesterol : true, showSodium : true, showPotassium: false, //this is for the legacy version showPotassium_2018: true, //this is for the 2018 version showTotalCarb : true, showFibers : true, showSugars : true, showAddedSugars : true, showSugarAlcohol : false, //this is for the 2018 version showProteins : true, showVitaminA : true, showVitaminC : true, showVitaminD : true, //this is for the 2018 version showCalcium : true, //this is for the 2018 version showIron : true, //these values can be change to hide some nutrition daily values //take note that the setting 'hidePercentDailyValues' override these values showDailyTotalFat : true, showDailySatFat : true, showDailyCholesterol : true, showDailySodium : true, showDailyPotassium: true, //this is for the legacy version showDailyPotassium_2018: true, //this is for the 2018 version showDailyTotalCarb : true, showDailyFibers : true, showDailySugars : false, showDailyAddedSugars : true, //this is for the 2018 version showDailyVitaminD : true, //this is for the 2018 version showDailyCalcium : true, //this is for the 2018 version showDailyIron : true, showDailyProtein : true, //this is for the uk version showDailyEnergy : true, //this is for the uk version //to show the 'amount per serving' text showAmountPerServing : true, //to show the 'servings per container' data and replace the default 'Serving Size' value (without unit and servings per container text and value) showServingsPerContainer : false, //to show the item name. there are special cases where the item name is replaced with 'servings per container' value showItemName : true, //to show the item name for the UK version. the main difference with the previous setting is this feature is set to false by default. the UK version will ignore the showItemName setting showItemNameForUK : false, //show the brand where this item belongs to showBrandName : false, //to show the ingredients value or not showIngredients : true, //to show the calorie diet info at the bottom of the label showCalorieDiet : false, //to show the customizable footer which can contain html and js codes showCustomFooter : false, //see https://github.com/nutritionix/nutrition-label/issues/93 and then https://github.com/nutritionix/nutrition-label/issues/104 indentSugarAndRemoveBoldStyleFor2018Label : true, //to show the disclaimer text or not showDisclaimer : false, //the height in px of the disclaimer div scrollDisclaimerHeightComparison : 100, scrollDisclaimer : 95, valueDisclaimer : 'Please note that these nutrition values are estimated based on our standard serving portions. ' + 'As food servings may have a slight variance each time you visit, please expect these values to be with in 10% +/- of your actual meal. ' + 'If you have any questions about our nutrition calculator, please contact Nutritionix.', ingredientLabel : 'INGREDIENTS:', valueCustomFooter : '', //the are to set some values as 'not applicable'. this means that the nutrition label will appear but the value will be a 'gray dash' naCalories : false, naFatCalories : false, naTotalFat : false, naSatFat : false, naTransFat : false, naPolyFat : false, naMonoFat : false, naCholesterol : false, naSodium : false, naPotassium : false, //this is for the legacy version naPotassium_2018 : false, //this is for the 2018 version naTotalCarb : false, naFibers : false, naSugars : false, naAddedSugars : false, //this is for the 2018 version naSugarAlcohol : false, naProteins : false, naVitaminA : false, naVitaminC : false, naVitaminD : false, //this is for the 2018 version naCalcium : false, //this is for the 2018 version naIron : false, //these are the default values for the nutrition info valueServingWeightGrams : 0, valueServingPerContainer : 1, valueCalories : 0, valueFatCalories : 0, valueTotalFat : 0, valueSatFat : 0, valueTransFat : 0, valuePolyFat : 0, valueMonoFat : 0, valueCholesterol : 0, valueSodium : 0, valuePotassium : 0, //this is for the legacy version valuePotassium_2018 : 0, //this is for the 2018 version valueTotalCarb : 0, valueFibers : 0, valueSugars : 0, valueAddedSugars : 0, //this is for the 2018 version valueSugarAlcohol : 0, valueProteins : 0, valueVitaminA : 0, valueVitaminC : 0, valueVitaminD : 0, //this is for the 2018 version valueCalcium : 0, //this is for the 2018 version valueIron : 0, //customizable units for the values unitCalories : '', unitFatCalories : '', unitTotalFat : ' grams', unitSatFat : ' grams', unitTransFat : ' grams', unitPolyFat : ' grams', unitMonoFat : ' grams', unitCholesterol : ' milligrams', unitSodium : ' milligrams', unitPotassium : ' milligrams', //this is for the legacy version unitPotassium_base : ' milligrams', //this is for the 2018 version unitPotassium_percent : '%', //this is for the 2018 version unitTotalCarb : ' grams', unitFibers : ' grams', unitSugars : ' grams', unitAddedSugars : ' grams', //this is for the 2018 version unitSugarAlcohol : ' grams', unitProteins : ' grams', unitVitaminA : '%', unitVitaminC : '%', unitVitaminD_base : ' micrograms', //this is for the 2018 version unitVitaminD_percent : '%', //this is for the 2018 version unitCalcium : '%', //this is for the 2018 version unitCalcium_base : ' milligrams', //this is for the 2018 version unitCalcium_percent : '%', //this is for the 2018 version unitIron : '%', unitIron_base : ' milligrams', //this is for the 2018 version unitIron_percent : '%', //this is for the 2018 version unitServingWeight : ' grams', //this is for the 2018 version unitEnergy_kj : 'kj', //this is for the uk version unitEnergy_kcal : 'kcal', //this is for the uk version unitSalt : 'g', //this is for the uk version unitGramOrMlForThePer100Part : 'g', //this is for the uk version //these are the values for the optional calorie diet valueCol1CalorieDiet : 2000, valueCol2CalorieDiet : 2500, valueCol1DietaryTotalFat : 0, valueCol2DietaryTotalFat : 0, valueCol1DietarySatFat : 0, valueCol2DietarySatFat : 0, valueCol1DietaryCholesterol : 0, valueCol2DietaryCholesterol : 0, valueCol1DietarySodium : 0, valueCol2DietarySodium : 0, valueCol1DietaryPotassium : 0, valueCol2DietaryPotassium : 0, valueCol1DietaryTotalCarb : 0, valueCol2DietaryTotalCarb : 0, valueCol1Dietary : 0, valueCol2Dietary : 0, //these text settings is so you can create nutrition labels in different languages or to simply change them to your need textNutritionFacts : 'Nutrition Facts', textDailyValues : 'Daily Value', textServingSize : 'Serving Size:', textServingsPerContainer : 'Servings Per Container', textAmountPerServing : 'Amount Per Serving', textCalories : 'Calories', textFatCalories : 'Calories from Fat', textTotalFat : 'Total Fat', textSatFat : 'Saturated Fat', textTransFat : 'Trans Fat', textPolyFat : 'Polyunsaturated Fat', textMonoFat : 'Monounsaturated Fat', textCholesterol : 'Cholesterol', textSodium : 'Sodium', textPotassium : 'Potassium', textTotalCarb : 'Total Carbohydrates', textFibers : 'Dietary Fiber', textSugars : 'Sugars', textAddedSugars1 : 'Includes ', textAddedSugars2 : ' Added Sugars', //this is for the 2018 version textSugarAlcohol : 'Sugar Alcohol', textProteins : 'Protein', textVitaminA : 'Vitamin A', textVitaminC : 'Vitamin C', textVitaminD : 'Vitamin D', //this is for the 2018 version textCalcium : 'Calcium', //this is for the 2018 version textIron : 'Iron', textNotApplicable : '-', ingredientList : 'None', textPercentDailyPart1 : 'Percent Daily Values are based on a', textPercentDailyPart2 : 'calorie diet', textPercentDaily2018VersionPart1 : 'The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. ', textPercentDaily2018VersionPart2 : ' calories a day is used for general nutrition advice.', textGoogleAnalyticsEventCategory : 'Nutrition Label', textGoogleAnalyticsEventActionUpArrow : 'Quantity Up Arrow Clicked', textGoogleAnalyticsEventActionDownArrow : 'Quantity Down Arrow Clicked', textGoogleAnalyticsEventActionTextbox : 'Quantity Textbox Changed', textUKTypicalValues : 'Typical Values', //this is for the uk version textUKReferenceIntake : 'Reference intake of an average adult', //this is for the uk version textUKPer100 : 'Per', //this is for the uk version textUKDefaultServingNameIfEmpty : 'Serving', //this is for the uk version textDataNotAvailable : 'Data not available', textAriaLabelIncreaseQuantityArrow : 'Increase the Quantity Arrow', textAriaLabelDecreaseQuantityArrow : 'Decrease the Quantity Arrow', textAriaLabelChangeQuantityTextbox : 'Change the Quantity Textbox', textCalorieDietHtmlLegacyLessThan : 'Less than', textCalorieDietHtmlLegacyDietary : 'Dietary', //if the showLegacyVersion is true, the system will show the legacy version //if both the showLegacyVersion and showUKVersion are false, the system will show the 2018 version //if both the showLegacyVersion is false and showUKVersion is true, the system will show the uk version showLegacyVersion : true, showUKVersion : false, //for the uk label, If the serving name is empty, have it default to "Serving" convertEmptyServingNametoServingForUKLabel: true, //more details here https://github.com/nutritionix/nutrition-label/issues/77#issuecomment-323510972 legacyVersion: 1
There are a lot of sample on our demo page on how the plugin can be used and how it can be customized to fit your need