Помощь при коде

CodeSmith · 4 Окт 2023

Добрый вечер друзья! Помогите обновить код для новых версий DLE (Jquery 3.0), сам попробовал исправить, все работает кроме кнопки скрыть не сворачивается.

Код:

/*Развернуть и свернуть*/
$(document).ready(function(){
   $('.page__text br').remove();
   $('.movie-desc').wTextSlicer({
    height: '165',
    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');
     });
   });
};

NullRelease · 4 Окт 2023

Shifr L сказал(а):
Добрый вечер друзья! Помогите обновить код для новых версий DLE (Jquery 3.0), сам попробовал исправить, все работает кроме кнопки скрыть не сворачивается.

Код:

/*Развернуть и свернуть*/ $(document).ready(function(){ $('.page__text br').remove(); $('.movie-desc').wTextSlicer({ height: '165', textExpand: 'Подробнее...', textHide: 'Скрыть' }); }); };

HTML:

<div class="item_box">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <span class="show-more">Подробнее</span>
    <div id="more_hide">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

JavaScript:

jQuery(document).ready(function () {
   
    "use strict";
   
    $(".item_box").each(function () {
        let more = $(this).find(".show-more");
        let hide = $(this).find("#more_hide");
        hide.hide();
        more.click(function () {
            hide.slideToggle();
            more.text(more.text() == "Скрыть" ? "Подробнее" : "Скрыть");
        });
    });
});

Смысл я думаю ты понял!

CodeSmith · 4 Окт 2023

Большое спасибо, есть момент только когда текст будет маленьким его не надо сворачивать, здесь смотрю таких кодов нету, (прошу прощение, я не очень владею js, обьясните смертному как я, если не будет сложно)

CodeSmith · 4 Окт 2023

хотел бы чтобы написанный выше код заработало, или похожий

NullRelease · 4 Окт 2023

Shifr L сказал(а):
хотел бы чтобы написанный выше код заработало, или похожий

HTML:

<div class="content_block hide">
    <p>Блок длинного текста...</p>
</div>
<a class="content_toggle" href="#">Подробнее</a>

CSS:

.content_block {
    overflow: hidden;
    position: relative;
}
.content_block.hide {
    height: 300px;
}
.content_block.hide:after{
    content: "";
    display: block;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%)
}

JavaScript:

$(document).ready(function(){
    $('.content_toggle').click(function(){
        $('.content_block').toggleClass('hide');
        if ($('.content_block').hasClass('hide')) {
            $('.content_toggle').html('Подробнее');
        } else {
            $('.content_toggle').html('Скрыть');
        }    
        return false;
    });            
});

Вот этот похожий! Высоту блока задаёшь в стилях! Пример можешь посмотреть здесь

CodeSmith · 4 Окт 2023

Очень спасибо, а можно сделать так, чтобы изначально не было кнопок развернуть свернуть, после высоты 300 появился?

NullRelease · 4 Окт 2023

Shifr L сказал(а):
Очень спасибо, а можно сделать так, чтобы изначально не было кнопок развернуть свернуть, после высоты 300 появился?

Не совсем понятно, что ты имеешь ввиду?

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

mrincredible · 5 Окт 2023

Shifr L сказал(а):

Добрый вечер друзья! Помогите обновить код для новых версий DLE (Jquery 3.0), сам попробовал исправить, все работает кроме кнопки скрыть не сворачивается.

Код:

/*Развернуть и свернуть*/
$(document).ready(function(){
   $('.page__text br').remove();
   $('.movie-desc').wTextSlicer({
    height: '165',
    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');
     });
   });
};

А почему ты утверждаешь что у этого кода проблема на jquery 3? Может это в чем другом проблема на jquery 3 и уже из-за этого не пашет и данный код, так как он находится ниже. Чтобы поправить надо в консоль смотреть конкретную ошибку, а не править то, не знаю что.

CodeSmith · 5 Окт 2023

NullRelease сказал(а):
Не совсем понятно, что ты имеешь ввиду? ты хочешь реализовать, чтобы если текст меньше заданной высоты кнопки небыло видно, а если больше то она появлялась?

Попали в точку.

CodeSmith · 5 Окт 2023

mrincredible сказал(а):
А почему ты утверждаешь что у этого кода проблема на jquery 3? Может это в чем другом проблема на jquery 3 и уже из-за этого не пашет и данный код, так как он находится ниже. Чтобы поправить надо в консоль смотреть конкретную ошибку, а не править то, не знаю что.

Я так решил, потому что на старом версий DLE у меня был установлен Jquery 2.0, когда обновил до новой версий DLE (jquery 3.0), у меня перестало работать, еще проверил через ИИ. Спасибо!

mrincredible · 5 Окт 2023

Shifr L сказал(а):
Я так решил, потому что на старом версий DLE у меня был установлен Jquery 2.0, когда обновил до новой версий DLE (jquery 3.0), у меня перестало работать, еще проверил через ИИ. Спасибо!

Ну-ну. Я не поленился, проверил на 16.1, включен jquery 3, скопировал код из старт поста, в шаблоне отключены все другие скрипты, кроме дле {jsfiles}.
Результат: работает, сворачивает и разворачивает при клике и сворачивает обратно при клике, ошибок в консоли нет.
Походу ИИ ошибся и требует доработки.

NullRelease · 5 Окт 2023

mrincredible сказал(а):
Ну-ну. Я не поленился, проверил на 16.1, включен jquery 3, скопировал код из старт поста, в шаблоне отключены все другие скрипты, кроме дле {jsfiles}.
Результат: работает, сворачивает и разворачивает при клике и сворачивает обратно при клике, ошибок в консоли нет.
Походу ИИ ошибся и требует доработки.

и это правда!

NullRelease · 5 Окт 2023

Shifr L сказал(а):
Попали в точку.

JavaScript:

$(document).ready(function() {
    var addExpander = function() {
            if (this.scrollHeight <= collapsedHeight) {
                // remove expander button if it exists
            } else if (this /* contains no expander button */) {
                // add the expander with its click function
            }
        };

    // call it on all collapsed text divs currently in the document
    $('.text.collapsed').each(addExpander);

    // how to call it again after changing a text div's content:
    addExpander.call(/* your changed div */);
});

Наверное как-то так!

или так:

JavaScript:

const content = document.querySelector('.content');
const btnShowMore = document.querySelector('.btn-show-more');
const maxHeight = 300;
let isContentExpended = false;
if (content.offsetHeight <= maxHeight) {
   btnShowMore.style.display = 'none';
}
btnShowMore.addEventListener('click', function() {
   if (!isContentExpended) {
      content.style.maxHeight = 'none';
      btnShowMore.textContent = 'Скрыть';
   } else {
      content.style.maxHeight = `${maxHeight}px`;
      btnShowMore.textContent = 'Показать больше';
   }
   isContentExpended = !isContentExpended;
});

NullRelease · 5 Окт 2023

Readmore.js - плагин скрывающий большой текст

Простой вызов плагина:

JavaScript:

$('article').readmore();

Можно вызвать с дополнительными опциями:

JavaScript:

$('article').readmore({
    speed: 75,
    maxHeight: 500
});

speed: 100 (в миллисекундах)
maxHeight: 200 (в пикселях)
heightMargin: 16 (в пикселях, позволяет избежать ломания блоков, которые лишь немного больше заданной высоты - maxHeight)
moreLink: '<a href="#">Подробнее</a>'
lessLink: '<a href="#">Скрыть</a>'
embedCSS: true (вставляет динамический CSS стили, установите false, если все стили вы будете подключаать сами в своём файле стилей)
sectionCSS: 'display: block; width: 100%;' (устанавливает стиль блоков)
startOpen: false (по дефолту блок скрыт, при параметре true - текст будет показан полностью, но с возможностью скрыть)
expandedClass: 'readmore-js-expanded' (класс добавляемый к развернутому блоку)
collapsedClass: 'readmore-js-collapsed' (класс добавляемый к свернутому блоку)
beforeToggle: function() {} ( функция вызываемая после нажатия на кнопку "Подробнее" или "Скрыть", но до того, как блок свернется или развернется)
afterToggle: function() {} ( функция вызываемая после того, как блок развернется или свернется)

Если у элемента задана максимальная высота в CSS стилях, то плагин будет использовать именно это значение, а не значение опции maxHeight

Обратный вызов
Функции обратного вызова, beforeToggle() и afterToggle() получают те же самые аргументы: trigger, element и more.

trigger: кнопки "Подробнее" или "Скрыть"
element: блок, который в настоящее время сворачивается или разворачивается
more: boolean, true - означает, что блок разворачивается

Пример обратного вызова
Вот пример использования функции afterToggle, для прокрутки к верхней части блока, когда нажата кнопка "Скрыть":

JavaScript:

$('article').readmore({
    afterToggle: function(trigger, element, more) {
        if(! more) { // кнопка "Скрыть" была нажата
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });
        }
    }
});

Отключить функционал плагина можно так:

JavaScript:

$('article').readmore('destroy');

Или же вы можете указать элемент, на котором плагин не должен работать:

JavaScript:

$('article:first').readmore('destroy');

По умолчанию плагин вставляет следующий CSS код на страницу:

CSS:

.readmore-js-toggle, .readmore-js-section {
    display: block;
    width: 100%;
}
.readmore-js-section {
    overflow: hidden;
}

С помощью опции плагина можно изменить первое правило:

JavaScript:

$('article').readmore({
    sectionCSS: 'display: inline-block; width: 50%;'
});

Если вы хотите использовать свой файл стилей, то в настройках плагина укажите false:

JavaScript:

$('article').readmore({
    embedCSS: false
});

Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

MaHarder · 5 Окт 2023

Shifr L сказал(а):
еще проверил через ИИ

это не показатель. ИИ может подсказать в каком направлении стоит работать, но он не сделает всё работу за вас

CodeSmith · 6 Окт 2023

mrincredible сказал(а):
Ну-ну. Я не поленился, проверил на 16.1, включен jquery 3, скопировал код из старт поста, в шаблоне отключены все другие скрипты, кроме дле {jsfiles}.
Результат: работает, сворачивает и разворачивает при клике и сворачивает обратно при клике, ошибок в консоли нет.
Походу ИИ ошибся и требует доработки.

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

Slavchik · 6 Окт 2023

Вот посмотри, нашел -

Скрытое содержимое доступно для зарегистрированных пользователей!

CodeSmith · 10 Окт 2023

Slavchik сказал(а):
Вот посмотри, нашел -
*** Скрытый текст не может быть процитирован. ***

Спасибо за труд! ценю.

Поиск

Помощь при коде

CodeSmith

Участник

NullRelease

Модератор

CodeSmith

Участник

CodeSmith

Участник

NullRelease

Модератор

CodeSmith

Участник

NullRelease

Модератор

mrincredible

Посетитель

CodeSmith

Участник

CodeSmith

Участник

mrincredible

Посетитель

NullRelease

Модератор

NullRelease

Модератор

NullRelease

Модератор

MaHarder

Модератор

CodeSmith

Участник

Slavchik

Посетитель

CodeSmith

Участник