Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Как развернуть скрытый текст полной новости по клику ?

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


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

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

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

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

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

Спасибо !

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


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

Комментарии пользователей (12)

Maestro
8

Maestro - 16 марта 2016 14:50 - Юзер

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

леший
21

112 | 33

леший - 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
8

Maestro - 17 марта 2016 02:35 - Юзер

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

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

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

леший
21

112 | 33

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

линк на сайт

Maestro
8

Maestro - 17 марта 2016 02:43 - Юзер

ответил в личку

леший
21

112 | 33

леший - 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
8

Maestro - 17 марта 2016 02:50 - Юзер

Неа, ничего не помогло

леший
21

112 | 33

леший - 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
8

Maestro - 17 марта 2016 02:59 - Юзер

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

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

леший
21

112 | 33

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

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

netscout
2

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>

леший
21

112 | 33

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

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

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

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