Search options: separate word search diacritics
Paper / snippets /

normalize

normalize heights

    //  < normalize_heights init >
    var sync_about_el = $('.sxn_about ul li p');
    var sync_about = $('#sync_about');
    
    //  < normalize_heights >
    function normalize_heights( elements, sync_element ) {
      var max_height = 0;
      elements.height('auto').each(function(){
        if( sync_element.css('z-index') == 1 ) {
          var current_height = $(this).height();
          if( current_height > max_height ) {max_height = current_height;}
        } else {
          max_height = ('auto');
        }
      });
      elements.height( max_height );
    }
    //  
    
    //  < init >
    normalize_heights( sync_about_el, sync_about );
    //  
    
    //  < on load >
    $(window).on("load", function() {
      normalize_heights( sync_about_el, sync_about );
    });
    //  
    
    //  < resize >
    $(window).resize(function(){
      rTO = setTimeout(function(){
        clearTimeout(rTO);
        normalize_heights( sync_about_el, sync_about );
      }, 100);
    });
    //  

Slick

    /*  equal height using flex box  */
    .sxn_case_results .slick-track {
      display: flex;
      align-items: center; /*optional*/
      height: auto;
      justify-content: center; /*optional*/
    }
    
    //  Equal height slides
    //
    //  Ok guys i found an easy solution. Just add a setPosition callback function (fires after position/size changes) which sets the height of the slides to the height of the slider (slideTrack):
    $('.slider').slick({
      autoplay: false,
      dots: false,
      infinite: false,
      arrows: false,
      slidesToShow: 2,
      slidesToScroll: 2,
      rows: 0
    })
    .on('setPosition', function (event, slick) {
      slick.$slides.css( 'height', 'auto' );
      slick.$slides.css('height', slick.$slideTrack.height() + 'px');
    });
    //  Dont forget that your slides need to have full height:
    CSS
    .slide {
      height: 100%;
    }
    //  ref:
    //  https://codepen.io/JTParrett/pen/CAglw
    
    //  or with js + need to add css to position element in the middle
    var nc_case_results = $('.sxn_case_results ul');
    nc_case_results.on('setPosition', function () {
      nc_actn_resize_slick( nc_case_results );
    });
    $(window).on('resize', function(e) {
      nc_actn_resize_slick( nc_case_results );
    });
    function nc_actn_resize_slick( nc_slick_element ){
      var $slick_slider = nc_slick_element;
      $slick_slider.find('.slick-slide').height('auto');
    
      var slick_track = $slick_slider.find('.slick-track');
      var slick_track_height = $(slick_track).height();
    
      $slick_slider.find('.slick-slide').css('height', slick_track_height + 'px');
    }
    // css
    .sxn_testimonials .slide_cont_text {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: perspective(1px) translateY(-50%);
      display: block;
    }
    //  < normalize_heights >
    var sync_practice_areas = $('#sync_practice_areas');
    var sync_practice_areas_el = $('.sxn_practice_areas li a');
    
    var sync_badges = $('#sync_badges');
    var sync_badges_el = $('.sxn_badges li');
    
    function normalize_heights( sync_class, items, height ) {
      height = height || 'auto';
      var max_height = 0;
      items.height('auto').each(function(){
        if( sync_class.css('z-index') == 1 ) {
          var current_height = $(this).Height();
          if( current_height > max_height ) {max_height = current_height;}
        } else if ( height == 'set' ) {
          max_height = $(this).outerHeight();
        } else {
          max_height = ('auto');
        }
      });
      items.Height( max_height );
    }
    //  
    
    normalize_heights( sync_practice_areas, sync_practice_areas_el, 'set' );
    normalize_heights( sync_badges, sync_badges_el );