Сокращаем полное описание больше/меньше

Скрипты DLE / DLE модули


Сокращаем полное описание большеСкрипт сокращает вывод содержимого полной новости и раскрывает её при нажатии на ссылку > БОЛЬШЕ. И соответственно на оборот, при нажатии > МЕНЬШЕ - скрывает часть содержимого. Версия DLE: 13.x-14.x

Сокращаем полное описание меньше

Установка:
1. В файл CSS шаблона добавить стили:
.full-desc{overflow:hidden;position:relative;transition:height .2s}
.text-less{margin-bottom:0!important}
.text-less:before{content:'';position:absolute;z-index:1;bottom:0;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%)}
.show-more{margin:0 0 20px;font-size:12px;font-weight:700}
.show-more span{display:inline-block;cursor:pointer;text-decoration:underline;color:#f0542e}

2. Подключить JS код:
<script>
$(document).ready(function() {
$('.full-desc').ShortText({
  height: '200',
  text: 'Больше'
});
});

jQuery.fn.ShortText = function(e) {
var e = jQuery.extend({
  height: "200",
  text: "Больше"
}, e);
return this.each(function() {
  var i = $(this),
  t = i.height();
  t > e.height && i.addClass("full-desc text-less").height(e.height).after('<div class="show-more"><span>' + e.text + "</span></div>"), $(".show-more span").click(function() {
  var i = $(this),
  s = $(this).parent().prev(".full-desc");
  ah = parseInt(s.css("height"), 10), ah == t ? s.css({
  height: e.height
  }) : s.css({
  height: t
  }), i.text(i.text() == e.text ? "Меньше" : e.text), s.toggleClass("text-less")
  })
})
};
</script>

3. В нужном месте fullstory.tpl добавить:
<div class="full-desc clearfix">{full-story}</div>

Сохрани для себя!





Смотри так же похожее ниже:



Изменить стандартный Ajax окно для uCoz
Изменить стандартный Ajax окно для uCoz
В этом материале представлены стили CSS, чтоб вы могли изменить стандартное Ajax окно, который идет в темном оформление, на свой оттенок цвета. Ведь иногда Ajax совершенно не подходит под основную
Кнопка скачать для uCoz c эффектами на CSS
Кнопка скачать для uCoz c эффектами на CSS
Превосходная кнопка на чистом CSS и с интересным эффектом, которая идет для скачивания файлов на сайте uCoz, где при наведении показывает данные. Если вы ищете кнопку с функцией для загрузок, то эта
Варианты эффекта CSS увеличение изображений
Варианты эффекта CSS увеличение изображений
Оригинальное решение на 2 варианта для эффективного появление изображений, где происходит эффект в реализации на сайтах разных систем. Но здесь данное решение эффекта по умолчанию было настроено на
Скрипт для uCoz: Вид материалов c красивым эффектом
Скрипт для uCoz: Вид материалов c красивым эффектом
Еще один вид материалов для файлов или для блога, на котором установлен красивый эффект изображение, что также идет под адаптивной версткой. Что после установки пользователи и и гости сайта будут
Скрипт режим чтения v2 для uCoz
Скрипт режим чтения v2 для uCoz
Большинство интернет ресурсов разный размер шрифта, бывает такое, что некоторые вообще не читабельные, где нужно увеличивать шрифт. Хотя эти компоненты служат для цели, они также могут отвлечь вас от
Movie
В данной публикации отсутствуют комментарии !

Перед публикацией, советую ознакомится с правилами!

{login}

Твой комментарий..


Кликните на изображение чтобы обновить код, если он неразборчив


4 посетителя на сайте. Из них:
Гости4



Сохрани для себя!