Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.01.2018, 19:37
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

Как правильно скрыть часть текста?
Здравствуйте. Помогите, пожалуйста, поправить ошибки в скрипте, который скрывает часть длинного текста. А именно, если в тексте есть параграфы, то он их игнорирует или скрывает после первого, или еще любым другим способом как ему угодно. Если текст идет сплошной, без параграфов, то скрипт работает правильно. И еще один момент, как научить скрипт, чтобы он скрывал текст после точки, а не в средине предложения? Спасибо!
<script>
(function($) {
  $.fn.truncate = function(options) {

    var defaults = {
      length: 100,
      minTrail: 10,
      moreText: "",
      lessText: "",
      ellipsisText: ""
    };

    var options = $.extend(defaults, options);

    return this.each(function() {
      obj = $(this);
      var body = obj.html();

      if (body.length > options.length + options.minTrail) {
        var splitLocation = body.indexOf(' ', options.length);
        if (splitLocation != -1) {

          var splitLocation = body.indexOf(' ', options.length);
          var str1 = body.substring(0, splitLocation);
          var str2 = body.substring(splitLocation, body.length - 1);
          obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +
            '</span>' + '<span  class="truncate_more">' + str2 + '</span>');
          obj.find('.truncate_more').css("display", "none");

          obj.append(
            '<div class="clearboth">' +
            '<a href="#" class="truncate_more_link">' + options.moreText + '</a>' +
            '</div>'
          );

          var moreLink = $('.truncate_more_link', obj);
          var moreContent = $('.truncate_more', obj);
          var ellipsis = $('.truncate_ellipsis', obj);
          moreLink.click(function() {
            if (moreLink.text() == options.moreText) {
              moreContent.show('normal');
              moreLink.text(options.lessText);
              ellipsis.css("display", "none");
            } else {
              moreContent.hide('normal');
              moreLink.text(options.moreText);
              ellipsis.css("display", "inline");
            }
            return false;
          });
        }
      }

    });
  };
})(jQuery);

$().ready(function() {
  $('.story').truncate({
    length: 20,
    minTrail: 10,
    moreText: 'Подробнее',
    lessText: 'Скрыть',
    ellipsisText: "[...]"
  });
});
</script>
<style>
.story {
margin: 0 0 20px 0;
}
</style>
<div class="story">В этом блоке нет параграфов. Однажды осенью матушка варила в гостиной медовое варенье, а я, облизываясь, смотрел на кипучие пенки. Батюшка у окна читал Придворный календарь, ежегодно им получаемый. Эта книга имела всегда сильное нљ него влияние: никогда не перечитывал он ее без особенного участия, и чтение это производило в нем всегда удивительное волнение желчи. Матушка, знавшая наизусть все его свычаи и обычаи, всегда старалась засунуть несчастную книгу как можно подалее, и таким образом Придворный календарь не попадался ему на глаза иногда по целым месяцам. Зато, когда он случайно его находил, то, бывало, но целым часам не выпускал уж из своих рук. Итак, батюшка читал Придворный календарь, изредка пожимая плечами и повторяя вполголоса: «Генерал-поручик!.. Он у меня в роте был сержантом!.. Обоих российских орденов кавалер!. А давно ли мы...» Наконец батюшка швырнул календарь на диван и погрузился в задумчивость, не предвещавшую ничего доброго.</div>
<div class="story"><p>В этом блоке есть параграфы.</p><p>Однажды осенью матушка варила в гостиной медовое варенье, а я, облизываясь, смотрел на кипучие пенки. Батюшка у окна читал Придворный календарь, ежегодно им получаемый.</p><p>Эта книга имела всегда сильное нљ него влияние: никогда не перечитывал он ее без особенного участия, и чтение это производило в нем всегда удивительное волнение желчи.</p><p>Матушка, знавшая наизусть все его свычаи и обычаи, всегда старалась засунуть несчастную книгу как можно подалее, и таким образом Придворный календарь не попадался ему на глаза иногда по целым месяцам. Зато, когда он случайно его находил, то, бывало, но целым часам не выпускал уж из своих рук.</p><p>Итак, батюшка читал Придворный календарь, изредка пожимая плечами и повторяя вполголоса: «Генерал-поручик!.. Он у меня в роте был сержантом!.. Обоих российских орденов кавалер!. А давно ли мы...» Наконец батюшка швырнул календарь на диван и погрузился в задумчивость, не предвещавшую ничего доброго.</p></div>

Последний раз редактировалось LADYX, 25.01.2018 в 22:57.
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2018, 19:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

LADYX,
ошибок в плагине нет, но он расчитан на работу с текстом, как и большинство таких плагинов, в них нет учёта тегов.
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2018, 22:31
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

рони,
приветствую вас! Я хотел добавить свой вопрос таким способом, чтобы можно было просмотреть его в действии, но я так и не понял как это сделать. Я не совсем понял, что имеется ввиду под тем, что нет учёта тегов, т.е. независимо от того, есть ли параграфы или нет, скрипт должен одинаковый объем текста показывать, а остальное скрывать? Вы пожалуйста посмотрите, в блоке где есть параграфы, текст скрывается уже сразу после первого параграфа.
Ответить с цитированием
  #4 (permalink)  
Старый 25.01.2018, 22:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

LADYX,
[HTML run]код всей страницы[/HTML]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #5 (permalink)  
Старый 25.01.2018, 22:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

LADYX,
по плагину, не умеют плагины делать то что вам нужно, за очень редким исключением.
Ответить с цитированием
  #6 (permalink)  
Старый 25.01.2018, 23:00
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

рони,
скажите, пожалуйста, а что можете посоветовать в этом случае?
Ответить с цитированием
  #7 (permalink)  
Старый 25.01.2018, 23:07
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Можно свой написать, который будет просто блок сжимать по размеру (это самый простой вариант)
Ответить с цитированием
  #8 (permalink)  
Старый 25.01.2018, 23:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от j0hnik
блок сжимать по размеру

https://javascript.ru/forum/dom-wind...tml#post392736

https://javascript.ru/forum/misc/590...tml#post392937
Ответить с цитированием
  #9 (permalink)  
Старый 25.01.2018, 23:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
неплохо было бы

func(".блок1", 150высота);
func(".блок2", 300);
Ответить с цитированием
  #10 (permalink)  
Старый 26.01.2018, 00:28
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

Да, я знаю, конечно это самый простой вариант. Но в блоках могут быть как картинки, так и таблицы, или дополнительные заголовки или подзаголовки. Поэтому этот вариант, как просто размерность, к сожалению однозначно не подойдет.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно получить и присвоить данные полученные из сервера Axios, react-redux hambat Общие вопросы Javascript 5 07.03.2017 17:09
Как правильно настроить очерёдность выполнения функций? Altai Общие вопросы Javascript 8 01.02.2017 19:32
Пасоны, как правильно парсить параметры? megaupload Оффтопик 15 05.05.2013 14:44
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 16:20
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14