Conditional JQuery statement to adjust css property of a div

Question

Ok, this may be a challenge (not only the actual question, but describing it too!).

So i have two tanks, designed using css:

      TANK 1                TANK 2  
     +-------+  /\         +-------+
     |40%    |  ||         |40%    |     FROM:_________\/
     |       |  ||         |       |
     |       | 500px       |       |     TO:___________\/
  |  |WWWWWWW|  ||         |WWWWWWW|
XOne |       |  ||         |       |     AMOUNT:__________
  |  +-------+  \/         +-------+     Transfer


XOne: the height (in px) of the current level of tank 1
XTwo: the same, but for tank 2

the 500px height stays the same throughout.

My overall goal here is to move some 'inputted' amount from the first to the second tank (and possibly vice versa, but that's getting ahead of ourselves at this point).

Within tank 1, i have given a data- attribute of 8000, which refers to the capacity of that tank. Within tank 2, i have done the same, but given it 7500.

And so the height of tank 1 is 500px (representing 8000 L), and tank 2 is also 500px, but representing 7500 L.

---

Tank 1: Naming convention design

             +-----------------------------------+
             | 40%  <TOne>                       |   /\
             |                                   |   ||
             |                                   |   ||
             |                                   |   ||
             |                                   |   ||
             |                                   |   ||
             |                                   |   ||
             |                                   |  500px <YOne>
             |                                   |   ||
             |                                   |   ||  - (represents 8000 L)
             |                                   |   ||     <LOne>
             |                                   |   ||
        /\   |WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW|   ||
        ||   |                                   |   ||
      <XOne> |                                   |   ||
        ||   |                                   |   \/
        \/   +-----------------------------------+

This can be replicated for tank 2 also

---

However, that isn't quite as simple as it sounds. You see, you have to ensure that you've got both enough liquid to remove from tank 1, and also enough room left in tank 2.

I am editing the 'level' of the liquid using a box-shadow property.

I originally had the idea of a nested if statement, but i can't seem to implement this properly (see snippet).

I have also had to implement a work around to 'extract' the current box-shadow-spread (which represents the liquid, see my previous question).

Any help would be much appreciated. (I will further clarify as required).

---

Update

---

I have tested the 'creation' of the values, and they are correct.

 $(document).ready(function() {
   $('#submitChanges').click(function() {



     var a = $('#firstTank').val(); //values from combo boxes
     var b = $('#secondTank').val();
     var c = parseInt($('#amount').val()); //amount to transfer

     var TOne = parseInt($('#tankPercentageFrom').text());
     var TTwo = parseInt($('#tankPercentageTo').text());
     var YOne = 500;
     var YTwo = 500;
     LOne = parseInt($('#tankPercentageFrom').attr("data-tonneValue"));
     var LTwo = parseInt($('#tankPercentageTo').attr("data-tonneValue"));

     var XOne = $('#tankPercentageFrom').parent().css("box-shadow");
     var x = XOne.slice(-1);
     if (x == 't') {
       XOne = XOne.split(" ")[4];

     } else {
       XOne = XOne.split(" ")[2];

     }
     XOne = parseInt(XOne.substring(1));

     var XTwo = $('#tankPercentageTo').parent().css("box-shadow");
     var x = XTwo.slice(-1);
     if (x == 't') {
       XTwo = XTwo.split(" ")[4];

     } else {
       XTwo = XTwo.split(" ")[2];

     }
     XTwo = parseInt(XTwo.substring(1));

     /***********************************************************/
     if ((TOne / 100) * LOne >= c) {
       if (((TTwo / 100) * LTwo + c) < LTwo) {
         var newXOne = parseInt((((c / LOne) * LOne) / 100) * YOne);
         var newXTwo = parseInt(XTwo - ((c / LTwo) * 100) * YTwo);

         //set the two values
         $('#tankPercentageFrom').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXOne + "px 0px -2px inset");
         $('#tankPercentageTo').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXTwo + "px 0px -2px inset");

       }
     }




   });
 });

 .loadingTank {
   display: inline-block;
   border: 2px solid black;
   margin: 15px;
   max-width: 350px;
   height: 500px;
   width: 30%;
   background-color: #808080;
   box-shadow: rgb(56, 56, 56) 0px -200px 0px -2px inset;
   /*Change this value for leveling*/
   float: left;
   position: relative;
   border-radius: 2%;
 }
 .loadingTank:before {
   content: "";
   width: 70%;
   height: 100%;
   float: left;
   background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(208, 208, 208, 0)));
   background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   background: -o-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#00d0d0d0', GradientType=1);
 }
 .loadingTank:after {
   /*idea is for this to be the 'leveling'*/
   content: "";
   width: 10%;
   height: 100%;
   border-radius: 10px;
   border: 2px solid black;
   background-color: lightGray;
   margin-right: 10%;
   float: right;
   font-size: 100%;
   background: rgb(0, 0, 0);
   background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(128, 128, 128, 1)), color-stop(9%, rgba(128, 128, 128, 1)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(11%, rgba(128, 128, 128, 1)), color-stop(19%, rgba(128, 128, 128, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(128, 128, 128, 1)), color-stop(29%, rgba(128, 128, 128, 1)), color-stop(30%, rgba(0, 0, 0, 1)), color-stop(31%, rgba(128, 128, 128, 1)), color-stop(39%, rgba(128, 128, 128, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(128, 128, 128, 1)), color-stop(49%, rgba(128, 128, 128, 1)), color-stop(50%, rgba(0, 0, 0, 1)), color-stop(51%, rgba(128, 128, 128, 1)), color-stop(59%, rgba(128, 128, 128, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(128, 128, 128, 1)), color-stop(69%, rgba(128, 128, 128, 1)), color-stop(70%, rgba(0, 0, 0, 1)), color-stop(71%, rgba(128, 128, 128, 1)), color-stop(79%, rgba(128, 128, 128, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(128, 128, 128, 1)), color-stop(89%, rgba(128, 128, 128, 1)), color-stop(90%, rgba(0, 0, 0, 1)), color-stop(91%, rgba(128, 128, 128, 1)), color-stop(99%, rgba(128, 128, 128, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
   background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
 }
 .Loading-wrapper {
   padding: 5px;
   margin: 5px;
 }
 .loading-text {
   float: left;
   width: 25%;
   padding-top: 100px;
   display: inline-block;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loadingTank">
  <div id="tankPercentageFrom" data-tonneValue="8000" style="position:absolute; font-size:x-large; color:white;">
    40%
  </div>
</div>
<div class="loadingTank">
  <div id="tankPercentageTo" data-tonneValue="7500" style="position:absolute; font-size:x-large; color:white;">
    40%
  </div>
</div>


<div id="contentPanel" class="k-header" style="width:25%; float:left">
  <h3>TRANSER</h3>
  <hr />
  <br />From:
  <br />
  <select id="firstTank">
    <option selected="">Tank 1</option>
    <option>Tank 2</option>
  </select>
  <br />Amount:
  <br />
  <input type="number" id="amount" placeholder="Enter Tonne here" class="k-textbox" />
  <br />To:
  <br />
  <select id="secondTank">
    <option>Tank 1</option>
    <option selected="">Tank 2</option>
  </select>
  <button class="k-button" id="submitChanges">Transfer</button>
</div>

OR view on JsFiddle

---

This part is wrong (where the calcs are taking place):

    /****************************ACTUAL calcs*******************************/
    if((TOne/100)* LOne >= c)
    {
        if(((TTwo/100)*LTwo +c)< LTwo)
        {
            var newXOne = parseInt((((c/LOne)*LOne)/100) * YOne);
            var newXTwo = parseInt(XTwo - ((c / LTwo) * 100) * YTwo);

            //set the two values 
            $('#tankPercentageFrom').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXOne + "px 0px -2px inset");
            $('#tankPercentageTo').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXTwo + "px 0px -2px inset");

        }
    }

---

So in essence, I would like/need help with implementing:

if( (enough left in tank 1) AND (enough room in tank 2))
      SET XOne; //box shadow of tank 1
      SET XTwo; //box shadow of tank 2
      SET TOne; //text % of tank 1 
      SET TTwo; // text % of tank 2
      CLEAR c;  //the 'amount' textbox

---

My current implementation 'breaks' at least when you enter <15 updated fiddle

Answer 1

I have written a new logic for this. Check out this fiddle

this logic depends on two data attributes. they are data-tonneValue="8000" and data-currentval="0" so be SURE to put some integer data into these attributes

Final html will look like

<div class="loadingTank">
    <div id="tankPercentageFrom" data-tonneValue="8000" data-currentval="5000" style="position:absolute; font-size:x-large; color:white;">40%</div>
</div>
<div class="loadingTank">
    <div id="tankPercentageTo" data-tonneValue="7500" data-currentval="0" style="position:absolute; font-size:x-large; color:white;">40%</div>
</div>
<div id="contentPanel" class="k-header" style="width:25%; float:left">
     <h3>TRANSER</h3>

    <hr />
    <br />From:
    <br />
    <select id="firstTank">
        <option selected="" value="1">Tank 1</option>
        <option value="2">Tank 2</option>
    </select>
    <br />Amount:
    <br />
    <input type="number" id="amount" placeholder="Enter Tonne here" class="k-textbox" />
    <br />To:
    <br />
    <select id="secondTank">
        <option value="1">Tank 1</option>
        <option selected="" value="2">Tank 2</option>
    </select>
    <button class="k-button" id="submitChanges">Transfer</button>
</div>

jQuery

$(document).ready(function () {
    $('#submitChanges').click(function () {
        var from = $('#firstTank').val();
        var to = $('#secondTank').val();
        var transferAmount = parseInt($('#amount').val(),10);
        var $tanks = $('.loadingTank').find('div'); // This has both the tanks
        var fromTank = $tanks.eq(from - 1);
        var toTank = $tanks.eq(to - 1);
        var fromMaxCap = parseInt(fromTank.data('tonnevalue'),10);
        var toMaxCap = parseInt(toTank.data('tonnevalue'),10);
        var fromCurVal = parseInt(fromTank.data('currentval'),10);
        var toCurVal = parseInt(toTank.data('currentval'),10);
        if (from != to && transferAmount > 0) {
            if (fromCurVal >= transferAmount && (toMaxCap - toCurVal) >= transferAmount) {
                var newFromCurVal = fromCurVal - transferAmount;
                var newToCurVal = toCurVal + transferAmount;
                fromTank.data('currentval', newFromCurVal);
                toTank.data('currentval', newToCurVal);
                fromCurVal = newFromCurVal;
                toCurVal = newToCurVal;
            } 
            else {
                alert("Cmon.!! you can't do that ");
            }
        }
        var fromTankHeight = fromTank.parent().height(); 
        var toTankHeight = toTank.parent().height(); 
        var fromFillPercentage = ((fromCurVal * 100) / (fromMaxCap));
        var toFillPercentage = ((toCurVal * 100) / (toMaxCap));
        var finalFromTankData = (fromTankHeight / 100) * fromFillPercentage;
        var finalToTankData = (toTankHeight / 100) * toFillPercentage;
        fromTank.parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + finalFromTankData + "px 0px -2px inset");
        fromTank.html((Math.round(fromFillPercentage * 100) / 100)  + "%");
        toTank.parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + finalToTankData + "px 0px -2px inset");
        toTank.html((Math.round(toFillPercentage * 100) / 100) + "%");
    }).trigger('click');
});

Answer 2

Note that this can be written in a much cleaner way (with added animation):

var tank = {};

function calc(tankStr) {
  var tankEl = $('#' + tankStr),
    max = tankEl.data('max'),
    fill = tankEl.data('fill');
  tank[tankStr] = {
    max: max,
    fill: fill
  };
  tankEl.children('.fill').height(tankEl.height() * (fill / max));


}

function balance() {
  calc('tank1');
  calc('tank2');
}

$('button').on('click', function() {
  var amount = parseInt($('input').val()),
    src,
    tgt;
  if ($('select').val() == 1) {
    src = $('#tank1');
    tgt = $('#tank2');
  } else {
    src = $('#tank2');
    tgt = $('#tank1');
  }
  var max = parseInt(tgt.data('max')),
    fill = parseInt(tgt.data('fill'));

  if (amount <= parseInt(src.data('fill')) && amount > 0 && max >= (fill + amount)) {
    tgt.data('fill', fill + amount);
    console.log(src, fill - amount);
    src.data('fill', parseInt(src.data('fill')) - amount);
    balance();
  }

});
balance();

.tanks {
  overflow: hidden;
}
.container {
  float: left;
  height: 300px;
  width: 100px;
  border: 1px solid;
  position: relative;
}
.fill {
  background: blue;
  position: absolute;
  bottom: 0;
  width: 100%;
  transition:height 150ms ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tanks'>
  <div data-max='8000' data-fill='2000' id='tank1' class='container'>
    <div class='fill'></div>
  </div>
  <div data-max='12000' data-fill='7000' id='tank2' class='container'>
    <div class='fill'></div>
  </div>
</div>

<h4>Transfer</h4>

<input type='number' value='0' />
<select>
  <option value='1'>Tank 1 to Tank 2</option>
  <option value='2'>Tank 2 to Tank 1</option>
</select>
<button>Transfer</button>

Answer 3

The problem is clear to me. I can only tell you if you use a div inside the container then it would have been much easier to handle instead of a box shadow.

The logic should be

1. take the value from the input box.
2. check how much is the percentage with respect to tank1.
3. check how much is the percentage with respect to tank2.
4. Reduce the height of the div of shadow(now box shadow) that percent(step 2 percent), from the current percent of the tank1's shadow div's height.

5.Increase the height of the div of shadow(now box shadow) that percent(step 3 percent), from the current percent of the tank2's shadow div's height.

Hope that helps.