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

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


     10.04.2014    jQuery, Хаки    1690

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

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


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

D0Gmatist
225

794 | 281

D0Gmatist - 10 апреля 2014 10:43 - Местный

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

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Serhio
19

Serhio - 10 апреля 2014 11:02 - Юзер

Виноват, приношу извинения что код не вставил. вот он джававский:
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>

D0Gmatist
225

794 | 281

D0Gmatist - 10 апреля 2014 11:20 - Местный

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

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

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Serhio
19

Serhio - 10 апреля 2014 11:24 - Юзер

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

D0Gmatist
225

794 | 281

D0Gmatist - 10 апреля 2014 11:23 - Местный

Единственное попробуйте 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
19

Serhio - 10 апреля 2014 11:27 - Юзер

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

D0Gmatist
225

794 | 281

D0Gmatist - 10 апреля 2014 11:30 - Местный

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


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

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

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Serhio
19

Serhio - 10 апреля 2014 11:47 - Юзер

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

D0Gmatist
225

794 | 281

D0Gmatist - 10 апреля 2014 11:50 - Местный

Вам нужно и кнопку править
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
19

Serhio - 10 апреля 2014 11:58 - Юзер

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

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

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