eq(target).height() incompatible between browsers

I’m having trouble using a slider in Google Chrome.

Problem occurs because padding-botom is set to 0% and images are not displayed.

The padding-bottom is set according to the result of the following function:

function get_height (target) {
    return ((slides.eq (target) .height () / slider.width ()) * 100) + '%';
}

As there are two images, the target one hour will be 0 and the other time will be 1.
In Google Chrome, the result of slides.eq(target).height() is always 0, while in firefox it ranges from 0 to 88, where it calculates the padding correctly.
Does anyone have any idea why the height() function works differently in browsers?

Below is the complete code:

;(function($, window, document, undefined ) {

$.fn.sss = function(options) {

// Options

    var settings = $.extend({
    slideShow : true,
    startOn : 0,
    speed : 3500,
    transition : 400,
    arrows : true
    }, options);

    return this.each(function() {

// Variables

    var
    wrapper = $(this),
    slides = wrapper.find('a').wrapAll('<div class="sss"/>').addClass('ssslide'),
    slider = wrapper.find('.sss'),
    slide_count = slides.length,
    transition = settings.transition,
    starting_slide = settings.startOn,
    target = starting_slide > slide_count - 1 ? 0 : starting_slide,
    animating = false,
    clicked,
    timer,
    key,
    prev,
    next,

// Reset Slideshow

    reset_timer = settings.slideShow ? function() {
    clearTimeout(timer);
    timer = setTimeout(next_slide, settings.speed);
    } : $.noop;

// Animate Slider

    function get_height(target) {
        console.log(target);
        return ((slides.eq(target).height() / slider.width()) * 100) + '%';
    }

    function animate_slide(target) {
    if (!animating) {
    animating = true;
    var target_slide = slides.eq(target);

    target_slide.fadeIn(transition);
    slides.not(target_slide).fadeOut(transition);

    slider.animate({paddingBottom: get_height(target)}, transition,  function() {
    animating = false;
    });

    reset_timer();

    }};

// Next Slide

    function next_slide() {
    target = target === slide_count - 1 ? 0 : target + 1;
    animate_slide(target);
    }

// Prev Slide

    function prev_slide() {
    target = target === 0 ? slide_count - 1 : target - 1;
    animate_slide(target);
    }

    if (settings.arrows) {
    slider.append('<div class="sssprev"/>', '<div class="sssnext"/>');
    }

    next = slider.find('.sssnext'),
    prev = slider.find('.sssprev');

    $(window).load(function() {

    slider.css({paddingBottom: get_height(target)}).click(function(e) {
    clicked = $(e.target);
    if (clicked.is(next)) { next_slide() }
    else if (clicked.is(prev)) { prev_slide() }
    });

    animate_slide(target);

    $(document).keydown(function(e) {
    key = e.keyCode;
    if (key === 39) { next_slide() }
    else if (key === 37) { prev_slide() }
    });

    });
// End

});

};
})(jQuery, window, document);

FIREFOX

FIREFOX

CHROME

CHROME

Archive from: https://stackoverflow.com/questions/59042100/eqtarget-height-incompatible-between-browsers

Leave a Reply

Your email address will not be published. Required fields are marked *