Шаблоны для Datalife Engine

Купить платные адаптивные DLE шаблоны
по приятным ценам.

Время работы: 10.00 - 18.00 (МСК, пн-пт)
Telegram: @vugluskr2023
Техническая поддержка
Корзина 0
Внимание: Обновление шаблонов до 15 и 17.1 версии. Решение проблем с большими краткими новостями, постерами, рейтингом.
Адаптивные dle шаблоны   Советы и новости   Сворачивание и разворачивание длинного текста

Сворачивание и разворачивание длинного текста

1. В ваш css файл добавить


 .slice {overflow:hidden; position:relative; transition:height .2s;}
    .slice-masked:before {content:'';position:absolute;z-index:1;bottom:0px;left:0;right:0;height:120px;pointer-events:none;
    background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 100%);
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);}
    .slice-btn {margin:20px 0;  font-weight:700;}
    .slice-btn span {display:inline-block; cursor:pointer; text-decoration:underline; color:#f0542e;}


2. В ваш js файл в конец добавить


$(document).ready(function(){
       $('.movie-desc').wTextSlicer({
        height: '200',
        textExpand: 'Развернуть сюжет',
        textHide: 'Свернуть сюжет'
       });
    });

    /*!  wTextSlicer v 1.01 */

    jQuery.fn.wTextSlicer = function(options){
       var options = jQuery.extend({
        height: '200',
        textExpand: 'expand text',
        textHide: 'hide text'
        },options);
       return this.each(function() {
         var a = $(this),
           h = a.outerHeight();
         if ( h > options.height ) {
           a.addClass('slice slice-masked').attr('data-height',h).height(options.height).after('<div class="slice-btn"><span>'+options.textExpand+'</span></div>');
         };
         var bt = $(this).next('.slice-btn').children('span');
         bt.click(function() {
           var ah = parseInt(a.css("height"), 10);
           ah == h ? a.css({'height':options.height}) : a.css({'height':h});
           bt.text(bt.text() == options.textExpand ? options.textHide : options.textExpand);
           a.toggleClass('slice-masked');
         });
       });
    };


3. Как пользоваться.
Пусть у вас есть
<div class="movie-desc">МЫ ХОТИМ ЭТО СВЕРНУТЬ</div>
.
Тогда


$(document).ready(function(){
       $('.movie-desc').wTextSlicer({
        height: '200',
        textExpand: 'Развернуть сюжет',
        textHide: 'Свернуть сюжет'
       });
    });


где 200 - высота, при которой свернется.

Пусть у нас два блока
<div class="movie-desc">МЫ ХОТИМ ЭТО СВЕРНУТЬ</div> и <div class="movie-lines">МЫ ХОТИМ ЭТО СВЕРНУТЬ ТОЖЕ</div>
.
Тогда


 $(document).ready(function(){
       $('.movie-desc').wTextSlicer({
        height: '200',
        textExpand: 'Развернуть сюжет',
        textHide: 'Свернуть сюжет'
       });
       $('.movie-lines').wTextSlicer({
        height: '100',
        textExpand: 'Показать больше',
        textHide: 'Спрятать'
       });
    });
Написать отзыв
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
У меня было пять яблок, два яблока я съел. Сколько у меня осталось яблок? Напиши буквой например десять
Отзывов (4)
krock
krock Гости 24 апреля 2019 18:56
В твоей статье есть пример для двух разных блоков, а как сделать разные тени :befor и другие стили для кнопки Развернуть?
webrambo
webrambo Администраторы 25 апреля 2019 09:20
krock,
<div class="some-class">text</div>
.some-class.slice-masked:before {}
.some-class.slice + .slice-btn {}
archer
archer Посетители 27 мая 2020 09:35
Скрипт некорректно работает, если в тексте расположены изображения. Он разворачивается, но не до конца. Часть текста и картинок не видно(((
webrambo
webrambo Администраторы 27 мая 2020 09:41
archer,ничего удивительного, скрипт для текста. Чтобы определить размер картинок нужно ждать ее полной загрузки, проверять это, и лишь потом сворачивать. В этом вам может помочь https://imagesloaded.desandro.com/ - это все, что я могу сказать.