Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Работа скрипта сворачивания текста в DLE

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


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

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

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


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

D0Gmatist
Местный

D0Gmatist - 10 апреля 2014 10:43 -

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

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

Serhio
Юзер

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
Местный

D0Gmatist - 10 апреля 2014 11:20 -

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

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

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

Serhio
Юзер

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

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

D0Gmatist
Местный

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
Юзер

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

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

D0Gmatist
Местный

D0Gmatist - 10 апреля 2014 11:30 -

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


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

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

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

Serhio
Юзер

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

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

D0Gmatist
Местный

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
Юзер

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

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

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

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

наверх