Всем привет.
Ребят, у меня вопрос, я задал размеры блоку height: 150; width: 250;
Когда человек оставляет комментарий не более 25 слов, необходимо, чтобы текст находился только в том блоке, а если комментарий больше 25 слов, то появляется кнопка "Читать далее" и показывался остальной текст. При уводе мышки, куда-нибудь этот блок должен закрываться.
Помогите плиз, спасибо)
Пусть не смущает количество кода - это только для визуальной составляющей, и может быть сокращено, в соответствии с задачами.
$(window).load(function() {
$('.comment_wrap').each(function(index) {
let $this = $(this);
let $comment_over = $this.children('.comment_over');
let $comment_area = $this.children('.comment_area');
let $comment_head = $this.children('.comment_head');
function fNumberWords(oElem) {
$comment_head.text('Количество слов: ' + oElem.text().split(' ').length);
return oElem.text().split(' ').length
}
(fNumberWords($comment_area) > 25) ? $comment_over.show(): $comment_over.hide();
$comment_over.on('click', function(ev) {
$this.css('height', 'auto');
$comment_over.hide(500);
});
$this.on({
mouseleave: function(ev) {
$this.css('height', '150px');
(fNumberWords($comment_area) > 25) ? $comment_over.show(): $comment_over.hide();
},
input: function(ev) {
$this.css('height', 'auto');
$comment_over.hide();
fNumberWords($comment_area);
}
});
});
});
* {
box-sizing: border-box;
}
.comment_wrap {
position: relative;
float: left;
margin: 2px;
width: 250px;
height: 150px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
box-shadow: 1px 2px 4px #aaa;
}
.comment_head {
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}
.comment_area {
padding: border: 1px solid #ccc;
min-height: 100%;
padding: 8px;
outline: none;
text-align: justify;
box-shadow: inset 0px 1px 8px #444;
}
.comment_over {
position: absolute;
bottom: 0;
right: 0;
padding: 1px 5px;
cursor: pointer;
background: #fff;
text-shadow: 1px 2px 3px #000;
box-shadow: -1px -1px 30px 15px #fff;
}
.comment_over:hover {
text-shadow: 0px 0px 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment_wrap">
<div class="comment_head"></div>
<div class="comment_area" contenteditable>
Здесь, в этом блоке, количество слов больше двадцати пяти, поэтому кнопка спойлера видна. Вы можете отредактировать текст прямо в поле, проследить за изменениями и понять логику скрипта.
</div>
<div class="comment_over">Читать далее</div>
</div>
<div class="comment_wrap"><div class="comment_head"></div><div class="comment_area" contenteditable>В этом блоке слов меньше, чем 25, потому кнопка спойлера не появляется. Но, всегда можно дописать нужное количество слов.</div><div class="comment_over">Читать далее</div></div>
<div class="comment_wrap"><div class="comment_head"></div><div class="comment_area" contenteditable>Количество блоков может быть любым. Их поведение будет одинаковым. Главное - сохранить разметку.</div><div class="comment_over">Читать далее</div></div>
Лучше смотреть развернув страницу.
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Есть задача - создание дополнительного функционала для легаси-кода написанного на jqueryНа сколько приемлемо вообще создание jquery-плагина используя...