Новостная лента на jQuery

14 декабря 2014 Антон Кулешов 3270 0

Если у вас возникла необходимость добавить на сайт блок со сменяющимся контентом – новостную ленту, но желания писать свой скрипт у вас нет, то в этой статье вы узнаете о решении, которое позволяет осуществить это в несколько строчек jQuery кода.

Реклама

Идея проста, чтобы её реализовать необходимо, для начала, добавить HTML код нашей новостной ленты:

<ul id="ticker">
	<li>
		Запись №1
	</li>
	<li>
		Запись №2
	</li>
	<li>
		Запись №3
	</li>
	<li>
		Запись №4
	</li>
</ul>

Теперь добавим CSS:

#ticker{
	height: 40px;
	overflow: hidden;
}
#ticker li{
	height: 40px;
}

В каждом из элементов li будет храниться наша запись. Высота должна равняться высоте обертки, в нашем случае ul#ticker, если вам нужно чтобы одна запись была постоянна активна.

Теперь пишем jQuery код, который будет осуществлять нашу задумку:

function tick(){
	$("#ticker li:first").slideUp(function(){
		$(this).appendTo($("#ticker")).slideDown();
	});
};

setInterval(function(){
	tick();
}, 5000);

Вот так просто и, главное, без лишнего кода реализуется новостная лента. Конечно, вы можете использовать и другие варианты анимации, например смена новостей за счет свойства opacity. Как это работает, можно увидеть в материалах «демо». На данное решение я наткнулся совсем недавно и уже успел применить в нескольких проектах. Думаю, оно будет полезно и другим читателем этой статьи.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте

9 марта 2016 Антон Кулешов

На сегодняшний день, мы обладаем уникальной возможностью – отслеживать многочисленные потоки информации и сохранять важный контент у себя на интернет страницах. В один клик регистрироваться и авторизоваться на сайтах и различных сервисах. Уже не проблема быть в курсе различных и разносторонних новостей из разных сфер жизни или оставаться на связи со своими близкими и знакомыми. Мы стали пользователями многочисленных социальных сетей и обладателями личных страниц с индивидуальными номерами, которые хранят срез наших интересов. Посещая магазины в интернете и сайты с товарами, мы с лёгкостью можем подарить лишнюю информацию о себе, не заполнив при этом ни одной формы. Для продавца каждый из нас потенциальный клиент, и он хочет знать, кто к нему зашёл на сайт и по какому запросу. И это возможно - мы сами можем вручить свой уникальный идентификатор (id) профиля в социальной сети даже не заметив этого, что даст продавцу больше шансов впарить свой товар. Достигается это путем использования разновидности кликджекинга, так называемого соцфишинга, об этом сегодняшняя статья.

Всплывающие подсказки на CSS

28 декабря 2015 Антон Кулешов

После вынужденного отсутствия я вернулся к привычному распорядку дня и сегодня продолжу пополнять коллекцию falbar новыми решениями. Тема статьи не раз уже рассматривалась на сайте – всплывающие подсказки, но библиотека, о которой пойдет речь, возможно, наилучшим образом подойдет для вашего проекта, так как не использует сторонних скриптов, написанных на JavaScipt или jQuery, а только HTML и CSS.

Файл «robots.txt» – версия Яндекс

3 июля 2015 ti1schweiger

Всем добра! Возможно, сегодня я не скажу ничего нового, и вся изложенная ниже информация находится в свободном доступе в Помощи Яндекса, но, как показывает практика, очень мало людей ею пользуется, да и вообще задумывается о её существовании. Поэтому, дабы развеять сумрак над тем, что же все-таки должно быть написано в robots.txt, я приведу здесь материалы из Помощи Яндекса со своими личными комментариями.