Skip to content

Instantly share code, notes, and snippets.

View igorpronin's full-sized avatar

Igor Pronin igorpronin

View GitHub Profile
@igorpronin
igorpronin / css
Last active August 29, 2015 14:27
Turn OFF Animate.css on Mobile Devices
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.animated {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
@igorpronin
igorpronin / js
Last active August 29, 2015 14:27
jQuery add / remove / change css class on click
$(".click_element").click(function() {
if ($(".target_element").is(".class_1")) {
$(".target_element").removeClass("class_1");
$(".target_element").addClass("class_2");
} else {
$(".target_element").removeClass("class_2");
$(".target_element").addClass("class_1");
}
});
@igorpronin
igorpronin / html, css
Created August 15, 2015 13:50
HTML, CSS / Правильная верстка: ограничение изображения по размеру блока
HTML
<div class="wrap">
<img src="img/img.jpg">
</div>
CSS
.wrap {
width: 200px;
@igorpronin
igorpronin / html, css
Last active August 29, 2015 14:27
HTML, CSS / Выравнивание элементов по центру по вертикали, горизонтали. Способ 1. Древний.
Способ надежный, но для .wrap нельзя задать размеры в %. Плохо подходит для адаптива.
-----------
HTML
<div class="wrap">
<div class="content"> </div>
</div>
CSS
@igorpronin
igorpronin / html, css
Created August 15, 2015 14:39
HTML, CSS / Выравнивание элементов по центру по вертикали, горизонтали. Способ 2. Адаптив.
HTML
<div class="wrap">
<div class="content"> </div>
</div>
<div class="wrap">
<img src="http://lorempixel.com/200/200/sports/" width="200" height="200">
</div>
@igorpronin
igorpronin / html, css
Created August 15, 2015 14:53
HTML, CSS / Выравнивание элементов по центру по вертикали, горизонтали. Способ 3. Современный, математический.
Работает в новых браузерах. IE - от 10.
---
HTML
<div class="wrap">
<div class="content"> </div>
</div>
<div class="wrap">
@igorpronin
igorpronin / html, css
Created August 15, 2015 16:03
HTML, CSS / Выравнивание нижнего края элемента по центру окна браузера
HTML
<div class="wrap">
<div class="content"> </div>
</div>
CSS
.wrap {
background-color: green;
@igorpronin
igorpronin / js
Created August 16, 2015 17:16
jQuery check and change attribute value on click
$("#click_tag").click(function() {
if ($("#target_tag").attr("attr_name")==("attr_value1")) {
$("#target_tag").attr("attr_name", "attr_value2");
} else {
$("#target_tag").attr("attr_name", "attr_value1");
}
});
@igorpronin
igorpronin / html, js, ajax, php, sql
Last active August 29, 2015 14:27
Ajax example 1, get method
-------client side
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Работа с json</title>
<link rel="stylesheet" href="/jslibs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/jslibs/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
@igorpronin
igorpronin / js
Created September 13, 2015 09:39
Следить за событиями на странице
// набирать в консоли
// запуск функции
monitorEvents(document.body); // Следить за всеми событиями
monitorEvents(document.body, "mouse"); // Следить за событиями мыши
monitorEvents(document.body, "key"); // Следить за событиями клавиатуры
monitorEvents(document.body, "touch"); // Следить за событиями прикосновений к экрану
monitorEvents(document.body, "control"); // Следить за событиями resize, scroll, select и пр.