Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как развернуть скрытый текст полной новости по клику ?

Как развернуть скрытый текст полной новости по клику ?

     15.03.2016    Стили (CSS), jQuery    6124

вопрос
Здравствуйте уважаемые форумчане !

Недавно серфил интернет и обнаружил интересный вариант разворота большой свёрнутой новости.
Как здесь: http://soft.mydiv.net/win/download-Game-Word-Guess-Game.html

Там при клике на "↓ Раскрыть описание полностью" разворачивается скрытая часть полной новости и соответственно при нажатии на "↑ Свернуть описание" она сворачивается.

Как такое сделать ?

Спасибо !

Ответил: леший

Делается это с помощью этого плагина http://jedfoster.com/Readmore.js/

14 комментариев

Maestro
Юзер

Maestro - 16 марта 2016 14:50 -

Кто может помочь с инструкцией по установке для DLE?
леший
Гости

леший - 17 марта 2016 02:14 -

Качаем с гита скрипт, закидываем файл readmore.js в папку "js" своего шаблона открываем main.tpl в текстовом редакторе и подключаем скрипт

<script type="text/javascript" src="{THEME}/js/readmore.js"></script>

там же (в main.tpl) указываем, для какого элемента хотим использовать данный скрипт, к примеру возьмём div с классом "mynews" значит делаем следующею конструкцию

<script>
  $('.mynews').readmore({
    moreLink: '<a class="myclass" href="#">Читать далее</a>',
    lessLink: '<a class="myclass" href="#">Свернуть</a>',
    speed: 700 // скорость анимации в миллисекундах 
    collapsedHeight: 200  // высота блока в px, после которой будет добавляться ссылка "Читать далее"
  });
  </script>

всё, теперь к каждому div'у с классом "mynews" , будут подставляться ссылки "Читать далее" если его содержимое не уместилось в высоту 200px
Maestro
Юзер

Maestro - 17 марта 2016 02:35 -

На сколько я понял у меня div class="wrp" (я это посмотрел в shortstory.tpl) меняю .mynews на .wrp и ничего не происходит.

Может я не совсем понял как узнать класс дива? Подскажите пожалуйста.

P.S. не давно начал разбираться во всем этом, многого не понимаю, простите за тупость
леший
Гости

леший - 17 марта 2016 02:40 -

линк на сайт
Maestro
Юзер

Maestro - 17 марта 2016 02:43 -

ответил в личку
леший
Гости

леший - 17 марта 2016 02:46 - 


<script>
  $('article').readmore({
    moreLink: '<a class="myclass" href="#">Читать далее</a>',
    lessLink: '<a class="myclass" href="#">Свернуть</a>',
    speed: 700 // скорость анимации в миллисекундах 
    collapsedHeight: 200  // высота блока в px, после которой будет добавляться ссылка "Читать далее"
  });
  </script>
Maestro
Юзер

Maestro - 17 марта 2016 02:50 -

Неа, ничего не помогло
леший
Гости

леший - 17 марта 2016 02:55 -

извиняюсь, мой косяк, после 700 забыл запятую

<script>
  $('article').readmore({
    moreLink: '<a class="myclass" href="#">Читать далее</a>',
    lessLink: '<a class="myclass" href="#">Свернуть</a>',
    speed: 700, // скорость анимации в миллисекундах 
    collapsedHeight: 200  // высота блока в px, после которой будет добавляться ссылка "Читать далее"
  });
  </script>
Maestro
Юзер

Maestro - 17 марта 2016 02:59 -

Ты лучший, спасибо огромное за помощь, все заработало)

P.S. Будет время и желание, кинь в личку отзыв о сайте. Рад любой критике
леший
Гости

леший - 17 марта 2016 03:02 -

Не люблю критиковать сайты, которые юзают дефолтные шаблоны
netscout
Юзер

netscout - 17 марта 2016 16:31 -

Из-за чего может не работать ?

Аякс на движке работает !

в fullstory добавил такой код:




<article>

{full-story}

</article>


<script type="text/javascript" src="{THEME}/js/readmore.js"></script>

<script>
$('article').readmore({
moreLink: '<a class="myclass" href="#">Читать далее</a>',
lessLink: '<a class="myclass" href="#">Свернуть</a>',
speed: 700, // скорость анимации в миллисекундах
collapsedHeight: 200 // высота блока в px, после которой будет добавляться ссылка "Читать далее"
});
</script>
леший
Гости

леший - 17 марта 2016 17:56 -

Из-за неровности рук, без ссылки на сайт гадать можно до посинения.
hakypuhbiu
Юзер

hakypuhbiu - 29 июня 2019 12:37 -

Вы не учли один нюанс, после этого скрипта не работает спойлер в новости не открывается.
hent4ib
Юзер

hent4ib - 29 июня 2019 15:13 -

у webrambo есть такой скрипт
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 26.08.2011 Гость  Шаблоны (TPL), Стили (CSS)
 23.11.2012 Texty  Стили (CSS), jQuery
 14.10.2013 Antony_Hapkins  Общие вопросы по вёрстке, Стили (CSS), Ламерские вопросы
 05.12.2013 mastodontoff  Общие вопросы по вёрстке, Стили (CSS)
 09.04.2014 ufh2  Стили (CSS)
 02.09.2014 249893  Стили (CSS), Общие вопросы по PHP
 09.09.2014 Bodyak  Шаблоны (TPL), Стили (CSS)
 16.11.2014 sa22-91  Стили (CSS), Ламерские вопросы
 27.08.2015 grolilus  Стили (CSS), jQuery, Общие вопросы по PHP
 31.12.2015 pavell  Общие вопросы, Общие вопросы по вёрстке, Стили (CSS)
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    Вчера, 17:08
    Разъясните как вытащить id?
  • lutskboy | Вытащить все данные из определенного доп ... 1
    Фото lutskboy
    lutskboy
    Вытащить все данные из определенного доп поля?
    Вчера, 16:17
    в adminer можно.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    Вчера, 16:14
    выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
    js скрипт можно написать
    
<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    Вчера, 14:39
    Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    Вчера, 13:52
    где выводить? админка или сайт
  • TeraMoune | Как отключить миниатюры стандартной гале ...
    Фото TeraMoune
    TeraMoune
    Как отключить миниатюры стандартной галереи Fancybox?
    21-11-2024, 06:00
    В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

    Например: параметр Thumbs: false отключает миниатюры.
    Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
  • derebas | Как реализовать шифрование трафика? 3
    Фото derebas
    derebas
    Как реализовать шифрование трафика?
    18-11-2024, 16:52
    Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:46
    я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
    Так и было...
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:39
    чтоб не удалять выстави права и пользователя какие там идут на файлы. .
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:37
    т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
    Видосы в директории upload можно хоть оставить? их там 80 Гб
наверх