Okay
  Public Ticket #187093
First Slide Cached CSS Calculation Problem
Closed

Comments

  • Mike started the conversation

    Howdy!

    having a problem on the nectar slider i ran into today. It has someting todo with the nectar-slider.js calculation of the "top" css anchor. Check it out for yourself. Im gonna post my page after this message in private. Load the site and everything works like a charm, but click on the upper left logo and you will see, that text inside the first slide is getting pushed upwards. Checking the code tells me that instead of a top: of 85px he calculated like 50.5px but only on the first slide. For your information i am caching the css/java files via .htaccess and for me it looks like he is trying to make a calculation based on a cached css file or so ... Because if you empty your cache and reload first slide looks quite fine?

    Here is the snippet out of nectar-slider.js which I was talking about. Do you have a solution for this?

    function slideContentPos(){
    $('.swiper-wrapper').each(function(){
    //etxra space if first slider in section
    var $extraHeight = ($(this).parents('.nectar-slider-wrap').hasClass('first-section') || $(this).parents('.parallax_slider_outer').hasClass('first-section')) ? 30 : 0;
    var $sliderHeight = parseInt($(this).parents('.swiper-container').attr('data-height'));
    $(this).find('.swiper-slide').each(function(){
    var $contentHeight = $(this).find('.content').height();
    var $contentItems = $(this).find('.content > *').length;
    if($(this).find('.content > *').css('padding-top') == '25px') $contentHeight = $contentHeight - 25*$contentItems;
    if($(this).attr('data-y-pos') == 'top'){
    var $topHeight = ($contentHeight/2) < (($sliderHeight/4) - 30) ? (($sliderHeight/4) - ($contentHeight/2)) + 20 : $sliderHeight/8;
    $(this).find('.content').css('top', $topHeight + 'px');
    }
    else if($(this).attr('data-y-pos') == 'middle') {
    $(this).find('.content').css('top', ($sliderHeight/2) - ($contentHeight/2) + 'px');
    }
    else {
    if($contentHeight > 180) {
    $(this).find('.content').css('top', ($sliderHeight/2) - ($contentHeight/10) + 'px');
    } else {
    $(this).find('.content').css('top', ($sliderHeight/2) + ($contentHeight/9) + 'px');
    }
    }
    });
    });
    }
    
  •   Mike replied privately
  • Mike replied

    Arrr... And again I think I found a trick: 

    If anybody has ever the same prob:

    Putting the following snippy inside the Custom CSS works...at least for me...

    /* KARMA MY BANANA */
    .swiper-slide .container .content {
        top:85px!important;
    }