Выезжающая панель на чистом CSS

<div id="slideout"> <img src="feedback.png" alt="Отправить отзыв" /> <div id="slideout_inner"> [Код формы вставляется здесь] </div> </div><div id="slideout"> <img src="feedback.png" alt="Отправить отзыв" /> <div id="slideout_inner"> [Код формы вставляется здесь] </div> </div> Слева: #slideout { position: fixed; top: 40px; left: 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout_inner { position: fixed; top: 40px; left: -250px; […]


Выпадающий по клику блок

<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $(".hider").click(function(){ $("#hidden").slideToggle("slow"); return false; }); }); // ]]></script> <a class="hider">Ссылка</a> <p class="hider">Абзац</p>   <div id="hidden" style="display: none;"> Некий текст содержащийся в данном блоке. По умолчанию он скрыт благодаря свойству display: none;</div><script src="jquery.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $(".hider").click(function(){ $("#hidden").slideToggle("slow"); return false; }); }); // ]]></script> <a class="hider">Ссылка</a> <p […]


Анимированная кнопка обратного звонка

Вся анимация выполнена с помощью CSS, без подключения дополнительных скриптов и плагинов. Сначала нужно добавить HTML разметку. У нас это будет обычная ссылка. В нужном месте у себя на сайте, в шапке или подвале вставляем такую строку. <a href="#" id="popup__toggle" onclick="return false;"> <div class="circlephone" style="transform-origin: center;"></div> <div class="circle-fill" style="transform-origin: center;"> </div><div class="img-circle" style="transform-origin: center;"> <div […]


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

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них […]


Формы в HTML

В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам. Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода. Эти виды взаимодействия включают в себя: • регистрацию и вход на сайтах; • ввод личной информации (имя, адрес, данные кредитной карты и др.); • фильтрацию контента (с помощью выпадающих […]


JavaScript – Скрипт для копирования текста в буфер обмена одним кликом.

Для копирования текста мы будем использовать скрипт clipboard.js-master Что такое clipboard.js? Clipboard.js-master – это современный скрипт, который используется для того чтобы предоставить пользователю возможность более просто скопировать (например, с помощью нажатия на кнопку) некоторую информацию представленную на странице сайта в буфер обмена. Работа данного скрипта опирается на API Selection и execCommand. Скачать clipboard.js-master Преимущества скрипта. […]


Хак админки WordPress

## Убираем значек вордпресс в левом верхнем углу add_action(’add_admin_bar_menus’, ‘reset_admin_wplogo’); function reset_admin_wplogo( ){ remove_action( ‘admin_bar_menu’, ‘wp_admin_bar_wp_menu’, 10 ); // удаляем стандартную панель (логотип)   add_action( ‘admin_bar_menu’, ‘my_admin_bar_wp_menu’, 10 ); // добавляем свою } function my_admin_bar_wp_menu( $wp_admin_bar ) { $wp_admin_bar->add_menu( array( ‘id’ => ‘wp-logo’, ‘title’ => ‘<span style="font-family:dashicons; font-size:20px;" class="dashicons dashicons-carrot"></span>’, // иконка dashicon // можно […]


CSS обрезка картинок

Использование отрицательных полей (Negative Margins) По этой технике картинку необходимо поместить в родительский элемент, в нашем случае, это параграф (тэг <p>). Родительский абзац должен быть плавающим(floating) элементом (или с заданной шириной). Эта техника не будет работать на элементах с атрибутом «в полную ширину» (full width). Затем мы задаем отрицательные поля для всех четырех сторон: верх(top), […]


Шпаргалки Java программиста 1: JPA и Hibernate в вопросах и ответах

Общие вопросы Вопрос 1. Что такое JPA? Ответ:  JPA (Java Persistence API) это спецификация Java EE и Java SE, описывающая систему управления сохранением java объектов в таблицы реляционных баз данных в удобном виде. Сама Java не содержит реализации JPA, однако есть существует много реализаций данной спецификации от разных компаний (открытых и нет). Это не единственный […]


Шпаргалки Java программиста 2: JPA и Hibernate в вопросах и ответах

Аннотации JPA Вопрос 30. Для чего нужна аннотация Basic? Ответ: Basic — указывает на простейший тип маппинга данных на колонку таблицы базы данных. Также в параметрах аннотации можно указать fetch стратегию доступа к полю и является ли это поле обязательным или нет. Примеры: Example 1: @Basic protected String name; Example 2: @Basic(fetch=LAZY) protected String getName() […]