Есть ли адаптивные аналоги Slidable.js?

Question

[GreenMan1899]

slidable используется для обрезания текста по заданной высоте и позволяет его раскрывать/скрывать. Однако он не подстраивается, если вдруг изменяется ширина окна, и текст внутри контейнера slidable становится выше/ниже. Либо когда slidable нужен чтобы скрывать текст только на телефонах, но на десктопе он не нужен.
Как к примеру на этом сайте в блоке Металлические двери от производителя. Если зайти сначала с маленького окна=мобильника, то slidable активизируется, но если переключить на десктопную версию отображения, то он все равно останется, хотя этого не нужно. И его не будет, только если перезагрузить страницу.

Comments

[one_day]

как же сложно читать такие вопросы

[GreenMan1899]

one_day, что именно вам показалось непонятным?

[one_day]

имхо, перепечатаны слова заказчика, без попытки самому разобраться

[Сергей]

А я вообще проблемы не вижу. Потому что такой глюк возникает только у разработчика, когда он тягает просмотр кода туда-сюда. Клиент зайдёт с мобильного и вряд ли сможет увеличь окно до десктопа)))

Answer 1

[Ridz]

убрать все вызовы slidable() из кода
поставить это

jQuery(function() {
    function init() {
        jQuery(".slidable .tall").each(function(indx, element) {
            var height = jQuery(this).data("height");
            if (height) {
                jQuery(this).css({"height": ""});
                jQuery(this).removeData("height")
            }
        });
        jQuery(".slidable .controller").remove();
        if (jQuery(window).width() < 426) jQuery(".slidable").slidable({
            minimal: 200,
            speed: 800,
            controls: ["<span>Читать далее</span>", "<span>Скрыть</span>"]
        })
    }
    jQuery(window).resize(init);
    init()
});

Comments

[GreenMan1899]

и у вас заработало?

[Ridz]

GreenMan1899, да
для проверки, запустить в консоли ( до измений) заменив строкуjQuery(window).resize(init);на jQuery(window).off("resize").resize(init);

[Ridz]

и изменить ширину браузера, меньше 426 должен появлятся спойлер, больше 426 убиратся.

[GreenMan1899]

Ridz, да-да спасибо уже разобрался. Только перестали скрипты применяться на .controller
https://codepen.io/danilst/pen/VMZqNR
но это уже другая история

[Ridz]

GreenMan1899,
возможно вы хотели так ...

$(function() {
    function init() {
        $(".slidable .tall").each(function(indx, element) {
            var height = $(this).data("height");
            if (height) {
                $(this).css({
                    "height": ""
                });
                $(this).removeData("height")
            }
        });
        $(".slidable .controller").remove();
        $(".slidable .tall").css({
            "background": ""
        });
        if ($(window).width() < 1E3) {
            $(".slidable").slidable({
                minimal: 200,
                speed: 800,
                controls: ["<span>Читать далее</span>", "<span>Скрыть</span>"]
            });
            $(".slidable .tall").each(function(indx,
                element) {
                var controller = $(this).next(".controller");
                if (controller.length) {
                    controller.css({
                        "backgroundColor": "green"
                    });
                    $(this).css({
                        "backgroundColor": "red"
                    })
                }
            })
        }
    }
    $(window).resize(init);
    init()
});