How to make columns height equal using Jquery

Step1:

Welcome to designer blog, here we are going to discuss about,  How to make columns height equal using Jquery

Step2:

Html Markup 

 <div id ="left"> </div>
  <div id ="right"> </div>

Depend upon the content  both right and left div's height may be vary. so that we can fix this
by using jquery.

Step3:

Math.max will calculate the two divs height and takes the highest  height  either it may be left or right.

$(document).ready(function() {
        var d = Math.max($("#left").height(), $("#right").height());
        $("#left").height(d);
        $("#right").height(d);
       
            });

Highest height will be assigned  to both left and right, so that both column render in same height.

Step4:

Setting the equal heights in Responsive view. Below is the function,Where we can set the height: auto for mobile view and other resolution like tablet and desktop will set the equal heights based on left and right "Div Element" which is greater than one another.

Function MaxHeights ()
{
          if($(window).width() <= 767)
{
$("#left").css('height', 'auto');
                        $("#right").css('height', 'auto');

}
    else
{
   $("#left").height("");
                   $("#right").height("");
   var MaxHeight = Math.max($("#left").height(), $("#right").height());
           $("#left").height(MaxHeight);
                   $("#right").height(MaxHeight);
}
}

$(window).resize(function() {

        MaxHeights();

 });

  $(window).load(function() {

        MaxHeights();

 });


Step4:

Enjoy folks

<script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawCharts);
      
    function drawCharts() {
       var data1 = google.visualization.arrayToDataTable([
      ['Date', 'Assigned','Inprogress'],
      ['16-Jan-17',  80, 20 ],
      ['17-Jan-17',  70, 20 ],
      ['18-Jan-17',  60, 20 ],
      ['19-Jan-17',  40, 20 ],
      ['20-Jan-17',  50, 20 ],
      ['21-Jan-17',  55, 20 ],
      ['22-Jan-17',  80, 20 ],
      ['23-Jan-17',  80, 20 ],
      ['24-Jan-17',  20, 20 ],
      ['25-Jan-17',  80, 20 ],
      ['26-Jan-17',  80, 20 ],
      ['27-Jan-17',  50, 20 ],
      ['28-Jan-17',  80, 20 ],
      ['29-Jan-17',  10, 20 ],
      ['30-Jan-17',  90, 20 ],
      ['31-Jan-17',  80, 20 ],
      ['01-Feb-17',  80, 20 ],
      ['02-Feb-17',  20, 20 ],
      ['03-Feb-17',  80, 20 ],
      ['04-Feb-17',  40, 20 ],
      ['05-Feb-17',  80, 20 ],
      ['06-Feb-17',  80, 20 ],
      ['07-Feb-17',  30, 20 ],
      ['08-Feb-17',  80, 20 ],
      ['09-Feb-17',  40, 20 ],
      ['10-Feb-17',  60, 20 ],
      ['11-Feb-17',  80, 20 ],
      ['12-Feb-17',  50, 20 ],
      ['13-Feb-17',  70, 20 ],
      ['14-Feb-17',  60, 20 ],
      ['15-Feb-17',  40, 10 ],
      ['16-Feb-17',  80, 20 ]

      ]);
    
        var data2 = google.visualization.arrayToDataTable([
      ['Date', 'Resolved', 'On Hold', 'Closed'],
     ['16-Jan-17',  80,20,10],
      ['17-Jan-17',  70, 20,60 ],
      ['18-Jan-17',  60, 20,60 ],
      ['19-Jan-17',  40, 20,60 ],
      ['20-Jan-17',  50, 20,60 ],
      ['21-Jan-17',  55, 20,60 ],
      ['22-Jan-17',  80, 20,60 ],
      ['23-Jan-17',  80, 20,60 ],
      ['24-Jan-17',  20, 20,60 ],
      ['25-Jan-17',  80, 20,60 ],
      ['26-Jan-17',  80, 20,60 ],
      ['27-Jan-17',  50, 20,60 ],
      ['28-Jan-17',  80, 20,60 ],
      ['29-Jan-17',  10, 20,60 ],
      ['30-Jan-17',  90, 20,60 ],
      ['31-Jan-17',  80, 20,60 ],
      ['01-Feb-17',  80, 20,60 ],
      ['02-Feb-17',  20, 20,60 ],
      ['03-Feb-17',  80, 20,60 ],
      ['04-Feb-17',  40, 20,20 ],
      ['05-Feb-17',  80,10 ,30],
      ['06-Feb-17',  80, 20 ,60],
      ['07-Feb-17',  30, 20,60 ],
      ['08-Feb-17',  80, 20,60 ],
      ['09-Feb-17',  40, 20,20 ],
      ['10-Feb-17',  60, 20,60 ],
      ['11-Feb-17',  80, 20,10 ],
      ['12-Feb-17',  50, 20,60 ],
      ['13-Feb-17',  70, 20,60 ],
      ['14-Feb-17',  60, 20,60 ],
      ['15-Feb-17',  40, 10,60 ],
      ['16-Feb-17',  80, 20, 30 ]

        
        
        
        
        
      ]);
    
      var data3 = google.visualization.arrayToDataTable([
      ['Date', 'Escalation'],
      ['16-Jan-17',  80],
      ['17-Jan-17',  70],
      ['18-Jan-17',  60],
      ['19-Jan-17',  40],
      ['20-Jan-17',  50],
      ['21-Jan-17',  55],
      ['22-Jan-17',  80],
      ['23-Jan-17',  80],
      ['24-Jan-17',  20],
      ['25-Jan-17',  80],
      ['26-Jan-17',  80],
      ['27-Jan-17',  50],
      ['28-Jan-17',  80],
      ['29-Jan-17',  10],
      ['30-Jan-17',  90],
      ['31-Jan-17',  80],
      ['01-Feb-17',  80],
      ['02-Feb-17',  20],
      ['03-Feb-17',  80],
      ['04-Feb-17',  40],
      ['05-Feb-17',  80],
      ['06-Feb-17',  80],
      ['07-Feb-17',  30],
      ['08-Feb-17',  80],
      ['09-Feb-17',  40],
      ['10-Feb-17',  60],
      ['11-Feb-17',  80],
      ['12-Feb-17',  50],
      ['13-Feb-17',  70],
      ['14-Feb-17',  60],
      ['15-Feb-17',  40],
      ['16-Feb-17',  100]
      ]);
       var options = {
        //width: 100%,
        height:350,
        // chartArea:{t,width:'100%',height:'100%'},
        bar: {groupWidth: "55%"},
        colors: ['#f1ca3a', '#ff9900'],
        isStacked: true,
    // chartArea:{left:0,top:0},
               legend: {position: 'top',  textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular,Sans-Serif", fontSize: 14}},
      };
    
       var custoptions2 = { colors: ['#00c0ef',   '#3186b9', '#19d8c6'], isStacked: true, height:350, legend: {position: 'top',  textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular, Sans-Serif;", fontSize: 14}}, };
        var custoptions3 = { colors: ['#f9699c'], isStacked: true, height:350, legend: {position: 'top',  textStyle: {color: '#444444', fontName:"Source Sans Pro", fontSize: 14}}, };
      var custoptions = { isStacked: false ,  height:350, legend: {position: 'top',  textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular, Sans-Serif;", fontSize: 14}},};


      var alldata = [];
      alldata.push(data1);
     alldata.push(data2);
     alldata.push(data3);
    
      var alloptions = [];
      alloptions.push(options);
      alloptions.push(custoptions2);
      alloptions.push(custoptions3);
    
      $( ".chart-responsive" ).each(function(index, element ) {
         var charted = new google.visualization.ColumnChart(element.firstElementChild);
          var minus = Math.floor(index/3);
         index = index-(3*minus);
      
     // console.log( index + ": " + $( this ).text() );\
     charted.draw(alldata[index], alloptions[index]);
});
    
//      var chart1 = new google.visualization.ColumnChart(document.getElementById("columnchart_values1"));
//      var chart2 = new google.visualization.ColumnChart(document.getElementById("columnchart_values2"));
//      var chart3 = new google.visualization.ColumnChart(document.getElementById("columnchart_values3"));
//      var chart4 = new google.visualization.ColumnChart(document.getElementById("columnchart_values4"));
//      var chart5 = new google.visualization.ColumnChart(document.getElementById("columnchart_values5"));
//      var chart6 = new google.visualization.ColumnChart(document.getElementById("columnchart_values6"));
//      chart1.draw(data1, options);
//      chart2.draw(data2, custoptions2);
//      chart3.draw(data3, custoptions3);
//      chart4.draw(data1, options);
//      chart5.draw(data2, custoptions2);
//      chart6.draw(data3, custoptions3);
  }
 
  </script>

Multiple toggle switch with Angular js

Step1:

Here we are going to discuss how to use the multiple toggle switch  control by using the same function.


Step2:

 Here, We are having the Html Markup.  List is nothing but an object of array's which data's are coming from Api...

<tr dir-paginate="list in Createinteractive | itemsPerPage: PageSize" total-items="TotalCount" current-page="CurrentPage" ng-if="!list.IsDeleted">


 <i class="fa fa-toggle-on active" ng-model="list.IsActive" ng-if="list.IsActive ==  status == true" ng-click="changeStatus(list);"> </i>

      <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="list.IsActive == status == false" ng-click="changeStatus(list);"> </i>

Step3: 

Toggle switch is binded in multpile times in the grid... so when i took this toogle in the UI bootstrap , Had an issue in Having multiple times toogle switch when i click single toggle control all the switch gets fired due to calling the function without parameters..

So  list has an set of arrays like this  {list = Object {Id: 82, Name: "16099626-8f54-4602-8c8c-9ccba7c953aa", FeedType: 1, ImageUrl: "h
IsActive = true }

Function:

  $scope.changeStatus = function(list) {  
                     
            list.IsActive = !list.IsActive;
             
      }

when you pass the parameters list it will trigger a particular object  not all the toggle switch control fires...

Reference from :

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope){
  $scope.items = [{id:1},{id:2},{id:3}];
 
  $scope.toogle = function(i)
  {
    i.booleanVal = !i.booleanVal ;
   
  };
 
});

Step4: 




Enjoy Folks