Работа скрипта сворачивания текста в DLE

Serhio 10.04.2014 категории, javascript, хаки jQuery, Хаки 4034

вопрос

Здравствуйте. Не хотел задавать вопрос отдельно, задал сначала тут, но никто не ответил. Суть вот в чем, там(по ссылке) есть линк на джава скрипт который сворачивает текст с превышением длины текста. Столкнулся с такой проблемой: этот джава скрипт действует только на последнюю в списке новость. У меня же есть отдельная категория, с отдельной ТПЛкой, соответственно я прописываю сам джава скрипт в эту ТПЛку, но сворачивается только последняя новость в выводимом списке новостей категории. При этом сама кнопка рисуется во всех новостях, но текст не разворачивается, хотя кнопка меняет название. А вот в последней новости из списка норм с этим. Может я где не там скрипт располагаю, что он действует в полной мере только на одну новость?
Спасибо.

Ответа пока нет

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

Юзер

795

D0Gmatist - 2015-05-1510 апреля 2014 10:43 - #26574

Да всё правильно и еще вон в той строке пробел пропустил, и кавычки одинарные ниже ...
Мы же тут все шаманы... с бубнами сидим и телепатически видим и код и где в нём ошибка

Юзер

Serhio - 2015-05-1510 апреля 2014 11:02 - #26575

Виноват, приношу извинения что код не вставил. вот он джававский:

if ($('.wrap').length) {
    $('.wrap').each(function (e) {
        var hght = $(this).height();
        $(this).data('height', hght);
        if (hght > 250) {
            $(this).addClass('moder_collapsed').after('<span class="btn btn-expand" title="Текст слишком большой и поэтому он свёрнут!">Развернуть текст</span>');
        };
    });
    $(document).on('click', '.btn-expand', function () {
        var ths = $(this);
        var prevEl = ths.prev('.moder_collapsed');

        if (ths.hasClass('expanded')) {
            prevEl.animate({
                    height: '250'
                },
                1400, function () {
                    ths.text('Развернуть текст').removeClass('expanded');
                });
        }
        else {
            prevEl.animate({
                    height: prevEl.data('height')
                },
                1400, function () {
                    ths.text('Свернуть текст').addClass('expanded');
                });
        };

    });
};

Вот ксс:

.moder_collapsed {
  height: 250px;
  overflow: hidden;
}
.btn {
  display: inline-block;
  padding: 5px;
  background: #f96;
  color: #fff;
  cursor: pointer;
}

А вот в тплке отдельной под категорию, вокруг шортстори пишу <div class="wrap">{short-story}</div>

Юзер

795

D0Gmatist - 2015-05-1510 апреля 2014 11:20 - #26578

Ошибка не в этом коде ... он работает исправно

http://jsfiddle.net/D0Gmatist/A4n82/

Юзер

Serhio - 2015-05-1510 апреля 2014 11:24 - #26580

Я понимаю что не в коде, потому и спрашиваю, где может быть причина того что верхние новости не хотят разворачиваться? Разделители в КСС? Еще что-то? Что может ограничивать развертку текста в верхней новости? Причем простая новость, без сворачивания, вполне себе уживается под новостью с разверткой. Ну то бишь, той последней у которой работает.

Юзер

795

D0Gmatist - 2015-05-1510 апреля 2014 11:23 - #26579

Единственное попробуйте js прописать в шапке вот так


<script type="text/javascript">
$(window).load(function() {
    if ($('.wrap').length) {
        $('.wrap').each(function(e) {
            var hght = $(this).height();
            $(this).data('height', hght);
            if (hght > 250) {
                $(this).addClass('moder_collapsed').after('<span class="btn btn-expand" title="Текст слишком большой и поэтому он свёрнут!">Развернуть текст</span>');
            };
        });
        $(document).on('click', '.btn-expand', function() {
            var ths = $(this);
            var prevEl = ths.prev('.moder_collapsed');
            if (ths.hasClass('expanded')) {
                prevEl.animate({
                    height: '250'
                }, 1400, function() {
                    ths.text('Развернуть текст').removeClass('expanded');
                });
            } else {
                prevEl.animate({
                    height: prevEl.data('height')
                }, 1400, function() {
                    ths.text('Свернуть текст').addClass('expanded');
                });
            };
        });
    };
});
</script>

Юзер

Serhio - 2015-05-1510 апреля 2014 11:27 - #26581

Попробовал, даже последняя перестала разворачиваться. Но опять же, название кнопки меняется, но разворачивание текста не следует.

Юзер

795

D0Gmatist - 2015-05-1510 апреля 2014 11:30 - #26582

Я как то сюда уже делал такую хрень .. самый лучший способ вот

http://jsfiddle.net/D0Gmatist/cGZ5D/

где id_1 это можно взять id_{news-id}

Юзер

Serhio - 2015-05-1510 апреля 2014 11:47 - #26585

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

Юзер

795

D0Gmatist - 2015-05-1510 апреля 2014 11:50 - #26586

Вам нужно и кнопку править
JS

<!--
function showHide (id) {
    var style = document.getElementById("form_" + id).style
    if (style.height == "100px") {
        style.height = "auto";
    } else {
        style.height = "100px";
    }
} 
 -->

<button class="button" type="submit" onclick="showHide('id_{news-id}');">рашь по мне</button>
<br /><br />
<div class="form_polu_spoiler" id="form_id_{news-id}" style="height: 100px;">вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты...  вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты...  </div>
<br />
<button class="button" type="submit" onclick="showHide('id_{news-id}');">или по мне</button>

<br /><br /><br />
СЛЕДУЮЩИЙ ПОСТ И НОВЫЕ {news-id}
<br /><br /><br />

<button class="button" type="submit" onclick="showHide('id_{news-id}');">рашь по мне</button>
<br /><br />
<div class="form_polu_spoiler" id="form_id_{news-id}" style="height: 100px;">вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты...  вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты... вот это да вот она рыбо моей мечты...  </div>
<br />
<button class="button" type="submit" onclick="showHide('id_{news-id}');">или по мне</button>

Юзер

Serhio - 2015-05-1510 апреля 2014 11:58 - #26587

Ай, я дурак, Вы же об этом писали, а я забыл, пока прописывал. Спасибо, действительно заработало. Еще бы это плавно все это разворачивалось сделать и убрать кнопку, если она она не нужна... Я полный 0 в Джаве пока, но я думаю как-нибудь попробую разобраться. И так уже наверное замучал :) Еще раз спасибо!