update breadcrumbs to be dynamic, pull in title as last node
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 );