Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.03.2020, 13:24
Интересующийся
Отправить личное сообщение для Владислав_Со Посмотреть профиль Найти все сообщения от Владислав_Со
 
Регистрация: 03.03.2020
Сообщений: 15

Показать/скрыть часть блока (максимальная высота)
Добрый день. Не могу разобраться как сделать так, чтобы открывался блок не по заданной максимальной высоте скрипта, а по высоте блока в котором этот скрипт сидит. Гребо говоря.. задана высота 200px (выше есть кусок текста 200px, а потом обрезается, и чтобы увидеть его, нужно нажать на кнопку.. и блок разширяется), но максимальная высота всегда одинаковая.. Как убрать это? Проблема видна в мобильной версии, т.к. блок не весь открывается (ограничение в высоте), то част текста не видна при открытии.

(function($) {
    $.fn.moreContent = function(params) {
        this.each(function(index, el) {
            var options = $.extend({}, $.fn.moreContent.options, $(el).data());
            options = $.extend({}, options, params);
            options.instance = $(el);
            options = $.fn.moreContent.init(options);
        });
        return this;
    };
    $.fn.moreContent.init = function(options) {
        options.button = $('<button class="'+ options.btnClass +'"/>').text(options.btn);
        options.wrapper = $('<div class="mc-wrapper"/>');
        options.instance.autoHeight = options.instance.css('height', 'auto').height();
        // make it wrap
        options.instance.wrap(options.wrapper);
        // insert button after element
        options.button.insertAfter(options.instance);
        // set default height for element
        options.instance.css({
            height: options.height,
            overflow: 'hidden'
        });
        // on click perform $.fn.moreContent.click
        options.button.click(function(e) {
            $.fn.moreContent.click(options)
        });
        return options;
    };
    $.fn.moreContent.click = function(options) {
        if (!options.instance.hasClass('active')) {
            options.instance.velocity(
            {
                height: options.instance.autoHeight
            },
            {
                duration: options.duration,
                complete: function() {
                    options.instance.addClass('active');
                    options.button.addClass('active').text(options.btnActive);
                }
            }, 'ease-in-out');
        } else {
            options.instance.velocity(
            {
                height: options.height
            },
            {
                duration: options.duration,
                complete: function() {
                    options.instance.removeClass('active');
                    options.button.removeClass('active').text(options.btn);
                }
            }, 'ease-in-out');
        }
    };
})(jQuery);

$(document).ready(function() {
$('.moreContent').moreContent({
height: 205,
duration: 1000,
btn: 'подробное описание ...',
btnActive: '(свернуть)',
btnClass: 'btn-default'
});
});

Последний раз редактировалось Владислав_Со, 03.03.2020 в 13:54.
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2020, 13:27
Интересующийся
Отправить личное сообщение для Владислав_Со Посмотреть профиль Найти все сообщения от Владислав_Со
 
Регистрация: 03.03.2020
Сообщений: 15

<article class="articles__item" data-color="blue">
                          <div class="articles__item__content container moreContent">
                            <div class="articles__item__text">
                              <div class="title">
                                <div class="icon" style="background-image: url(images/portfolio/articles__fiscoclicicon.jpg)"></div><span class="text">FiscoClic</span>
                              </div>
                              <div class="download"><a class="fab fa-apple" href="https://itunes.apple.com/us/app/fiscoclic/id1340368830?mt=8&amp;ign-mpt=uo=4" target="_blank"></a><a class="fab fa-android" href="https://play.google.com/store/apps/details?id=com.fiscoclic" target="_blank"></a>
                              </div><span class="description">FiscoClic en la nube funciona en cualquier dispositivo las 24 horas del día con una disponibilidad garantizada del 99.99% lograda por más de 5 años consecutivos. La nueva experiencia del FiscoClic CFDI 3.3 permite que la captura de una factura promedio puede realizarse en menos de 5 segundos con el nuevo diseño de componentes inteligentes.</span>                              
                            </div>
                            <div class="articles__item__img"><img class="apple__body" src="images/portfolio/articles__fiscoclicApple.png"><img class="android__body" src="images/portfolio/articles__fiscoclicAndroid.png">
                            </div>
                          </div>
 </article>

типа так

Последний раз редактировалось Владислав_Со, 03.03.2020 в 14:02.
Ответить с цитированием
  #3 (permalink)  
Старый 03.03.2020, 13:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #4 (permalink)  
Старый 03.03.2020, 13:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Владислав_Со,
заменить
options.instance.autoHeight = options.instance.css('height', 'auto').height();


на
options.instance.autoHeight = options.instance[0].scrollHeight;
Ответить с цитированием
  #5 (permalink)  
Старый 03.03.2020, 14:01
Интересующийся
Отправить личное сообщение для Владислав_Со Посмотреть профиль Найти все сообщения от Владислав_Со
 
Регистрация: 03.03.2020
Сообщений: 15

Понял, не знал. Первый раз на таких форумах Спасибо за замечание!
И огромное спасибо за помощь с кодом !!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery - высота блока как у соседнего - проблема с обновлением самой высоты dropoff jQuery 13 26.12.2018 17:03
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Высота блока Makkssimka (X)HTML/CSS 2 20.02.2013 22:41
Высота блока gJam (X)HTML/CSS 0 13.07.2012 17:16
Высота блока в зависимости от высоты браузера andreykor Общие вопросы Javascript 4 23.05.2011 09:56