Иван Бармашов 71 16 062
Программист.
Программист.
UPD: обновил сниппет, спасибо Great-Antique
Когда на странице в списках много элементов, то её нужно как-то скрывать. В проекте использовал такое решение:
При не сложной структуре разметки, вы можете создавать одностраничные сайты — которые хорошо смотрятся для презентации продукта, услуги.
Чтобы понять о чём речь, смотри демо
Результат:
Не знал о такой манипуляции с элементами. Если вы до сих добавляете ксс-классы через if-ы, подумайте об использовании этого подхода.
.members .item:nth-child(n+3):nth-child(-n+5) {
background: #9b59b6;
color: #fff;
}
В соц. сетях, например в Twitter, вы заметите, что даты выводятся в формате — 1 hour ago
. Чтобы сделать на своё сайте также, нам достаточно использовать timeago.js
Если вам нужна поддержка русского языка, достаточно подключить его так:
<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/jquery.timeago.js"></script>
<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/locales/jquery.timeago.ru.js"></script>
Другие локализации можете найти тут — locales
// JS
jQuery(function ($) {
$(document).ready(function() {
$('.time').timeago();
});
});
// Html
<span class="time" title="2015-08-18T09:24:17Z"></span>
Если у вас много битых картинок, вы можете их либо скрыть, либо заменить в них урл:
// Прячем битую картинку
$("img").error(function(){
$(this).hide();
});
// Заменяем урл у битой картинки
$('img').error(function(){
$(this).attr('src', 'img-broken.png');
});
Сделать это можно с помощью библиотеки html2canvas:
$(document).ready(function() {
// Скриншот элемента
html2canvas($('#items'), {
onrendered: function(canvas) {
$('body').append(canvas);
}
});
// Скриншот страницы
html2canvas($('body'), {
onrendered: function(canvas) {
$('body').append(canvas);
}
});
});
Бывают случаи, когда необходимо обратиться к следующему элементу, например так:
<div class="news">
<ul>...</ul>
</div>
<div class="community">
<ul>...</ul>
</div>
Так мы получим доступ к первому item
, и с ним уже можно провести необходимые Вам манипуляции.
.news + .community {
border: .1em solid #8e44ad;
}