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

Доброй ночи,

Решил проверить свои силы в 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.

Pellentesque varius, purus at vestibulum aliquet, justo purus commodo nulla, ut facilisis nisi dui et nunc. Pellentesque gravida vestibulum scelerisque. Phasellus blandit tincidunt nisi, eget volutpat leo condimentum in. Pellentesque molestie imperdiet enim, a posuere libero consectetur et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec tempor orci. Duis ullamcorper, mi in sodales tincidunt, ipsum orci blandit est, in eleifend libero est a nulla. Proin auctor tellus a ligula malesuada adipiscing eget interdum augue. Morbi vel purus orci, ut gravida mi. Proin vehicula porta tortor, eget laoreet quam accumsan quis. Integer dictum tincidunt ipsum et mollis. Nunc nibh arcu, aliquam sit amet vehicula ac, fringilla quis orci. Curabitur sit amet sem a odio vehicula consectetur in vel enim. Proin nec sem eros. Sed a lectus ligula, quis fringilla nulla. Suspendisse potenti.

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>

Че-нибудь типа

var expandPost = function(){
    $(this).parent().css({height:  'auto', overflow: 'auto'});
    $(this).remove();
};

$('.post').each(function(post){
    if ($(post).heigth > 150) {
        $(post).css({height:  '150px', overflow: 'hidden'});
        $(post).append($('<span class="post-expander">').html('развернуть').click(expandPost));
    }
});

danik.js,
Во бредятина...

http://javascript.ru/forum/dom-windo...tml#post211151

Не нужно создавать одинаковые темы.

Олень что ли?

Решение идентичное приведенным по ссылке. Разве что с парой очепяток и не плодятся обработчики кликов.

плодятся. правда, без замыкания.

мда, похоже, про делегирование никто не слышал.

danik.js, у каждого свой велосипед, спору нет, вариантов на решение можно придумать множество.
Тебе бы сдержанности побольше.)

Я с многим соглашаюсь и набираюсь опыта.
Я выражаюсь к тому, что как могу так помогу.)
Когда появляется время практикуюсь.

jquery .click() если не вложен в другое событие, удалив событие .unbind('click'), повторно не запустить.

Так как событие не пере создастся. Ибо у ранее созданного объекта после загрузки страницы тут получается поиск сразу всех контейнеров и создания объектов this.
var повторится, код внутри each повторится столько, сколько надо.

Что вы подразумеваете под словом плодятся?

заодно и прицепится обработчик клика к новосозданному элементу (<span>).

Ааа... Ну это да)
Вообще лишнее... )