Javascript-форум - Раздвигающийся текст

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Раздвигающийся текст (https://javascript.ru/forum/dom-window/33746-razdvigayushhijjsya-tekst.html)

Freezoff

06.12.2012 13:15

Раздвигающийся текст

Ребята! Очень надеюсь на Вашу помощь!
Имеется большой кусок текста с html-тегами. Как сделать так, чтоб была видна только его верхняя часть (в пределах 80px), а остальная часть появлялась при нажатии на кнопку "Читать далее..." (без перезагрузки страницы).
Находил несколько решений, но к сожалению не одно из них не подошло, т.к. во всех этих решениях предполагается наличие двух частей - то что должно быть отображено и то, что должно быть скрыто.
Самый подходящий вариант который был найден выглядет следующим образом:

<html>
<body>
	Тут текст<BR>
	<div style="height:'100%'">
		<div id="ta" style="height:80px;overflow:hidden">
			bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
		</div>
		<span style="cursor:pointer;color:blue" onclick="document.getElementById('ta').style.height = '100%'">Читать далее...</span>
	</div>
	Еще какой-то текст....
</body>
</html>

Можно ли в этом примере сделать чтобы "Читать далее" Не отображалась если текст помещается в 80px, а также если он уже был раскрыт?
И самое главное как сделать автоуменьшение блока, если текст занимает меньше чем 80px?
Возможно это уже здесь где-то обсуждалось, но я к сожалению не смог найти...

dmitriymar

06.12.2012 13:33

Имеет один недостаток если высота контента равна 80 будет показываться кнопка -можно убрать подобрав размер шрифта и межстрочный интервал
1 задaть max-height =80, overflow-y =hidden;
2 при нажатии на кнопку убирать max-height
3 показывать не показывать кнопку -если высота блока меньше 80 -не показывать кнопку
по поводу не показывать -если раскрыт-скрывать \изменять при нажатии на кнопку

Freezoff

06.12.2012 14:18

Алгоритм мне понятен... Но мне бы javascript наброски хотя бы, т.к. в нем я полный ноль, или какое-то другое готовое решение (наверняка оно есть)!
Подобрать размер шрифта и межстрочный интервал не получится, т.к. при этом теряется весь смысл отформатированного текста вводимого пользователем в cleditor-е...

ОлегА

06.12.2012 16:40

Вот пример на jQuery

<html>
<head>
    <script language="JavaScript" src="../js/jquery.min.js"></script>
</head>    
<script>
    $(function(){
        if($('#ta').length){
            blok_height = Number($('#ta').css('height').replace('px',''));
             
            if(blok_height > 80){
               $('#ta').css('max-height','80px');
               $('.read-next').show();  
            } 
       }
    });
    
    $('.read-next').live('click', function(){
        
        if($('#ta').css('max-height') != 'none'){
           $('#ta').css('max-height','');
           $(this).text('Скрыть');
        } else {
           $('#ta').css('max-height','80px');     
           $(this).text('Читать далее...');
        }
        
        return false;
    });
</script>
<body>
	<div style="height:'100%'">
		<div id="ta" style="overflow:hidden">
			Ребята! Очень надеюсь на Вашу помощь!                                 <br />
Имеется большой кусок текста с html-тегами. Как сделать так,                      <br />
чтоб была видна только его верхняя часть (в пределах 80px),                       <br />
а остальная часть появлялась при нажатии на                                       <br />
 кнопку "Ч                                                                        <br />
итать далее..." (без перезагрузки страницы).                                      <br />
Находил несколько решений, но к сожалению не                                      <br />
одно из них не подошло,                                                           <br />
т.к. во всех этих решениях предполагает                                           <br />
                                                                                  <br />
ся наличие двух частей - то что должно б                                          <br />
ыть отображено и то, что должно быть скрыто.                                      <br />
Самый подходящий вариант который был найден выглядет следующим образом:           <br />
                                                                                  <br />
Можно ли в этом примере сделать чтобы "Читать далее" Н                            <br />
е отображалась если текст помещается в 80px, а также если он уже был раскрыт?     <br />
И самое главное как сделать автоуменьшение блока, если                            <br />
 текст занимает меньше чем 80px?                                                  <br />
Возможно это уже здесь где-то обсуждалось, но я к сожалению не смог найти...      <br />
		</div>		
		<a class="read-next" style="display:none;" href="#">Читать далее...</a>
	</div>
</body>
</html>

вот без jQuery

<script>
    window.onload = function(){
        blok = document.getElementById('ta');
        parent = blok.parentNode;
        blok_height = blok.style.height ? blok.style.height : blok.offsetHeight;
        
        if(blok_height > 80){
            blok.style.maxHeight = '80px';
            link = parent.getElementsByClassName('read-next')[0];
            link.style.display = 'inline'; 
                        
            link.onclick = function(){
                                
                if(blok.style.maxHeight){
                   blok.style.maxHeight = ''
                   link.innerHTML = 'Скрыть';
                } else {
                   blok.style.maxHeight = '80px';
                   link.innerHTML = 'Читать далее...';                   
                }
                
                return false;
            } 
        
        }
    }
</script>

Freezoff

06.12.2012 17:42

Спасибо огромное! Работает как надо (Пробовал 1-ый вариант)! НО только работает для одного блока :(
Таких блоков на странице будет n-ое количество, забыл это сразу упомянуть...
Попробовал поэксперементировать с id, но я так понял Вы его в скрипте жестко привязали!?

ОлегА

07.12.2012 08:13

да в этом примере к id жестко привязан, для многоблочного варианта поменяйте id на класс и всё делать в цикле

ОлегА

07.12.2012 08:26

вот вариант для многоблочного использования на jQuery

$(function(){
        bloks_total = $('body').find('.ta');
        if(bloks_total.length){
            for(i=0; i < bloks_total.length;i++){
                blok_height = Number($(bloks_total[i]).css('height').replace('px',''));
                  
                if(blok_height > 80){
                   $(bloks_total[i]).css('max-height','80px');
                   $('.read-next').show(); 
                }
            }
       }
    });
     
    $('.read-next').live('click', function(){
        is_parent = $(this).parent(); 
        blok = is_parent.find('.ta');
        if(blok.css('max-height') != 'none'){
           blok.css('max-height','');
           $(this).text('Скрыть');
        } else {
           blok.css('max-height','80px');    
           $(this).text('Читать далее...');
        }
         
        return false;
    });

Freezoff

07.12.2012 10:21

В общем ситуация получается следующая... Если блок один то все нормально работает... Но если блоков несколько то отображается ссылка "Читать далее" у тех блоков у которых она появлятся не должна...

<html>
<head>
<script language="JavaScript" src="jquery.min.js"></script>
</head> 
<script>
$(function(){
        bloks_total = $('body').find('.ta');
        if(bloks_total.length){
            for(i=0; i < bloks_total.length;i++){
                blok_height = Number($(bloks_total[i]).css('height').replace('px',''));
                   
                if(blok_height > 80){
                   $(bloks_total[i]).css('max-height','80px');
                   $('.read-next').show(); 
                }
            }
       }
    });
	      
    $('.read-next').live('click', function(){
        is_parent = $(this).parent(); 
        blok = is_parent.find('.ta');
        if(blok.css('max-height') != 'none'){
           blok.css('max-height','');
           $(this).text('Скрыть');
        } else {
           blok.css('max-height','80px');    
           $(this).text('Читать далее...');
        }
          
        return false;
    });
</script>
<body>
<div style="height:'100%'">
	<div class="ta" style="overflow:hidden">
		1-ый блок bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
	</div> 
	<a class="read-next" href="#" style="display:none;" >Читать далее...</a>
</div>

<div style="height:'100%'">
	<div class="ta" style="overflow:hidden">
		2-ой блок bla<br>bla
	</div> 
	<a class="read-next" href="#" style="display:none;" >Читать далее...</a>
</div>

<div style="height:'100%'">
	<div class="ta" style="overflow:hidden">
		n-ый блок bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
	</div> 
	<a class="read-next" href="#" style="display:none;">Читать далее...</a>
</div>

</body>
</html>

ОлегА

07.12.2012 10:24

ща поправим

ОлегА

07.12.2012 10:27

$(bloks_total[i]).parent().find('.read-next').show(); вот это вставь вместо записи на 14 строчке

Freezoff

07.12.2012 10:56

Огромное человеческое спасибо Вам добрый человек!!! Если бы Вы знали как меня выручили!!! И всем остальным спасибо, кто помог разобраться и не отправил читать мануалы как это часто бывает на других форумах. Вот честное пионерское изучу js и постараюсь не задавать глупых вопросов, просто только приступил к освоению Web-программирования...

Freezoff

11.12.2012 08:15

В общем выявилась одна проблема....
Скрипт не работает в IE :( , в остальных браузерах работает как надо!
IE9 все настройки по умолчанию...

ОлегА

11.12.2012 09:26

на че ругается IE?

ОлегА

11.12.2012 09:38

вот это вставь -

blok = bloks_total[i];
blok_height = blok.style.height ? blok.style.height : blok.offsetHeight;

вместо -

blok_height = Number($(bloks_total[i]).css('height').replace('px',''));

Freezoff

11.12.2012 10:16

Заменил... Проблема осталась...
А проблема заключается в том, что IE не скрывает блок более 80px, а отображает его полностью...

ОлегА

11.12.2012 10:44

не может быть, что бы не заработало, у меня то работает, точно на странице ошибок нет?

Freezoff

11.12.2012 11:59

Ошибок на странице нет...
Винда лицензионная. IE 9.0.8112.16421
Может где в настройках IE покапаться!? Хотя как я уже говорил, все настрой IE по умолчанию...
Код с учетом всех Ваших передложений выглядит:

$(function(){
        bloks_total = $('body').find('.ta');
        if(bloks_total.length){
            for(i=0; i < bloks_total.length;i++){
			blok = bloks_total[i]; 
			blok_height = blok.style.height ? blok.style.height : blok.offsetHeight;
                   
                if(blok_height > 80){
                   $(bloks_total[i]).css('max-height','80px');
                   $(bloks_total[i]).parent().find('.read-next').show();; 
                }
            }
       }
    });
	      
    $('.read-next').live('click', function(){
        is_parent = $(this).parent(); 
        blok = is_parent.find('.ta');
        if(blok.css('max-height') != 'none'){
           blok.css('max-height','');
           $(this).text('Скрыть');
        } else {
           blok.css('max-height','80px');    
           $(this).text('Читать далее...');
        }
          
        return false;
    });

ОлегА

11.12.2012 13:14

я тестил на ie7 и ie8 все робит как надо, ща посмотрю твой код

ОлегА

11.12.2012 13:17

всё робит, но 9-ки у меня нет, но я думаю, если робит на 7 и 8, то в 9 точно уже должна пахать.

Как вариант посмотри, какой у тебя режим документов в ie ставится когда ты страницу открываешь, потому что в режиме совместимости код не робит

ОлегА

11.12.2012 13:18

попробуй алертом проверять че тебе blok_height выдает

Freezoff

11.12.2012 15:18

На одном компе нашел IE7 (8 не смог найти), но и там тоже не сработало!
Везде одно и то же:

начало 2-го блока всегда находится внизу страницы IE (хотел скрин более наглядным сделать, смасштабировав страницу, но оказался вот такой вот эффект), т.е. получается каждый блок занимает целиком страницу, сразу раскрывая его и заполняя пустотой до самого низа страницы...
blok_height для 1-го, 2-го и 3-го блока из рассматриваемого примера составил 209,38,209 соответственно. Режим совместимости отключен...
Может проблема в версиях jQuery? У меня 1.8.3

Freezoff

11.12.2012 15:58

Кстати, на моем создаваемом сайте такого растягивания нет! Поскольку блок вставляется в таблицу... Но блок все равно открывается полностью:

ОлегА

11.12.2012 16:26

ну по крайней мере blok_height выдает вроде то что нужно

посмотрите у каждого блока появилась ли в стилях max-height?если появилась значит проблема в структуре html, может быть иммеено в таблице, я припоминаю, что в каком то случае у меня max-height не срабатывал именно в таблице

Freezoff

11.12.2012 18:25

но ведь 1-ый вариант скриншота я привел как есть (без таблиц)
в стилях max-height: 80px появился только у 1-го и 3-го блоков...
Что-то я думаю, что проблема в
<div style="height:'100%'">
!?

ОлегА

11.12.2012 18:48

ну попробуй без style="height:'100%'" если заработает, попробую у себя так же сделать
пробуй вставлять алерты между кодом, найди место где он ломается, и покажи мне, я бы у себя попробовал, но ведь у меня то работает почему то...

Freezoff

08.07.2013 16:32

Проблему с IE победил, просто указазал:

<!DOCTYPE html>

Теперь возникла необходимость поменять стиль ссылки:

a.more:visited {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 11pt;
	color: rgb(48, 189, 250);
	text-decoration: none;
	font-weight: bold;
}
a.more:hover {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 11pt;
	color: rgb(242, 109, 0);
	text-decoration:  underline;
	font-weight: bold;
}
a.more:link {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 11pt;
	color: rgb(48, 189, 250);
	text-decoration: none;
	font-weight: bold;
}
a.more:active {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 11pt;
	color: rgb(242, 109, 0);
	text-decoration:  underline;
	font-weight: bold;
}

Но как его "прикрутить" к строке:

<a class="read-next" href="#" style="display:none;" >Читать далее...</a>

Ума не приложу....

Стиль ссылок на своем сайте я везде менял так:

<a class="more" href="...

А вот как в данном случае его поменять? Чтобы и "Читать далее" и "Скрыть" - были во вновь заданном стиле.

vacuumtrade

29.06.2014 17:09

Олег, скажи, пожалуйста, как сделать чтобы данная кнопка открывала объект к примеру на 1000 px, затем опять на 1000 px, затем опять. И так до конца страницы.

Часовой пояс GMT +3, время: 02:05.