Полезные однострочники на JavaScript

Объем js-кода напрямую влияет на время загрузки страницы. Если есть возможность сократить код - это обязательно нужно сделать! В данной статье буду собирать полезные однострочники, который дают возможность уменьшить время загрузки сайта

Функция кроссбраузерного определения размеров браузера

Предлагаю вашему вниманию интересную функцию определения размеров экрана и небольшой пример ее использования

Фиксированное меню от bootstrap и панель 1С-Битрикс

Небольшая функция, которая помогает подружить панель 1С-Битрикс и фиксированное верхнее меню от bootstrap

Отправка формы с файлом по jquery.ajax

В старых браузерах способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Если для вас не важна поддержка старых браузеров, то можно пользоваться прогрессом:)

Показ youtube-ролика в фрейме с помощью fancybox

Скрипт помогает показывать ролики youtube во всплывающем окне

Добавление ссылки на страницу при копировании текста

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

Отложенная загрузка изображений при помощи JavaScript

Если на странице очень много изображений - это очень плохо для скорости загрузки страниц. Гугловский pagespeed при проверке сайта в 90% случаев находит самую большую проблему именно в изображениях. Пробовал использовать скрипты оптимизации - не помогают. pagespeed настроенный на сервере - слишком сильно ухудшает качество. Решением проблемы стал скрипт отложенной загрузки изображений.

Перезагрузка страницы через интервал времени

Иногда бывает нужно перезагрузить страницу (или произвести редирект на другую страницу) после выполнения какого-либо события, например, отправки аяксом данных на сервер.

Плавный скроллинг к элементу на jQuery

При работе с веб-формами очень часто встает задача прокрутки страницы к тому или иному элементу. Например, при валидации форм, нужно показать пользователю, какое же из полей оказалось ошибочным.

Текущий адрес страницы

В данном посте рассмотрим, как работать с текущим адресом страницы в JS.

Проверка того, что блок ушел за верхний край экрана

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

Скрыть часть текста в кнопку "Показать больше"

Достаточно распространенная задача скрывать часть описательного текста под кнопкой "показать еще". 

Данный пост содержит лишь заготовку кода на jquery, которую всегда можно улучшить стилями.

Функция выравнивания элементов в списке

Часто бывает необходимость вывести список div-блоков с выравниванием высоты каждого из них относительно друг друга. 

Магия hover на тачскринах

Существует достаточно распространенная практика реализации многоуровнего меню с помощью hover-эффекта, когда подразделы показываются только при наведении мыши на раздел верхнего уровня.

Данный вариант реализации уже давным давно заслужил свое право на существование и используется в миллионах сайтов, но что делать на устройствах, лишенных такого блага цивилизации, как компьютерная мышь? А в последние несколько лет, достаточно высокую популярность набирают планшеты, ничем не уступающие по размерам экрана стандартным мониторам и правила, прописанные для адаптивности сайта на основании ширины экрана, в данном случае нам не помощник.

Перебирающие методы

Во многих (в большинстве) языках программирования массив и объект - это разные сущности, с разными характеристиками. В JavaScript объект и массив - это, по сути, одно и то же. 

Точнее, не так, объекты в JavaScript сочетают в себе два важных функционала. Первый – это ассоциативный массив: структура, пригодная для хранения любых данных. Второй – языковые возможности для объектно-ориентированного программирования. Массив – разновидность объекта, которая предназначена для хранения пронумерованных значений и предлагает дополнительные методы для удобного манипулирования такой коллекцией.

В данной статье рассмотрим основные варианты перебора элементов массивов (ассоциативных и обычных, пронумерованных).

Адаптивные YouTube-ролики на сайте

В работе контент-менеджера есть один момент, который может нарушить адаптивность работы сайта - это вставки видео. 
При вставке видео с сервиса YouTube, сервис генерирует код iframe-а, который содержит жесткие размеры ширины и высоты. При открытии страницы на экранах, меньших этих размеров, страница будет "плыть".

Поэтому нужно настроить автоматическое изменение параметров iframe под размеры экрана.

Функция, проверяющая, попал ли элемент в область видимости пользователя

При подвязке к сайту различных функций по сео-аналитике, достаточно частой задачей является проверка того, какие из элементов попали в область видимости, а какие - нет, т.е. какие из товаров, например, пользователь реально увидел.

Замена стандартного битриксового прелоадера

При выполнении каких-либо аякс-запросов, стоит показывать пользователю, что система что-то делает, а не просто зависла. Для этих целей пользователю нужно показать прелоадер. в арсенале 1С-Битрикс есть соответствующие функции под данную задачу, вот только прелоадер, который данные функции показывают - слишком примитивный :( Поэтому достаточно распространенная задача менять данный прелоадер на что-то своё, более красивое.