Для получения полного доступа
зарегистрируйтесь

Иван Бармашов    71   5 122


Программист.

  • Москва
  • Knowledge Base
  • JS, HTML5, CSS3
  • Зарегистрирован 2 года назад

UPD: обновил сниппет, спасибо Great-Antique

Когда на странице в списках много элементов, то её нужно как-то скрывать. В проекте использовал такое решение:

1llArka.png

Продолжение

При не сложной структуре разметки, вы можете создавать одностраничные сайты — которые хорошо смотрятся для презентации продукта, услуги.

Чтобы понять о чём речь, смотри демо

Продолжение

Результат: 0dc7ec0c59a544528cde1e8d76d0c3ce.png

Не знал о такой манипуляции с элементами. Если вы до сих добавляете ксс-классы через 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;
}