Меню
Автор:
Фильтры
Что нового
Реклама

Помощь при коде (1 Viewer)

  • Автор темы Shifr L
  • Дата начала
Shifr L

Shifr L

Посетитель
Регистрация
11 Мар 2022
Сообщения
116
Реакции
45
Добрый вечер друзья! Помогите обновить код для новых версий 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');
     });
   });
};
 
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() == "Скрыть" ? "Подробнее" : "Скрыть");
        });
    });
});

Смысл я думаю ты понял!
 
Большое спасибо, есть момент только когда текст будет маленьким его не надо сворачивать, здесь смотрю таких кодов нету, (прошу прощение, я не очень владею js, обьясните смертному как я, если не будет сложно)
 
хотел бы чтобы написанный выше код заработало, или похожий😌
 
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;
    });            
});

Вот этот похожий! Высоту блока задаёшь в стилях! Пример можешь посмотреть здесь
 
Очень спасибо, а можно сделать так, чтобы изначально не было кнопок развернуть свернуть, после высоты 300 появился?
 
Shifr L сказал(а):
Очень спасибо, а можно сделать так, чтобы изначально не было кнопок развернуть свернуть, после высоты 300 появился?
Нажмите, чтобы раскрыть...
Не совсем понятно, что ты имеешь ввиду? :unsure: ты хочешь реализовать, чтобы если текст меньше заданной высоты кнопки небыло видно, а если больше то она появлялась?
 
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 и уже из-за этого не пашет и данный код, так как он находится ниже. Чтобы поправить надо в консоль смотреть конкретную ошибку, а не править то, не знаю что.
 
NullRelease сказал(а):
Не совсем понятно, что ты имеешь ввиду? :unsure: ты хочешь реализовать, чтобы если текст меньше заданной высоты кнопки небыло видно, а если больше то она появлялась?
Нажмите, чтобы раскрыть...
Попали в точку.😉
 
mrincredible сказал(а):
А почему ты утверждаешь что у этого кода проблема на jquery 3? Может это в чем другом проблема на jquery 3 и уже из-за этого не пашет и данный код, так как он находится ниже. Чтобы поправить надо в консоль смотреть конкретную ошибку, а не править то, не знаю что.
Нажмите, чтобы раскрыть...
Я так решил, потому что на старом версий DLE у меня был установлен Jquery 2.0, когда обновил до новой версий DLE (jquery 3.0), у меня перестало работать, еще проверил через ИИ. Спасибо!
 
Shifr L сказал(а):
Я так решил, потому что на старом версий DLE у меня был установлен Jquery 2.0, когда обновил до новой версий DLE (jquery 3.0), у меня перестало работать, еще проверил через ИИ. Спасибо!
Нажмите, чтобы раскрыть...
Ну-ну. Я не поленился, проверил на 16.1, включен jquery 3, скопировал код из старт поста, в шаблоне отключены все другие скрипты, кроме дле {jsfiles}.
Результат: работает, сворачивает и разворачивает при клике и сворачивает обратно при клике, ошибок в консоли нет.
Походу ИИ ошибся и требует доработки.
 
mrincredible сказал(а):
Ну-ну. Я не поленился, проверил на 16.1, включен jquery 3, скопировал код из старт поста, в шаблоне отключены все другие скрипты, кроме дле {jsfiles}.
Результат: работает, сворачивает и разворачивает при клике и сворачивает обратно при клике, ошибок в консоли нет.
Походу ИИ ошибся и требует доработки.
Нажмите, чтобы раскрыть...
и это правда!
 
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;
});
 
Readmore

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
});

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

Пользователи, просматривающие данную тему

Всего: 1 (пользователей: 0, гостей: 1)
Верх