Javascript-форум - Функционал "Читать полностью"

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

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

- - Функционал "Читать полностью" (https://javascript.ru/forum/dom-window/32517-funkcional-chitat-polnostyu.html)

Функционал "Читать полностью"

Доброй ночи,

Решил проверить свои силы в jQuerry на маленьких кодах и понял, что повязь по уши в своих пробелах в знаниях по этой библиотеке. :-E

Задача: все <div> у которых высота больше 150px, уменьшить до 130px, добавить нижний margin, поместить туда еще один <div> с словами "читать полностью". При нажатии на "читать полностью" - раскрывается.

Данный функционал используется в вконакте.ru: (пример)

Мои начинания:

<div class="Posts">
    <p>Mauris id mattis diam. Vestibulum eget ipsum sit amet nulla auctor pulvinar at et mauris. Donec faucibus euismod dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae quam dui, sit amet lacinia nisl. Nulla volutpat sollicitudin elit vel elementum.

In varius posuere tempus. Maecenas quis orci turpis. Curabitur a tortor eget lorem eleifend convallis at ac lacus. Quisque eget massa velit, in vehicula arcu. Suspendisse suscipit accumsan mi sed placerat. Aenean ut libero pulvinar odio porta aliquet eu ut ligula. Donec fringilla erat sed sapien ultricies adipiscing.</p>
</div>

$(document).ready(function() {

$('.Posts').each(function() {
	if($(this).css({'height' > '120px'}) {
		$(this).css({'height':'110px'});
	}

});
});

Заранее благодарен за помощь. Если вы с таким уже сталкивались и использовали другой вариант решение: буду рад отказаться от своего способа, и принять Ваш как единственный и истинный :thanks:

if(parseInt($(this).css('height'))>120) {
}

if(parseInt(this.style.height)>120) {
}

Если хотите добавить новый элемент воспользуйтесь:

var div=$('<div>',{
	'class':'div'
});

А вообще, советую детально изучить библиотеку.
А вообще рекомендую, сначала конечно же изучить азы (основы) языка javascript.

И попрактиковаться на чистом js.

Разбирайся:

$(function() {
	$('.Posts').each(function() {
		if($(this).height() > 120) $(this).css({height: 110, marginBottom: 10}).append("<div class=\"read_more\">Читать полностью...</div>").children(".read_more").click(function(){$(this).parent().css(height:"auto")});
	}
});

Оба кода не сработали в Песочнице http://learn.javascript.ru/play

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<style type="text/css">
		.overflow{height:120px;overflow:hidden;}
	</style>
</head>
<body>
	<div class="div">
		<p>
			Mauris id mattis diam. Vestibulum eget ipsum sit amet nulla auctor pulvinar at et mauris. Donec faucibus euismod dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae quam dui, sit amet lacinia nisl. Nulla volutpat sollicitudin elit vel elementum.
			In varius posuere tempus. Maecenas quis orci turpis. Curabitur a tortor eget lorem eleifend convallis at ac lacus. Quisque eget massa velit, in vehicula arcu. Suspendisse suscipit accumsan mi sed placerat. Aenean ut libero pulvinar odio porta aliquet eu ut ligula. Donec fringilla erat sed sapien ultricies adipiscing.
			Mauris id mattis diam. Vestibulum eget ipsum sit amet nulla auctor pulvinar at et mauris. Donec faucibus euismod dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae quam dui, sit amet lacinia nisl. Nulla volutpat sollicitudin elit vel elementum.
			In varius posuere tempus. Maecenas quis orci turpis. Curabitur a tortor eget lorem eleifend convallis at ac lacus. Quisque eget massa velit, in vehicula arcu. Suspendisse suscipit accumsan mi sed placerat. Aenean ut libero pulvinar odio porta aliquet eu ut ligula. Donec fringilla erat sed sapien ultricies adipiscing.
			Mauris id mattis diam. Vestibulum eget ipsum sit amet nulla auctor pulvinar at et mauris. Donec faucibus euismod dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae quam dui, sit amet lacinia nisl. Nulla volutpat sollicitudin elit vel elementum.
			In varius posuere tempus. Maecenas quis orci turpis. Curabitur a tortor eget lorem eleifend convallis at ac lacus. Quisque eget massa velit, in vehicula arcu. Suspendisse suscipit accumsan mi sed placerat. Aenean ut libero pulvinar odio porta aliquet eu ut ligula. Donec fringilla erat sed sapien ultricies adipiscing.
			Mauris id mattis diam. Vestibulum eget ipsum sit amet nulla auctor pulvinar at et mauris. Donec faucibus euismod dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae quam dui, sit amet lacinia nisl. Nulla volutpat sollicitudin elit vel elementum.
			In varius posuere tempus. Maecenas quis orci turpis. Curabitur a tortor eget lorem eleifend convallis at ac lacus. Quisque eget massa velit, in vehicula arcu. Suspendisse suscipit accumsan mi sed placerat. Aenean ut libero pulvinar odio porta aliquet eu ut ligula. Donec fringilla erat sed sapien ultricies adipiscing.
		</p>
	</div>
	<script type="text/javascript">
		$('.div').each(function() {
			if($(this).height()>=150) {
				var p=$('p',this),
					a=$('<a>',{
						'href':'',
						'class':'click'
					});
				p.addClass('overflow');
				a.text('подробнее');
				$(this).append(a);
				a.click(function() {
					if(p.hasClass('overflow')) {
						p.removeClass('overflow');
						a.text('скрыть');
					} else {
						p.addClass('overflow');
						a.text('подробнее');
					}
					return false;
				});
			}
		});
	</script>
</body>
</html>