Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Wild

Користувачі
  
 Профіль  Активність

  • Публікації

    698

  • З нами

  • Відвідування

 Тип публікації 

Коментарі блогу, опубліковані користувачем Wild

    ArtemPitov

    Опубліковано:

    Слегка "облагороженный" модуль.
    Исправлены мелкие проблемы.

     

    Спойлер 
    
<html>
<head>
	<script src="jquery-2.1.1.min.js"></script>

	<style>
		.h_text {
			max-height: 60px; // максимальная высота свернутого блока
			transition: all 0.3s;
			-moz-transition: all 0.3s;
			-webkit-transition: all 0.3s;
			-o-transition: all 0.3s;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<div class="h_text">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<a class="expand-collapse" href="#">Показать еще</a>

	<script>
	jQuery(function($) {
		
		var min_h  = 60,                 // максимальная высота свернутого блока
		text_class = '.h_text',          // класс блока с текстом
		more_class = '.expand-collapse'; // класс ссылки показать/скрыть
		
		$(text_class).each(function(indx, el) {
			var cont = $(el),
			max_h    = el.scrollHeight,
			butt     = cont.next(more_class);
    
			if (max_h <= min_h) {
				butt.hide();
			} else {
				butt.on("click", function(event) {
					var h = cont.height();
					$(text_class).css('max-height', h < max_h ? max_h : min_h);
					$(this).text(h < max_h ? "Скрыть" : "Показать еще");
					return false;
				})
			}
		})
	});
	</script>
</body>
</html>

     

     

     

    • +1 1
    ArtemPitov

    Опубліковано:

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

    Использую такое:

    Спойлер 
    
<html>
<head>
    <script src="jquery-2.1.1.min.js"></script>

    <style>
        .h_text {
            max-height: 60px;
            transition: all 0.3s;
            -moz-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="h_text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <a class="expand-collapse" href="#">Показать еще</a>

    <script>
    jQuery(function($) {
        
        var min_h  = 60,                 // максимальная высота свернутого блока
        text_class = '.h_text',          // класс блока с текстом
        more_class = '.expand-collapse'; // класс ссылки показать/скрыть
        
        $(text_class).each(function(indx, el) {
            var cont = $(el),
            max_h    = el.scrollHeight,
            butt     = cont.next(more_class);
    
            if (max_h <= min_h) {
                butt.hide();
            } else {
                butt.on("click", function(event) {
                    var h = cont.height();
                    $(text_class).css('max-height', h < max_h ? max_h : min_h);
                    $(this).text(h < max_h ? "Скрыть" : "Показать еще");
                    return false;
                })
            }
        })
    });
    </script>
</body>
</html>

     

     

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду