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

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

Генерация пароля с помощью JavaScript

Наткнулся на интересное решение для генерации случайного пароля с помощью JavaScript. Код очень короткий и простой, он мне настолько понравился, что я решил написать про него небольшую статейку. Расписывать тут особо нечего, вся генерация сводится к одной строке:
Math.random().toString(36).slice(-8);
На этом можно закончить, но получилось совсем короткая запись, даже по меркам twitter`a. Поэтому добавлю пояснение и еще один вариант генерации.
Читать далее «Генерация пароля с помощью JavaScript»

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

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

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

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

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

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

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

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

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

Получение случайного числа из заданных

Получение случайного числа из заданных. Введение

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

Аккордеон с помощью 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»