Кнопки репостов в социальные сети с помощью JavaScript


Социальные сети занимают огромный сектор интернета, миллионы людей ежедневно выходят в онлайн только ради них. В связи с этим, появилось множество новых направлений рекламы и продвижения продуктов. Одним из инструментов которых являются репосты — простая публикация ссылки на страницах пользователей сец. сетей. Правильно оформленная ссылка является не плохой рекламой и может привести потенциальных клиентов на ваш сайт.
Для упрощения механизма репостов, существуют специальные виджеты, их можно легко найти в документации соц. сетей и установить на свой сайт. Но легко и быстро, не всегда равно качеству. Помимо установки кода виджета, необходимо подготовить площадку, чтобы при репосте была использована верная информация: заголовок, описание, картинка и ссылка. Кроме этого, готовые решения всегда имеют и готовый дизайн, который в большинстве случаев, крайне не сочетается с дизайном всего сайта. Но производить стилизацию виджетов не всегда получается, а если и получается, то крайне неудобно. Поэтому нужно искать другое решение.

Читать далее «Кнопки репостов в социальные сети с помощью JavaScript»

Картинка 360 градусов на JavaScript


Недавно я писал статью про поворотный стол, с помощью которого хотел снимать короткие видео прототипов и готовых устройств. На видео можно будет осмотреть предмет со всех сторон, это удобней, чем просто фотография. Идея не плохая, но появилась, как мне кажется, более интересная – реализовать фотографию с обзором в 360, где пользователь сам сможет повращать изображение с помощью мышки. Такой подход позволит вращать картинку в любом направлении, с удобной скоростью и возможностью останавливаться в любой момент. Чтобы реализовать возможность такого просмотра я написал маленький jQuery плагин на JavaScript.
Читать далее «Картинка 360 градусов на JavaScript»

Кеширование ajax запросов jquery


Кеширование ajax запросов jquery. Введение

Кеширование ajax запросов jquery Тема кеширования ajax запросов, является специфической, поскольку в большинстве случаев необходимо получить с сервера или передать ему актуальные данные. Но бывает и такое, что для данных получаемых с сервера, не критична актуальность, в разумных временных рамках, например, в течении часа. То есть, данные, которые присылает сервер, могут быть закешированы на час. Это существенно увеличит скорость отзыва запросов, а также ослабит нагрузку на сервер.
Читать далее «Кеширование ajax запросов jquery»

Как обрезать длинную строку и добавить в конец точки на javaScript


Как обрезать длинную строку на javaScript. Введение

Как обрезать длинную строку и добавить в конец точки на javaScriptЯ уже как-то писал статью как обрезать длинную строку и добавить в конец точки, только в прошлой статье код был написан на php. В этой статье реализован практически тот же функционал, только на javaScript. Чтобы код не повторялся, я решил его немного разнообразить. Помимо обрезания строки и подстановки в конец точек можно сделать плавное осветление последних символов.
Читать далее «Как обрезать длинную строку и добавить в конец точки на javaScript»

Проверить видимость элемента с помощью jquery


Проверить видимость элемента. Введение

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

Аккордеон с помощью jQuery


Аккордеон с помощью jQuery. Введение

Аккордеон с помощью jQueryСегодня я хочу продолжить серию статей по работе с jQuery, как вам уже, наверняка известно, я стараюсь минимизировать количество подключаемых чужих библиотек и стараюсь все писать сам. Это помогает лучше вникать в программирование, понимать суть тех вещей, которые используются на сайте, да и намного приятней и интересней все делать самому :). И в этой статье я хочу показать как можно легко и быстро сделать, не прибегая к готовым решениям, аккордеон. Аккордеон — это блок, который позволяет уместить на странице гораздо больше информации, за счет того, что отображается только ее часть — заголовки. При клике по заголовку должна плавно раскрыться скрытая часть, и в тоже время скрыться ранее открытая. Для того, чтобы было лучше понятно, что такое аккордеон с помощью jQuery, я привел ниже пример.
Читать далее «Аккордеон с помощью jQuery»

Координаты курсора с помощью jQuery


Координаты курсора с помощью jQuery. Введение

Координаты курсора с помощью jQueryВ этой статье я покажу маленький но полезный пример, как получать координаты курсора с помощью jQuery. Довольно часто приходится получать координаты курсора, как относительно всей страницы, так и относительно какого-нибудь элемента на странице, например внутри дива. Эти два варианта я и покажу. С первым все просто, можно обрабатывать событие, например, mousemove и получать в нем координаты относительно страницы. Со вторым вариантом — координаты внутри элемента, не на много сложнее: получаем координаты элемента и координаты курсора, находим разницу, а ответ и будет положение курсора внутри элемента.
Читать далее «Координаты курсора с помощью jQuery»

Всплывающие подсказки с помощью jQuery


Всплывающие подсказки с помощью jQuery. Введение

Всплывающие подсказки с помощью jQueryВ этой статье я покажу, как можно с реализовать,часто используемый на сайтах, функционал — всплывающие подсказки. Работать подсказки будут на jQuery, поэтому не забудьте подключить эту библиотеку к своему проекту.
Читать далее «Всплывающие подсказки с помощью jQuery»

Стилизация checkbox с помощью jQuery


Стилизация checkbox. Введение

Стилизация checkbox с помощью jQueryЭта статья будет коротенькая, но надеюсь, полезная, в ней я хочу показать, как быстро и просто реализуется стилизация checkbox с помощью jQuery. Все что нам потребуется, это обернуть checkbox span`он и div`ом, после чего скрыть сам чекбокс — этого мы добьемся с помощью css стилей. Остальное реализуем с помощью jQuery. При клики по диву, в котором будет находится наш чекбокс, мы будем проверять его атрибута checked и в зависимости от значения — true или false, будем менять изображение чекбокса, которое зададим span`у с помощью стилей. Для получения значения атрибута стоит использовать метод prop, в отличии от attr, он работает всегда, корректно отдает значение атрибутов для чекбокса.
Читать далее «Стилизация checkbox с помощью jQuery»

Увеличение картинки при наведении на jQuery


Увеличение картинки при наведении на jQuery. Введение

Увеличение картинки при наведении на jQueryВ этой статье, я продолжу показывать примеры работы с библиотекой jQuery, и на очереди пример реализации увеличение картинки при наведении на jQuery. Такие простые вещи я практически всегда стараюсь реализовывать без сторонних библиотек, и это пример не исключение все напишем сами.
Начнем с того что разберемся, что и как будем делать: необходимо при наведении на картинку увеличивать ее размер, до заданного размера, а при отведении курсора уменьшать в исходное положение.
Читать далее «Увеличение картинки при наведении на jQuery»