Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2015, 06:41
Интересующийся
Отправить личное сообщение для Andvz24 Посмотреть профиль Найти все сообщения от Andvz24
 
Регистрация: 10.07.2015
Сообщений: 10

Читать дальше/Свернуть
Здравствуйте!
Стоит задача: на сайте выводится отзывы посетителей, некоторые слишком длинные и необходимо сделать сокращение (какой то количество символов, 300 например) подставляется ссылка "читать полностью" при нажатии раскрывается отзыв полностью (без перезагрузки страницы), ссылка меняется на "скрыть".
Подскажите как это можно реализовать?
В Javascript'е еще не разбираюсь, сильно не судите)
Как пример приведу ссылку на сайт, где реализовано что то похожее.
http://www.houzz.ru/projects/1022550
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2015, 07:38
Интересующийся
Отправить личное сообщение для Andvz24 Посмотреть профиль Найти все сообщения от Andvz24
 
Регистрация: 10.07.2015
Сообщений: 10

Я нашел что то похожее на этом форуме, но в том варианте текст раскрывается частями, как изменить его что бы раскрывался полностью?

Код:
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
#ta{
    background:#3C3;
    color:#66F;
    height:100px;
    width:600px;
    transition:all 1s;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
  <script>
 $(function ()
  {  var h = 50, t = $('#ta'), max = t[0].scrollHeight, min = 22;
   $('.read-next').on('click', function (event)
  {
   var H = t.height();
   if(H == max){H = min}
   else if (H  + h > max){H = max}
   else {H += h};
   t.height(H);
   $(this).text(H == max ? 'Скрыть этот бред' : 'Читать далее...')
   return false
  })
  })
  </script>
</head>

<body>
  <div style="height:'100%'">
    <div id="ta" style="overflow:hidden">
      Товарищи! консультация с широким активом требуют
      определения и уточнения существенных финансовых и
      административных условий. Не следует, однако
      забывать, что укрепление и развитие структуры
      влечет за собой процесс внедрения и модернизации
      направлений прогрессивного развития.
      Разнообразный и богатый опыт начало повседневной
      работы по формированию позиции позволяет оценить
      значение форм развития. Товарищи! начало
      повседневной работы по формированию позиции
      позволяет выполнять важные задания по разработке
      форм развития. Товарищи! сложившаяся структура
      организации требуют от нас анализа систем
      массового участия. Таким образом новая модель
      организационной деятельности позволяет оценить
      значение позиций, занимаемых участниками в
      отношении поставленных задач. Разнообразный и
      богатый опыт постоянное
      информационно-пропагандистское обеспечение нашей
      деятельности способствует подготовки и
      реализации модели развития
    </div><a class="read-next" href="#">Читать далее...</a>
  </div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2015, 07:55
Интересующийся
Отправить личное сообщение для Andvz24 Посмотреть профиль Найти все сообщения от Andvz24
 
Регистрация: 10.07.2015
Сообщений: 10

Разобрался, всем спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод информации при нажатии кнопки читать далее vacuumtrade Элементы интерфейса 44 15.07.2015 06:33
Читать xml файл без расширения modelka Серверные языки и технологии 2 19.03.2015 13:38
читать спецификацию dom/html torsar (X)HTML/CSS 2 31.12.2014 00:05
Как называется и что читать zzzzzz Общие вопросы Javascript 3 30.09.2013 18:33
Как писать код который легко поддерживать, расширять, читать. Policeman Общие вопросы Javascript 3 24.03.2012 05:40