check the labels here http://www.nutritionix.com/firebirds-wood-fired-grill/menu/premium and this one too http://www.nutritionix.com/search/item/513fceb375b8dbbc21000212

this is related to this task https://github.com/mattsilvllc/Nutritionix-Yii/issues/1057

additional task: all trailing zero should be removed

eg.

1.0 => 1
2.20 => 2.2

from @mattsilv Serving size cannot be "N/A", it will either have a value, or not appear at all.

from @mattsilv

1. The spacing is off on long name items. Rommel -- Please look at that. http://dev2.nutritionix.com/search/item/5164402151362aac4200e4c2

when you work on this please also check / test the one on the mobile http://devm.nutritionix.com/item/5164402151362aac4200e4c2

removing the detail as there's no way to delete the ticket. should be on a different repo

@genesis23rd

you can use /html/demo.html to test this changes locally. just change this to the not min version

<link rel='stylesheet' type='text/css' media='screen' href='../nutritionLabel-min.css'>

let me know when you are done so I can make the changes on the minified version and upload it on dev2 so we can test it for this nix task https://github.com/mattsilvllc/Nutritionix-Yii/issues/624

Thanks

http://dev2.nutritionix.com/html/label-jquery-plugin/demo/demo.html#test1

The word facts is too close to the border.

related to https://github.com/mattsilvllc/Nutritionix-Yii/issues/2524

update the plugin to support the new fields mentioned here https://github.com/mattsilvllc/Nutritionix-Yii/wiki/New-Nutrition-Fact-Attributes-added-in-2017

1. add the override css to the plugin files, increase the version by 0.0.1 and add a changelog what it is for and how to use it
2. create a demo and guide on how to use the override css to create mobile labels (you an cite a mobile label link like http://devm2.nutritionix.com/item/hIm0sAgB9fjoq36cZHNW [^] as an example) (maybe another demo page even with just or 2 example)

ensure this is what is happeneing

//User embeds script
//  calls passing in their variableHash --- > ntx(variableHash)


// USE BELOW WITHIN YOUR NTX PROTOTYPE
//----------------------------------------------------------------------------------------------
//GET THE ELEMENT to be writen to without JQUERY -->$('.nutritionDiv')
// Do not use getElementByClassName -> only in modern browsers

var selectedDiv = document.getElementById("nutritionDiv");

// WRITE HTML to the Div
selectedDiv.innerHTML= htmlToBeWritten;
// ^--WITHIN NTX Prototype FUNCTION

removing the detail as there's no way to delete the ticket. should be on a different repo

decrease the space between the textbox and the serving size unit name

what I did is I added a class on the serving size unit and serving size grams if the textbox is present so that the css changes won't affect the label when the serving size textbox is not present

when the textbox is present and there is a serving grams, the code is

<div class="cf">
    <div class="servingSizeText fl">Serving Size</div>
    <div class="rel servingSizeField fl">
        <div class="setter">
            <a rel="nofollow" class="unitQuantityUp" href="Increase the quantity"></a>
            <a rel="nofollow" class="unitQuantityDown" href="Decrease the quantity"></a>
        </div><!-- closing class="setter" -->
        <input type="text" class="unitQuantityBox" value="6.0">
    </div><!-- closing class="servingSizeField" -->
    <div class="servingUnit fl unitHasTextbox">DONUTS</div>
    <div class="servingWeightGrams fl gramsHasTextbox">(2.6g)</div>
</div>

when the textbox is present and there is no serving grams, the code is

<div class="cf">
    <div class="servingSizeText fl">Serving Size</div>
    <div class="rel servingSizeField fl">
        <div class="setter">
            <a rel="nofollow" class="unitQuantityUp" href="Increase the quantity"></a>
            <a rel="nofollow" class="unitQuantityDown" href="Decrease the quantity"></a>
        </div><!-- closing class="setter" -->
        <input type="text" class="unitQuantityBox" value="6.0">
    </div><!-- closing class="servingSizeField" -->
    <div class="servingUnit fl unitHasTextbox">DONUTS</div>
</div>

when the textbox is not present and there is a serving grams, the code is

<div class="cf">
    <div class="servingSizeText fl">Serving Size</div>
    <div class="servingUnitQuantity fl">6</div>
    <div class="servingUnit fl ">DONUTS</div>
    <div class="servingWeightGrams fl ">(2.6g)</div>
</div>

when the textbox is not present and there is no serving grams, the code is

<div class="cf">
    <div class="servingSizeText fl">Serving Size</div>
    <div class="servingUnitQuantity fl">6</div>
    <div class="servingUnit fl ">DONUTS</div>
</div>

let me know if you need me to make more changes

allow a feature to fire this when the arrows are changed or the value on the texbox is changed

related task https://github.com/mattsilvllc/NewSiteDesign/issues/477

when set to true, this will hide the values if they are not applicable

If a value does not have a decimal, we should not show the ".0"

Currently, something with 4g of fat will show as 4.0g of fat Instead, it should show only as "4g" fat.

This should apply to all decimals we show on the plugin and overrides the decimal places settings. this will be a new setting that will be enabled by default

eg. if the decimal places is 2 like 2.33 or 4.00 we will still drop the unnecessary zeroes so the final values on this example is 2.33 and 4

related to nix task https://github.com/mattsilvllc/Nutritionix-Yii/issues/25

see http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo-texbox-case1-a.html#test2 the value on the textbox is 1 but the initial computation is incorrect

try example 2 here http://www.nutritionix.com/html/label-jquery-plugin/html/demo.html

fix the generate.html file

http://m.nutritionix.com/item/513fc9c5673c4fbc26001644

Is there a way to output to canvas or an image?

I found out that I had a bug on the rounding off rule for this.

I am not sure if the value was changed or if it was overlooked since the beginning but the bug was

1 Carbohydrates, Fiber, Sugar or Protein is showing up as < 1 and not 1

http://www.fda.gov/Food/GuidanceRegulation/GuidanceDocumentsRegulatoryInformation/LabelingNutrition/ucm064932.htm

this will be a very easy fix as I just need to change <= to <

removing the detail as there's no way to delete the ticket. should be on a different repo

change the label plugin to allow 2 decimal places instead of just 1

reported by https://github.com/pzykoh

​http://dev2.nutritionix.com/boston-market/menu/special-diets/premium?allergens=eggs,fish,gluten,milk,peanuts,soy,tree_nuts,wheat​

​- Click the more info of Rotisserie Chicken - Half Chicken​,
The default serving size is 10.1oz, when you change the decimal value into a letter (ex: 10.a), then click anywhere on the label, instead of the value returning to 10.1, it returns to 10.

I've made a quick test and here are the results:

Original Value: 12.34

Change Value = Resulted Value
a2.34             = 12.34
1a.34             = 1
12.a4             = 12
12.3a             = 12.3
12.34a            = 12.34

this is related to the changes made for version 6.0.13 - May 2, 2016

New Feature: when a user enters an invalid value on the quantity textbox, the label now replace it with the previous valid value and not 1.0

http://dev2.nutritionix.com/html/label-jquery-plugin/demo/demo-mobile.html

@majin22

http://dev2.nutritionix.com/html/label-jquery-plugin/demo/demo.html#test8

http://youtu.be/zPR8o6Xp9JM?hd=1

comment here is deleted as discussed with Matt

Ability to generate a PNG/GIF/Hi-res JPEG file of the nutrition label output.

removing the detail as there's no way to delete the ticket. should be on a different repo

remove the 'show item name' at the top setting to simplify things

the show brand name will now appear after the item name if the setting showBrandName is true and brandName is not null

"ITEM NAME" dash (-) "BRAND NAME"

changes will be near this code:

            nutritionLabel += tabTemp + '<div class="name '+ itemNameClass +'">' + $this.settings.itemName + '</div>\n';

item name should appear right below the title - http://awesomescreenshot.com/0ec18gu2c6

like http://www.nutritionix.com/just-salad/nutrition-calculator

removing the detail as there's no way to delete the ticket. should be on a different repo

when the value is 0.5 to 1.0 then the decrement is 0.5

1.0 => down arrow is clicked => 0.5
0.9 => down arrow is clicked => 0.4
0.8 => down arrow is clicked => 0.3
0.7 => down arrow is clicked => 0.2
0.6 => down arrow is clicked => 0.1
0.5 => down arrow is clicked => 0.0
0.4 => down arrow is clicked => 0.0
0.3 => down arrow is clicked => 0.0
0.2 => down arrow is clicked => 0.0
0.1 => down arrow is clicked => 0.0

when the value is 0.0 to 0.9 then the increment is 0.5

0.0 => up arrow is clicked => 0.5
0.1 => up arrow is clicked => 0.6
0.2 => up arrow is clicked => 0.7
0.3 => up arrow is clicked => 0.8
0.4 => up arrow is clicked => 0.9
0.5 => up arrow is clicked => 1.0
0.6 => up arrow is clicked => 1.1
0.7 => up arrow is clicked => 1.2
0.8 => up arrow is clicked => 1.3
0.9 => up arrow is clicked => 1.4

when the value is 2.0 to 1.1 then the down arrow will take the value to 1

2.0 => down arrow is clicked => 1.0
1.9 => down arrow is clicked => 1.0
1.8 => down arrow is clicked => 1.0
1.7 => down arrow is clicked => 1.0
1.6 => down arrow is clicked => 1.0
1.5 => down arrow is clicked => 1.0
1.4 => down arrow is clicked => 1.0
1.3 => down arrow is clicked => 1.0
1.2 => down arrow is clicked => 1.0
1.1 => down arrow is clicked => 1.0

when the value is 1.0 and above then the increment is 1.0

see the discussion on https://github.com/mattsilvllc/Nutritionix-Yii/issues/44

@genesis23rd you can just use the examples on our demo or demo-mini page

@mattsilv this will be a mobile demo page but the main purpose is so we can use this to see how future changes affects our mobile page labels

It is possible that calculating the daily values may lead to a "NaN" being displayed to the user.

For exampe, if dailyValueSodium == 0, then the following code will produce a "NaN" on screen:

($this.settings.allowFDARounding ? roundPotassiumRule($this.settings.valuePotassium) : $this.settings.valuePotassium) / ($this.settings.dailyValuePotassium * calorieIntakeMod)

• If item serving qty is 1.58, display 1.58 in the qty box (up to 2 decimals only)
• if item serving qty is 1.5 display 1.5 (do not display 1.50, only display second decimal if it is not zero)

from Matt

As a low priority task, can you update our nutrition label to dynamically change servings per container if the value exists.

from @majin22

Hi Matt,

Will the formula be servings per container * quantity on the textbox?

If yes, should we recompute the servings per container depending on the initial value on the textbox? Eg. if the servings on the textbox is 0.25 and the servings per container is 8, the initial value will be 2?

Thanks.

from Matt

The formula will need to follow these steps:

1. Determine total qty of items per container by taking original serving qty * original servings per container

Example:
2 Cookies
5 Servings Per Container

The total_qty would be 2*5 = 10.

1. Determine dynamic servings per container by taking $total_qty/$serving_qty.

In the example 10 / 2 = 5. So there are 5 servings per container.

If user changed it to 1 cookie, it would be 10 / 1 = 10 servings per container (if the serving is 1 cookie, there are 10 cookies in the box)

Hi, I have this problem when I'm trying to use it.

My code

<div id="test"></div>
$('#test').nutritionLabel();

Thanks for your support!

from Matt

Here are the rounding rules for Vitamins:

Round to nearest even number percent as long as it is below 10 percent
Round to the nearest 5 percent increment when above 10 and up to 50 percent.
Round to nearest 10 percent when above 50 percent

based on a chat with @mattsilv

(1) change the label to not allow any string input - before we allow string and numeric inputs on the nutrition values

(2) have the serving_unit_qty display in an input box and then change the values in the label if you modify the serving unit (assuming the value is present and not null) - value should be a float, can't be a string

(2a) the textbox can be activated by pressing enter on the textbox

(2b) there will be an up and down arrow that can change the value of the serving unit qty (like the arrows on the calculator)

(3) add a simple setting to be able to hide the textbox on (2)

@genesis23rd I found this today by accident

http://dev2.nutritionix.com/html/label-jquery-plugin/demo/demo-long-item-name.html

there is a js error Uncaught Error: Syntax error, unrecognized expression: # test4 .name.inline but I think this css line might be linked to it https://github.com/nutritionix/nutrition-label/blob/master/nutritionLabel.css#L67-L70

can you check this out

thanks