Support » Plugin: Calculated Fields Form » Change font within calculated field function

  • Resolved cncladmin

    (@cncladmin)


    Hi there,

    I’m trying to change the style of text (font color and weight) within a calculated field function — so the text style would depend upon the outcome of a calculation.

    I’ve tried a number of different ways to do this, but they all have failed. Here is my most recent attempt (assigning a css class to the output field – an html field usiing div “ggvd” with the id# fieldname63_2 ; and I added classes “.greenbold” and “.redbold” to the form’s CSS…):


    var diffvd
    var dpgg
    var dvgg

    if (diffvd==0) {
    var diffvdstr=”Your diet emits the SAME AMOUNT OF GREENHOUSE GASES as a wholesome vegan diet”;
    document.getElementById(“fieldname63_2″).className += ” greenbold”;
    jQuery(‘.ggvd’).html(diffvdstr);
    return diffvdstr;
    }
    else if (dpgg>dvgg) {
    var diffvdstr=”Your diet EMITS ” + diffvd + unit +” MORE GREENHOUSE GASES per day than a wholesome vegan diet”;
    document.getElementById(“fieldname63_2″).className += ” redbold”;
    jQuery(‘.ggvd’).html(diffvdstr);
    return diffvdstr;
    }
    else {
    var diffvdstr= “Your diet EMITS ” + diffvd + unit + ” LESS GREENHOUSE GASES per day than a wholesome vegan diet”;
    document.getElementById(“fieldname63_2″).className += ” greenbold”;
    jQuery(‘.ggvd’).html(diffvdstr);
    return diffvdstr;
    }

    I’ve also tried a few other css tricks but none seem to work.
    I’m guessing there is something really simple I’m missing, but I haven’t worked it out yet.

    Thanks again for a great plugin!

    Paris Williams

    btw, below is the entire code for this particular calculated field:

    /* Code for Personal Impact Calculator–Greenhouse Gases COMPARED to WHOLESOME VEGAN DIET*/

    (function(){

    var format = fbuilderjQuery.fbuilder.calculator.format,
    config = {groupingsymbol:’,’, decimalsymbol:’.’};

    var beef=fieldname17;
    var lamb=fieldname28;
    var pork=fieldname27;
    var poultry=fieldname26;
    var fish=fieldname25;
    var cheese=fieldname24;
    var milk=fieldname23;
    var eggs=fieldname31;
    var grains=fieldname22;
    var nuts=fieldname21;
    var beans=fieldname20;
    var root=fieldname19;
    var veg=fieldname32;
    var fruit=fieldname29;

    /* Convert Calories to grams */
    if (fieldname11==”Calories”) {
    var beef=fieldname17/2.4;
    var lamb=fieldname28/1.921;
    var pork=fieldname27/1.450;
    var poultry=fieldname26/2.970;
    var fish=fieldname25/2.773;
    var cheese=fieldname24/1.760;
    var milk=fieldname23/.5;
    var eggs=fieldname31/1.550;
    var grains=fieldname22/2;
    var nuts=fieldname21/5.450;
    var beans=fieldname20/1.2;
    var root=fieldname19/1;
    var veg=fieldname32/.5;
    var fruit=fieldname29/.5;
    }

    /*daily personal greenhouse gases emitted */
    var dpgg=(beef*39.2+lamb*27+pork*12.1+poultry*9+fish*11.9+cheese*13.5+milk*2+eggs*4.8+grains*2.7+nuts*2.4+beans*1+root*2.9+veg*1.5+fruit*1.5)/1000;

    if (dpgg==0) return “”;

    /* assigning g.gases emitted in vegan diet, assigning units, and converting units to lb */
    if (fieldname30==”Metric”) {
    var dvgg=3.774;
    var unit=” kg”;
    } else {
    var dvgg=3.774*2.2;
    var dpgg=dpgg*2.2;
    var unit=” lb”;
    }

    /*difference between personal diet and vegan diet (per day, to 1 decimal place)*/
    var diffvd=format(ROUND(ABS(dpgg-dvgg)*10)/10, config);

    /*compare to a wholesome vegan diet */
    if (diffvd==0) {
    var diffvdstr=”Your diet emits the SAME AMOUNT OF GREENHOUSE GASES as a wholesome vegan diet”;
    document.getElementById(“fieldname63_2″).className += ” greenbold”;
    jQuery(‘.ggvd’).html(diffvdstr);
    return diffvdstr;
    }
    else if (dpgg>dvgg) {
    var diffvdstr=”Your diet EMITS ” + diffvd + unit +” MORE GREENHOUSE GASES per day than a wholesome vegan diet”;
    document.getElementById(“fieldname63_2″).className += ” redbold”;
    jQuery(‘.ggvd’).html(diffvdstr);
    return diffvdstr;
    }
    else {
    var diffvdstr= “Your diet EMITS ” + diffvd + unit + ” LESS GREENHOUSE GASES per day than a wholesome vegan diet”;
    document.getElementById(“fieldname63_2″).className += ” greenbold”;
    jQuery(‘.ggvd’).html(diffvdstr);
    return diffvdstr;
    }

    })();

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @cncladmin

    The process is simpler than you think.

    I’ll try to describe the process with a hypothetical example.

    – Assign a class name to the field you want vary, for example: my-field
    – And then, define some new styles through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png)

    For example:

    
    .class-a *{color:green; font-size:1.3em;}
    .class-b *{color:blue; font-size:1.5em;}
    .class-c *{color:yellow; font-size:2em;}
    

    – And finally, you should assign the corresponding class name to the field, depending on the equation’s result.

    For example:

    
    (function(){
    var result = fieldname1+fieldname2;
    if(result < 10) jQuery('.my-field').addClass('class-a');
    if(10 <= result && result < 100) jQuery('.my-field').addClass('class-b');
    if(100 <= result) jQuery('.my-field').addClass('class-c');
    return result;
    })()
    

    Fields’ names, class names and the equations are only hypothetical, only to describe the process.

    Best regards.

    Perfect! Thanks again for such quick (and useful!) responses. If I could give you another 5-star rating, I would; but instead I’ll upgrade to the “pro version” which I imagine you would prefer anyway 🙂

    Plugin Author codepeople

    (@codepeople)

    Hello @cncladmin

    Thank you very much, it is a pleasure to help you.

    Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change font within calculated field function’ is closed to new replies.