Most basic use of the plugin
$('#test1').nutritionLabel({
valueServingWeightGrams : 23.65,
showLegacyVersion : false
});
Giving specific nutrition label values and hiding some of the parts of the nutrition label
$('#test2').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : false,
itemName : 'Bleu Cheese Dressing',
ingredientList : 'Bleu Cheese Dressing',
decimalPlacesForQuantityTextbox : 2,
valueServingUnitQuantity : 1,
allowFDARounding : true,
decimalPlacesForNutrition : 2,
showPolyFat : false,
showMonoFat : false,
valueCalories : 450,
valueFatCalories : 430,
valueTotalFat : 48,
valueSatFat : 6,
valueTransFat : 0,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminD : 1.22,
valuePotassium_2018 : 4.22,
valueCalcium : 7.22,
valueIron : 11.22,
valueAddedSugars : 17,
valueCaffeine : 15.63,
showLegacyVersion : false
});
Similar to example #2 but with different plugin options. One thing to note is the use of serving size, serving size unit and showing the serving container to overwrite the default value (compare it to other examples to see the difference)
$('#test3').nutritionLabel({
valueServingWeightGrams : 23.65,
showItemName : false,
showServingsPerContainer : true,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour, Niacin, Iron, Thiamin Mononitrate, Riboflavin, Folic Acid), Sugar, Vegetable Oil (contains one or more of the following oils: Cottonseed Oil, Palm Oil, Soybean Oil), Water, Hydrogenated Vegetable Oil (Palm Kernel Oil, Palm Oil), High Fructose Corn Syrup, Cocoa Powder (Processed With Alkali), contains 2% or less of the following: Eggs, Nonfat Milk, Glycerin, Soy Flour, Corn Syrup Solids, Leavening (Sodium Acid Pyrophosphate, Baking Soda, Sodium Aluminum Phosphate), Preservatives (Potassium Sorbate, Sodium Propionate, Calcium Propionate), Salt, Distilled Monoglycerides, Dextrose, Food Starch-Modified (Corn and/or Wheat), Soy, Lecithin, Natural and Artificial Flavor, Mono- and Diglycerides, Spices, Tapioca Starch, Wheat Starch, Cellulose Gum, Guar Gum, Karaya Gum, colored with Extracts of Annatto and Turmeric, Artificial Color.',
showPolyFat : false,
showMonoFat : false,
showTransFat : false,
showFibers : false,
showVitaminD : false,
showPotassium_2018 : false,
showCalcium : false,
showIron : false,
showCaffeine : false,
valueServingUnitQuantity : 6,
valueServingSizeUnit : 'DONUTS',
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
showLegacyVersion : false
});
Similar to example #3 but the very tall ingredient list has a scroll to prevent a very tall nutrition label. The scroll height is customized too
$('#test4').nutritionLabel({
valueServingWeightGrams : 23.65,
scrollHeightPixel : 200,
scrollLongIngredients : true,
showItemName : false,
showServingsPerContainer : true,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour, Niacin, Iron, Thiamin Mononitrate, Riboflavin, Folic Acid), Sugar, Vegetable Oil (contains one or more of the following oils: Cottonseed Oil, Palm Oil, Soybean Oil), Water, Hydrogenated Vegetable Oil (Palm Kernel Oil, Palm Oil), High Fructose Corn Syrup, Cocoa Powder (Processed With Alkali), contains 2% or less of the following: Eggs, Nonfat Milk, Glycerin, Soy Flour, Corn Syrup Solids, Leavening (Sodium Acid Pyrophosphate, Baking Soda, Sodium Aluminum Phosphate), Preservatives (Potassium Sorbate, Sodium Propionate, Calcium Propionate), Salt, Distilled Monoglycerides, Dextrose, Food Starch-Modified (Corn and/or Wheat), Soy, Lecithin, Natural and Artificial Flavor, Mono- and Diglycerides, Spices, Tapioca Starch, Wheat Starch, Cellulose Gum, Guar Gum, Karaya Gum, colored with Extracts of Annatto and Turmeric, Artificial Color.',
showPolyFat : false,
showMonoFat : false,
showTransFat : false,
showFibers : false,
showVitaminD : false,
showPotassium_2018 : false,
showCalcium : false,
showIron : false,
valueServingUnitQuantity : 6,
valueServingSizeUnit : 'DONUTS',
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
valueCaffeine : 15.63,
showLegacyVersion : false
});
Similar to example #2 but with only a few visible values
$('#test5').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : false,
showAmountPerServing : false,
showCalorieDiet : true,
ingredientList : 'Balsamic Vinaigrette, BBQ Hickory, Steak Tips',
itemName : 'Fire Grilled Sirloin Tips',
showPolyFat : false,
showMonoFat : false,
showTransFat : false,
showVitaminD : false,
showPotassium_2018 : false,
showCalcium : false,
showIron : false,
showFatCalories : false,
showCaffeine : false,
valueCalories : 410,
valueTotalFat : 15,
valueSatFat : 4.5,
valueCholesterol : 105,
valueSodium : 1220,
valueTotalCarb : 20,
valueFibers : 0,
valueSugars : 18,
valueProteins : 48,
showLegacyVersion : false
});
Similar to example #2 but with different plugin options. Things to note are the use of 'not applicable' and text value instead of numerical value on sugar
$('#test6').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : false,
showAmountPerServing : false,
showIngredients : false,
itemName : 'Olive Tapenade',
naFatCalories : true,
naPolyFat : true,
naMonoFat : true,
naVitaminD : true,
naPotassium : true,
naCalcium : true,
naIron : true,
valueCalories : 800,
valueTotalFat : 66,
valueSatFat : 7,
valueTransFat : 0,
valueCholesterol : 0,
valueSodium : 1560,
valueTotalCarb : 46,
valueFibers : 2,
valueSugars : '<1g',
valueProteins : 7,
valueCaffeine : 15.63,
showLegacyVersion : false
});
Example where a few of the values are not applicable
$('#test7').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : false,
showAmountPerServing : false,
showIngredients : false,
itemName : 'Bar None Sliders Bison',
naFatCalories : true,
naTransFat : true,
naPolyFat : true,
naMonoFat : true,
naCholesterol : true,
naTotalCarb : true,
naFibers : true,
naSugars : true,
naProteins : true,
naVitaminD : true,
naPotassium : true,
naCalcium : true,
naIron : true,
naCaffeine : true,
valueCalories : 1110,
valueTotalFat : 58,
valueSatFat : 25,
valueSodium : 1750,
showLegacyVersion : false
});
All non-numeric values are automatically filtered and converted to numeric to prevent errors
$('#test8').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingsPerContainer : true,
valueServingUnitQuantity : '~12',
valueServingPerContainer : 'TBA',
valueServingWeightGrams : '<33',
valueCalories : '~100',
valueFatCalories : '<1',
valueTotalFat : '<1g',
valueSatFat : 'N/A',
valueTransFat : '<1g',
valuePolyFat : '~10g',
valueMonoFat : '<6g',
valueCholesterol : '~10mg',
valueSodium : '<5mg',
valueTotalCarb : 'Negligible',
valueFibers : '<1g',
valueSugars : 'n/a',
valueProteins : 'not applicable',
valueVitaminD : 'None',
valuePotassium_2018 : '~10%',
valueCalcium : '<5%',
valueIron : '<1%',
valueCaffeine : '~10mg',
showLegacyVersion : false
});
all values are not applicable and the N/A
$('#test9').nutritionLabel({
valueServingWeightGrams : 23.65,
naCalories : true,
naFatCalories : true,
naTotalFat : true,
naSatFat : true,
naTransFat : true,
naPolyFat : true,
naMonoFat : true,
naCholesterol : true,
naSodium : true,
naTotalCarb : true,
naFibers : true,
naSugars : true,
naProteins : true,
naVitaminD : true,
naPotassium : true,
naCalcium : true,
naIron : true,
naCaffeine : true,
showLegacyVersion : false
});
Similar to example #2 but with a few different settings - different calorie intake, decimal places for nutrition changed from 1 to 2, decimal places for the "% daily values" is changed from 0 to 2, showing the home page link at the bottom and customizing it
$('#test10').nutritionLabel({
valueServingWeightGrams : 23.65,
calorieIntake : 1222,
showServingUnitQuantity : false,
showIngredients : false,
itemName : 'Bleu Cheese Dressing',
decimalPlacesForNutrition : 2,
decimalPlacesForDailyValues : 2,
showBottomLink : true,
urlBottomLink : 'http://facebook.com',
nameBottomLink : 'Google Name but the URL is facebook\'s',
showPolyFat : false,
showMonoFat : false,
valueCalories : 450.10,
valueFatCalories : 430.23,
valueTotalFat : 48,
valueSatFat : 6.12,
valueTransFat : 0.00,
valueCholesterol : 30.90,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminD : 0,
valuePotassium_2018 : 0,
valueCalcium : 0,
valueIron : 0,
valueCaffeine : 15.63,
showLegacyVersion : false
});
Similar to example #2 but the "recommended daily intake values" are halved
$('#test11').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : false,
showIngredients : false,
itemName : 'Bleu Cheese Dressing',
dailyValueTotalFat : 32,
dailyValueSatFat : 10,
dailyValueCholesterol : 150,
dailyValueSodium : 1200,
dailyValueCarb : 150,
dailyValueFiber : 12,
showPolyFat : false,
showMonoFat : false,
valueCalories : 450,
valueFatCalories : 430,
valueTotalFat : 48,
valueSatFat : 6,
valueTransFat : 0,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminD : 0,
valuePotassium_2018 : 0,
valueCalcium : 0,
valueIron : 0,
valueCaffeine : 15.63,
showLegacyVersion : false
});
Similar to example #11 but the calorie diet is enabled (default calorie diet values)
$('#test12').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : false,
showIngredients : false,
showCalorieDiet : true,
itemName : 'Bleu Cheese Dressing',
dailyValueTotalFat : 32,
dailyValueSatFat : 10,
dailyValueCholesterol : 150,
dailyValueSodium : 1200,
dailyValueCarb : 150,
dailyValueFiber : 12,
showPolyFat : false,
showMonoFat : false,
valueCalories : 450,
valueFatCalories : 430,
valueTotalFat : 48,
valueSatFat : 6,
valueTransFat : 0,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminD : 0,
valuePotassium_2018 : 0,
valueCalcium : 0,
valueIron : 0,
valueCaffeine : 15.63,
showLegacyVersion : false
});
Similar to example #11 but the calorie diet is enabled (custom calorie diet values)
$('#test13').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : false,
showIngredients : false,
showCalorieDiet : true,
itemName : 'Bleu Cheese Dressing',
dailyValueTotalFat : 32,
dailyValueSatFat : 10,
dailyValueCholesterol : 150,
dailyValueSodium : 1200,
dailyValueCarb : 150,
dailyValueFiber : 12,
showPolyFat : false,
showMonoFat : false,
valueCalories : 450,
valueFatCalories : 430,
valueTotalFat : 48,
valueSatFat : 6,
valueTransFat : 0,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminD : 0,
valuePotassium_2018 : 0,
valueCalcium : 0,
valueIron : 0,
valueCaffeine : 15.63,
valueCol1CalorieDiet : 2200,
valueCol2CalorieDiet : 2700,
valueCol1DietaryTotalFat : 120,
valueCol2DietaryTotalFat : 180,
valueCol1DietarySatFat : 25,
valueCol2DietarySatFat : 65,
valueCol1DietaryCholesterol : 50,
valueCol2DietaryCholesterol : 70,
valueCol1DietarySodium : 10,
valueCol2DietarySodium : 15,
valueCol1DietaryTotalCarb : 200,
valueCol2DietaryTotalCarb : 270,
valueCol1Dietary : 33,
valueCol2Dietary : 76,
showLegacyVersion : false
});
Version 3.0.0 fix with the title being too close when the serving size and item name are hidden
$('#test14').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : false,
showItemName : false,
showLegacyVersion : false
});
Version 3.0.0 fix with the title being too close when the item name is hidden, showServingUnitQuantity is true and both the serving size and servings per container are hidden
$('#test15').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : true,
showServingsPerContainer : true,
valueServingUnitQuantity : '0',
valueServingPerContainer : '',
showItemName : false,
showLegacyVersion : false
});
Giving specific nutrition label values and hiding some of the parts of the nutrition label. also there is a brand name and it is shown
$('#test16').nutritionLabel({
valueServingWeightGrams : 23.65,
showServingUnitQuantity : false,
itemName : 'Bleu Cheese Dressing',
ingredientList : 'Bleu Cheese Dressing',
showBrandName : true,
showPolyFat : false,
showMonoFat : false,
valueCalories : 450,
valueFatCalories : 430,
valueTotalFat : 48,
valueSatFat : 6,
valueTransFat : 0,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminD : 0,
valuePotassium_2018 : 0,
valueCalcium : 0,
valueIron : 0,
valueCaffeine : 15.63,
showLegacyVersion : false
});
Similar to Example #2 but the arrows are hidden
$('#test17').nutritionLabel({
valueServingWeightGrams : 23.65,
hideTextboxArrows : true,
showServingUnitQuantity : false,
itemName : 'Bleu Cheese Dressing',
ingredientList : 'Bleu Cheese Dressing',
showPolyFat : false,
showMonoFat : false,
valueCalories : 450,
valueFatCalories : 430,
valueTotalFat : 48,
valueSatFat : 6,
valueTransFat : 0,
valueCholesterol : 30,
valueSodium : 780,
valueTotalCarb : 3,
valueFibers : 0,
valueSugars : 3,
valueProteins : 3,
valueVitaminD : 0,
valuePotassium_2018 : 0,
valueCalcium : 0,
valueIron : 0,
valueCaffeine : 15.63,
showLegacyVersion : false
});
Similar to Example #3 but the arrows are hidden
$('#test18').nutritionLabel({
valueServingWeightGrams : 23.65,
hideTextboxArrows : true,
showItemName : false,
showServingsPerContainer : true,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour, Niacin, Iron, Thiamin Mononitrate, Riboflavin, Folic Acid), Sugar, Vegetable Oil (contains one or more of the following oils: Cottonseed Oil, Palm Oil, Soybean Oil), Water, Hydrogenated Vegetable Oil (Palm Kernel Oil, Palm Oil), High Fructose Corn Syrup, Cocoa Powder (Processed With Alkali), contains 2% or less of the following: Eggs, Nonfat Milk, Glycerin, Soy Flour, Corn Syrup Solids, Leavening (Sodium Acid Pyrophosphate, Baking Soda, Sodium Aluminum Phosphate), Preservatives (Potassium Sorbate, Sodium Propionate, Calcium Propionate), Salt, Distilled Monoglycerides, Dextrose, Food Starch-Modified (Corn and/or Wheat), Soy, Lecithin, Natural and Artificial Flavor, Mono- and Diglycerides, Spices, Tapioca Starch, Wheat Starch, Cellulose Gum, Guar Gum, Karaya Gum, colored with Extracts of Annatto and Turmeric, Artificial Color.',
showPolyFat : false,
showMonoFat : false,
showTransFat : false,
showFibers : false,
showVitaminD : false,
showPotassium_2018 : false,
showCalcium : false,
showIron : false,
showCaffeine : false,
valueServingPerContainer : 5,
valueServingUnitQuantity : 2,
valueServingSizeUnit : 'Cookies',
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
showLegacyVersion : false
});
Similar to example #3 but the disclaimer is shown and the calorie diet is enabled (default calorie diet values)
there is no scroll because the disclaimer div height is not greater than 100px
$('#test19').nutritionLabel({
valueServingWeightGrams : 23.65,
showItemName : false,
showServingsPerContainer : true,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour, Niacin, Iron, Thiamin Mononitrate, Riboflavin, Folic Acid), Sugar, Vegetable Oil (contains one or more of the following oils: Cottonseed Oil, Palm Oil, Soybean Oil), Water, Hydrogenated Vegetable Oil (Palm Kernel Oil, Palm Oil), High Fructose Corn Syrup, Cocoa Powder (Processed With Alkali), contains 2% or less of the following: Eggs, Nonfat Milk, Glycerin, Soy Flour, Corn Syrup Solids, Leavening (Sodium Acid Pyrophosphate, Baking Soda, Sodium Aluminum Phosphate), Preservatives (Potassium Sorbate, Sodium Propionate, Calcium Propionate), Salt, Distilled Monoglycerides, Dextrose, Food Starch-Modified (Corn and/or Wheat), Soy, Lecithin, Natural and Artificial Flavor, Mono- and Diglycerides, Spices, Tapioca Starch, Wheat Starch, Cellulose Gum, Guar Gum, Karaya Gum, colored with Extracts of Annatto and Turmeric, Artificial Color.',
showDisclaimer : true,
showPolyFat : false,
showMonoFat : false,
showTransFat : false,
showFibers : false,
showVitaminD : false,
showPotassium_2018 : false,
showCalcium : false,
showIron : false,
valueServingUnitQuantity : 6,
valueServingSizeUnit : 'DONUTS',
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
valueCaffeine : 15.63,
showLegacyVersion : false
});
Similar to example #4 but the disclaimer is shown and customized. The calorie diet is also enabled (default calorie diet values)
Another difference is that the scrollHeightPixel is the default value
$('#test20').nutritionLabel({
valueServingWeightGrams : 23.65,
scrollLongIngredients : true,
showItemName : false,
showServingsPerContainer : true,
ingredientList : 'Enriched Bleached Wheat Flour (Bleached Flour, Malted Barley Flour, Niacin, Iron, Thiamin Mononitrate, Riboflavin, Folic Acid), Sugar, Vegetable Oil (contains one or more of the following oils: Cottonseed Oil, Palm Oil, Soybean Oil), Water, Hydrogenated Vegetable Oil (Palm Kernel Oil, Palm Oil), High Fructose Corn Syrup, Cocoa Powder (Processed With Alkali), contains 2% or less of the following: Eggs, Nonfat Milk, Glycerin, Soy Flour, Corn Syrup Solids, Leavening (Sodium Acid Pyrophosphate, Baking Soda, Sodium Aluminum Phosphate), Preservatives (Potassium Sorbate, Sodium Propionate, Calcium Propionate), Salt, Distilled Monoglycerides, Dextrose, Food Starch-Modified (Corn and/or Wheat), Soy, Lecithin, Natural and Artificial Flavor, Mono- and Diglycerides, Spices, Tapioca Starch, Wheat Starch, Cellulose Gum, Guar Gum, Karaya Gum, colored with Extracts of Annatto and Turmeric, Artificial Color.',
showDisclaimer : true,
valueDisclaimer : 'Although efforts are made to avoid cross-contact of allergens, Mellow Mushroom does not guarantee that cross-contact with allergens will not occur. Before placing your order, please inform your server if you or anyone in your party has a food allergy
Unless otherwise specified, any food in our establishment may come into contact with surfaces or utensils that have previously contacted wheat, dairy, gluten, fish, eggs, shellfish, soybeans, tree nuts, or peanuts.
This nutrition and allergen information is provided for information purposes only, and they do not constitute medical or dietary advice of any kind. Please always consult your healthcare practitioner for questions regarding your diet.
Mellow Mushroom, its franchisees, and employees, do not assume responsibility for a person’s sensitivity or allergy to any food item provided in our restaurants.
We rely on our suppliers’ statements of ingredients to determine which products do not contain certain allergens. Suppliers may change the ingredients in their products or the way they prepare their products, so please check this list frequently to make sure that the menu item you like still meets your dietary requirements.
From time to time we may substitute products due to inventory shortages. We can’t be sure that the substitute products will be free of the allergen you wish to avoid.
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.',
showCalorieDiet : true,
showPolyFat : false,
showMonoFat : false,
showTransFat : false,
showFibers : false,
showVitaminD : false,
showPotassium_2018 : false,
showCalcium : false,
showIron : false,
showCaffeine : false,
valueServingUnitQuantity : 6,
valueServingSizeUnit : 'DONUTS',
valueCalories : 400,
valueFatCalories : 220,
valueTotalFat : 24,
valueSatFat : 15,
valueCholesterol : 25,
valueSodium : 430,
valueTotalCarb : 44,
valueSugars : 24,
valueProteins : 4,
showLegacyVersion : false
});