Ограничение текста по кол-ву символов в записи

#1 27 апреля 2015 в 10:54

Вопрос такого плана как сделать хайдер на странице записи по кол-ву символов, т.е вывели например 1000 символов текста, а остальное показывать по нажатию на кнопочку "Подробно"?
Ну или как вариант, по высоте, т.е при достижении определенной высоты текст скрывается под спойлер..
Подскажите примеры с исходниками…

#2 27 апреля 2015 в 11:15

<script language="Javascript" src="http://site-na-okis.ru/file/site-na-okis_ru/javas/mik.js" type="text/javascript"></script>
 <script type="text/javascript">
            (function ($) {
                $(document).ready(function () {
                	if($(".dddes").text().length > 0)
                		$(".dddes").trunc(100, "<div class='read_more'>"+'[[Читать далее....]]</div>');
                });
            })(jQuery);
        </script>

#3 27 апреля 2015 в 11:16

http://javascript.ru/forum/dom-window/33746-razdvigayushhijjsya-tekst.html
тут разные примеры

Сегодня в 02:39

#4 27 апреля 2015 в 11:20

Loadырь, спасибо, как всегда я Вам премного благодарен… Сейчас что нибудь использую из этого…

#5 27 апреля 2015 в 11:28

HTML теги не собираетесь учитывать?

«Главное “настрой”! И всё настроиться…» © ) Их знают все! А вы?

#6 27 апреля 2015 в 11:29

Иначе страница может «развалиться» из-за случайных непарных HTML элементов…

«Главное “настрой”! И всё настроиться…» © ) Их знают все! А вы?

#7 27 апреля 2015 в 11:36

Иначе страница может «развалиться» из-за случайных непарных HTML элементов…
• Mike •

— не должна, в шаблоне же прописываем, хотя на практике посмотрим...
Вобщем посмотрел на js как то все на мой взгляд лишнее написано… Попробую такой вариант, чуть чуть модернизировать только надо max-height указать чтоб кнопку не показывать в случае если высота текста не достигает нужной и замена класса:

Спойлер

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.spoiler {
    width: 200px;
    border: solid 1px red;
    padding: 10px;
}
 
.spoiler p {
    margin: 0;
    padding: 0;
}
 
.spoiler-hidden {
    height: 300px;
    overflow: hidden;
}
 
.spoiler-show {
    height: auto;
}
</style>
</head>
<body>
<div id="spoiler1" class="spoiler spoiler-hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor egestas dui, eu semper justo dictum ut. Morbi vitae felis eget mauris faucibus semper non id neque. Cras a augue leo, at viverra lectus. Proin tempor nunc quis diam vestibulum ac viverra nulla pharetra. Duis iaculis, leo sit amet ornare lacinia, leo nibh porta magna, vel porttitor lectus mi in enim. Pellentesque congue sem in mi feugiat quis tempus ante egestas. Curabitur ultrices auctor scelerisque. Mauris sollicitudin, lectus vel bibendum blandit, tellus risus fringilla turpis, eget congue magna elit et erat. Maecenas elementum suscipit vehicula. Nunc a hendrerit sapien. Duis nibh nisl, commodo vel iaculis at, adipiscing eu dui. Proin eleifend est quis tellus fringilla id ultricies diam viverra. Aenean leo enim, scelerisque quis porttitor sit amet, porta non nisi. Ut justo lectus, vehicula vitae condimentum nec, varius interdum sapien.</p>
    <p>Fusce condimentum, augue condimentum tincidunt hendrerit, justo quam mattis justo, sed adipiscing mauris libero id dui. In sagittis bibendum purus nec congue. In hac habitasse platea dictumst. Donec vitae felis neque, ut gravida velit. Curabitur fermentum neque in lorem tincidunt dignissim. Nulla facilisi. Aliquam sit amet mi risus, non feugiat nisl. Sed a felis in lorem hendrerit scelerisque ut at diam. Mauris quis eros quis ligula sagittis blandit non ac sapien. Pellentesque accumsan, lectus vel pellentesque dictum, sapien elit egestas velit, et blandit felis risus sed sem. Praesent vel ante id dui sodales lacinia. Sed sodales enim id tellus condimentum sed hendrerit metus lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
<div class="spoiler-link">
    <a href="javascript: void(0);" onclick="document.getElementById('spoiler1').className = 'spoiler'">читать</a>
</div>
</body>
</html>

#8 27 апреля 2015 в 11:43

‹strong›Текст‹/strong› — если я ограничу длину текста 10 символами что получится в итоге?

«Главное “настрой”! И всё настроиться…» © ) Их знают все! А вы?

#9 27 апреля 2015 в 11:46

• Mike •, в моем примере тег закрытия то будет присутствовать в коде, просто визуально по css — overflow будет, поэтому не должен рассыпатся…

#10 27 апреля 2015 в 11:54

по кол-ву сибволов, т.е вывели например 1000 символов текста
jorgovich

— мои высказывания относятся к первоначальному вашему вопросу.

если вам не нужно подсчитывать кол-во символов просто проигнорируйте… ))

#11 27 апреля 2015 в 12:03

• Mike •, Да спс, я понял это, Loadырь, показал примеры, я посмотрел ну и на мой взгляд лучшим вариант с ограничением по высоте и использованием CSS выходит. Сейчас доделаю выложу, может кому пригодится…

#12 27 апреля 2015 в 13:42

То что хотел получил, если кто знает как лучше записать, с удовольствием поучусь, сейчас тестирую в разных браузерах:
Пример у меня:

Спойлер

Css:

 
.desc {position:relative;  margin-top: 15px; padding: 5px; }
.spoiler-desc{ max-height: 490px; overflow: hidden; margin-bottom:30px;}
#spoiler-link{
position: absolute;
top: 510px;
}
.spoiler-hide{
   display:none; 
}

HTML шаблона:

 
<?php if ($fields['content']){ ?>
<div class="desc">
<div id="spoiler" class="spoiler-desc">
<div class="title"><?php html($fields['content']['title']); ?> :</div>
<?php echo $fields['content']['handler']->parse( $item['content'] ); ?>
</div>
<div id="spoiler-link">
    <a href="javascript: void(0);" onclick="document.getElementById('spoiler').className = 'spoiler-full', document.getElementById('spoiler-link').className = 'spoiler-hide'">читать полностью</a>
</div>
</div>
 <?php unset($fields['content']); ?>
<?php } ?>

Заголовки для набора изображен

Ссылка на профиль юзера

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Ограничение текста по кол-ву символов в записи

Похожие темы

Как убрать ограничение на количество символов в записи?

[ЗАКРЫТО] Количество символов в меню

[ЕСТЬ РЕШЕНИЕ] Количество символов в статье

[ЕСТЬ РЕШЕНИЕ] форум количество символов в кнопке следующая тема

[ЕСТЬ РЕШЕНИЕ] Ограничение по количеству символов, при создании пунктов меню 3 уровня

Как в «InstantCMS 1» заставить RSS отдавать весь текст, а не 250 символов?

InstantCMS Team

О проекте

Поддержка

Дополнения