Skip to content

Instantly share code, notes, and snippets.

View AlexKardone's full-sized avatar

Alexander Matskevich AlexKardone

View GitHub Profile
@AlexKardone
AlexKardone / Menu-gamburger
Last active January 26, 2018 19:44
Menu-gamburger with animation. Three variants
https://codepen.io/YRaj/pen/jYmqjb
@AlexKardone
AlexKardone / Smooth Scroll to top button + font awesome 1
Created February 6, 2018 05:08
Smooth Scroll to top button + font awesome
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class='thetop'></div>
<div class='testheight'>Some exciting content... Scroll down for the button to appear.<br><br>
<i class="fa fa-4x fa-thumbs-up fa-spin"></i>
</div>
<div class='scrolltop'>
<div class='scroll icon'><i class="fa fa-4x fa-angle-up"></i></div>
</div>
@AlexKardone
AlexKardone / Smooth scrolling (on scrolldown button)
Last active February 18, 2018 16:05
Smooth scrolling (on scrolldown button)
$("body").on('click', '[href*="#"]', function(e){
var fixed_offset = 100;
$('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
e.preventDefault();
});
@AlexKardone
AlexKardone / Sticky footer (bootstrap version) - css
Last active July 2, 2018 08:50
Sticky footer (bootstrap version)
@AlexKardone
AlexKardone / gist:2d06f4e77966d58e1d11042fe9e05627
Created September 14, 2018 08:20
Выравнивание по вертикали внутри блока без заданной высоты
https://learn.javascript.ru/css-center
Если центрируются не-блочные элементы, например inline или inline-block, то vertical-align может решить задачу без всяких таблиц.
Правда, понадобится вспомогательный элемент (можно через :before).
Пример:
<style>
.before {
display: inline-block;
@AlexKardone
AlexKardone / gist:fe7d6bea46863538a68b0b8690beaeb8
Created December 8, 2018 20:04
Hide element after tap outside an element (for Iphone)
$('html').on('touchstart', function(e) {
$('.navbar-flyout').hide();
})
$(".navbar-flyout").on('touchstart',function(e) {
e.stopPropagation();
});
// http://qaru.site/questions/1412280/javascript-jquery-tap-outside-an-element-on-an-iphone
@AlexKardone
AlexKardone / Close popup when click outside it
Created April 28, 2019 07:47
Close popup when click outside it
// get the container of the popup window
var wind = setup.querySelector('.popup-window');
var closePopup = function() {
setup.classList.add('hidden');
};
document.body.addEventListener('click', function(evt) {
if (!wind.contains(evt.target)) {
closePopup();
'use strict';
var ESC_KEYCODE = 27;
var ENTER_KEYCODE = 13;
// Нажатие на элемент .setup-open удаляет класс hidden
// у блока setup. Нажатие на элемент .setup-close, расположенный
// внутри блока setup возвращает ему класс hidden.
var setup = document.querySelector('.setup');
var setupOpen = document.querySelector('.setup-open');
@AlexKardone
AlexKardone / Drag&Drop an element in the page
Created May 7, 2019 05:27
Drag&Drop an element in the page
'use strict';
var setup = document.querySelector('.setup');
var dialogHandler = setup.querySelector('.setup-user input');
dialogHandler.addEventListener('mousedown', function(evt) {
evt.preventDefault();
var startCoords = {
x: evt.clientX,
y: evt.clientY
@AlexKardone
AlexKardone / Get the document height
Created May 23, 2019 08:39
Get the document width/height
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') > -1);
var isIE = (!isOpera && ua.indexOf('msie') > -1);
function getDocumentHeight() {
return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollHeight : document.documentElement.scrollHeight, getViewportHeight());
}
function getViewportHeight() {
return ((document.compatMode || isIE) && !isOpera) ? (document.compatMode == 'CSS1Compat') ? document.documentElement.clientHeight : document.body.clientHeight : (document.parentWindow || document.defaultView).innerHeight;