Таблица с фиксированной шапкой на HTML при помощи CSS при скроллинге страницы

HTML таблица с фиксированной шапкой Согласитесь, таблицы с большим количеством строк тяжело читать и разбирать. Куда удобнее их просматривать, когда шапка с наименования столбцов фиксируется при скролле. При помощи position: sticky можно зафиксировать шапку таблицы (или блок) при скролле странницы. Данное позиционирование схоже с position: fixed. Различие лишь в том, что position: sticky фиксирует элемент в пределах своего родителя. Чтобы зафиксировать шапку таблицы при скроллинге, задайте тегам <th> позиционирование sticky и отступ сверху при помощи 20px. ДЕМО table .th{ position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 20px; } Отступ необходим, если у вас, к примеру, также на сайте есть фиксированная шапка с…

Надоела постоянная капча Яндекс ВордСтат? Как убрать капчу в wordstat.yandex.ru?

Убираем капчу при работе с ВордСтат в Яндексе Для всех тех, кто как и я часто использует ВордСтат Яндекс, порядком надоела постоянная капча при подборе слов и составления семантического ядра. Я давно веду блог и пользуюсь подбором слов от Яндекса, но проблемы с назойливой капчей wordstat у меня началась совсем недавно, а точнее после смены ОС и основного браузера (с Opera на Chrome). Позабыв как тогда у меня получилось убрать капчу в ВордСтате Яндекс, я отправился на к Google.com. И вот какие варианты решений данной проблемы он мне предложил: Перейти на Яндекс Wordstat через Яндекс Директ Сменить DNS, так как с вашего IP занесен…

Яндекс Спеллер – онлайн проверка орфографии русского, украинского или английского текста

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

Всплывающее окно при входе на сайт. Как сделать всплывающее окно для сайта при заходе на него

Всплывающее окно при заходе на сайт Для различных целей может понадобится всплывающее окно на сайте с какой-либо важной информацией. К примеру: акции, подписка, объявления и т.п. Для реализации будем использовать стандартную библиотеку jquery и jquery.cookie. Окно можно сверстать, но я буду использовать стандартное модальное окно Bootstrap. Для начало вам понадобится подключить библиотеки jquery и css стили для Bootstrap: <!-- css Bootstrap --> <link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- jquery --> <script src="https://yastatic.net/jquery/3.1.1/jquery.js"></script> <script src="https://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script> <script src="https://yastatic.net/bootstrap/3.3.6/js/bootstrap.min.js"></script> Код HTML всплывающего окна Bootstrap: <div id="okno" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Всплывающее…

Как включить мониторинг доступности сайта по SMS или почте через Яндекс Метрику

Постоянная проверка доступности сайта через уведомления Когда начинаются проблемы с сайтом, необходимо быстро среагировать и решить возникшие проблемы. Для этого используют постоянный мониторинг доступности ресурса. Я давно пользуюсь Яндекс Метрикой для сбора аналитических и статистических данных о пользователях веб-ресурса. Это очень удобный и полезный инструмент для веб-разработчиков с большим. И очень удобно, что в настройках счетчика метрики можно включить уведомления о доступности ресурса. Выберите нужный вам счетчик и перейдите в "Настройки", нажав на соответствующую иконку или раздел из бокового левого меню. Т.е. Яндекс Метрика осуществляет постоянный мониторинг доступности сайта и, когда пользователю веб-ресурс недоступен, уведомляет вас по почте или смс. Уведомления…

Асинхронная загрузка CSS и JS скриптов на сайте

Асинхронная загрузка CSS и JavaScript файлов При помощи асинхронной загрузки файлов CSS и JS ваш сайт сможет быстрее загружать страницы и это хорошо скажется на мобильном трафике. Асинхронная загрузка CSS При помощи кода, указанного ниже, мы добавляем в тег HEAD стили после полной загрузки страницы. $(document).ready(function() { $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />"); }) APPEND() - добавляет в конец выбранных элементов контент. Советую Не забудьте также засунуть все стили в тег <style></style>, необходимые для отрисовки верхней части страницы. Код будет выглядеть так: <html> <head> <b><style> h1 { font-size:22px; color:<span class="comment"> #ccc; text-align:center;} </span></style></b> </head> <body> <h1>Заголовок</h1> <hr/> {ТЕЛО САЙТА} <script> $(document).ready(function() {…

Как удалить параметр или якорь (#, hash) в URL при помощи JS

Убираем якорь из урла на JS Частенько использую якоря (hash) в урлах, чтобы при переходе на другую страницу автоматически скроллить пользователя до необходимой секции или информационного блока. Ну чтобы при обновлении страницы пользователя снова не срабатывал скролл, мне понадобилось убрать якорь из урла (#). Сделать это можно простым кодом в одну строчку, который я вызываю после скролла. history.pushState("", document.title, window.location.pathname); history.pushState(state, title, [url]) - метод в HTML документе, который добавляет новое состояние в историю браузера. Где state - это JavaScript-объект, связанный с новой записью в истории, title - заголовок страницы и url (необязательный) - URL-адрес новой записи в истории. Если простым языком, то я чтобы убрать якорь…

Как создать поддомены на Beget

Добавляем поддомен на сервисе Beget.ru Сейчас я вам расскажу как быстро и просто добавить бесплатно поддомен на Бегете к домену. А также вы узнаете все нюансы, связанные с этим. Итак для начало просто зайдите на сайт Beget.ru под своим логином, если его у вас нет, то зарегистрируйтесь. Теперь перейдите в раздел "Домены и поддомены". Впишите в поле поддомен домена, который у вас был куплен или делегирован на сервисе Beget.ru и нажмите "Добавить домены". Вы также можете сразу привязать поддомен к созданную заранее сайту или VPS серверу. Вы также можете изменять DNS у поддоменов, для этого просто перейдите в настройки DNS…

Как сделать 301 редирект с HTTP на HTTPS и наоборот через htaccess

Настраиваем 301 редирект на сайте через .htaccess Бывает необходимо создать 301 редирект на сайте с HTTP на HTTPS. Редиректы можно настроить через панель управления хостинга в разделе "Домены". Но не на всех хостингах есть такие настройки. В этом посте я расскажу как настроить 301 редирект через конфигурационный файл веб-сервера .htaccess. Редирект с HTTP на HTTPS Вариант 1: <pre>RewriteEngine On RewriteCond %{SERVER_PORT} !^443$ RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]</pre> Если вариант 1 не помог, то попробуйте второй: <pre>RewriteEngine On RewriteCond %{HTTPS} =off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [QSA,L]</pre> Разумеется код необходимо вставить в файл .htaccess только после строчки RewriteEngine On. Редирект с HTTPS на HTTP <pre>RewriteEngine On…

Адаптивная таблица на CSS и HTML без Bootstrap

Верстка адаптивной таблицы на чистом CSS и HTML. Совсем недавно мне понадобилось сверстать таблицу, которая была бы адаптивна к мобильным разрешениям. Для начала сверстаем простую таблицу HTML с небольшим количеством ячеек. Код HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <table id='adap-table'> <thead> <tr> <th>Устройство</th> <th>Цена</th> <th>Время</th> <th>Гарантия</th> </tr> </thead> <tbody> <tr> <td data-label="Устройство" class="active">Apple</td> <td data-label="Цена">10 000</td> <td data-label="Время">2 часа</td> <td data-label="Гарантия">1 год</td> </tr> <tr> <td data-label="Устройство">LG</td> <td data-label="Цена">5 000</td> <td data-label="Время">1 час</td> <td data-label="Гарантия">1 год</td> </tr> <tr> <td data-label="Устройство">SONY</td> <td data-label="Цена">5 000</td> <td data-label="Время">1 час</td> <td data-label="Гарантия">1 год</td> </tr> </tbody> </table> <body> </html>…