Skip to content

Instantly share code, notes, and snippets.

View Nikolasgrizli's full-sized avatar
🏠
Working from home

Nikolay Evsukov Nikolasgrizli

🏠
Working from home
  • Ukraine
View GitHub Profile
@Nikolasgrizli
Nikolasgrizli / index.html
Created October 12, 2021 22:13 — forked from alasomlira/index.html
SwiperJS & YouTube
<div class="wrap">
<div class="wrap-inner">
<div class="swiper-outter">
<div id="video-swiper" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="video-container">
<div class="yt-player" data-id="MxBRpWcXeOA"></div>
@Nikolasgrizli
Nikolasgrizli / html
Created September 23, 2019 14:14
swiper slider 3d
<div class="swiper-container pagination-bottom" data-show-items="2" data-effect="coverflow" data-centered-slider="true" data-nospace="true" data-stretch="80" data-depth="250">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/img/pages/edu-screen-1.png" alt="Рабочий стол">
</div>
<div class="swiper-slide">
<img src="/img/pages/edu-screen-2.png" alt="Список классов">
</div>
<div class="swiper-slide">
@Nikolasgrizli
Nikolasgrizli / .js
Created September 23, 2019 07:27
Reading progress
$(document).ready(function () {
// Start fitVids
var $postContent = $(".post-full-content");
$postContent.fitVids();
// End fitVids
var progressBar = document.querySelector('#reading-progress');
var header = document.querySelector('.floating-header');
var title = document.querySelector('.post-full-title');
@Nikolasgrizli
Nikolasgrizli / html
Created September 3, 2019 10:02
Youtube Iframe lazy load
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>
@Nikolasgrizli
Nikolasgrizli / js
Created August 27, 2019 23:51
Get exact value property (height example)
// if value in html
var height = $("element").get(0).style.height;
// if value in css
var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for(var i=0; i < rules.length; i++) {
var rule = rules[i];
if (rule.selectorText.toLowerCase() == "element") {
var width = rule.style.getPropertyValue("height");
}
@Nikolasgrizli
Nikolasgrizli / less
Created August 17, 2019 22:54
Less fx allows you to make a smooth transition in size any properties relative to the width of the screen (if you're using Less 1.6 or later)
.prop-size-fx(@min-size: 1, @max-size: 2, @min-width: 768, @max-width: 1024, @property: font-size){
@{property} : @max-size * 1px;
@{property} : ~"calc(@{min-size}px + (@{max-size} - @{min-size}) * ((100vw - @{min-width}px) / (@{max-width} - @{min-width})))";
@media screen and (max-width: (@min-width + 1px)) {
@{property} : @min-size * 1px;
}
@media screen and (min-width: (@max-width + 1px)) {
@{property} : @max-size * 1px;
}
}
@Nikolasgrizli
Nikolasgrizli / less
Created August 17, 2019 21:46
Less fx font-size depends on window screen width
.font-size-fx(@min-size: 15, @max-size: 25, @min-width: 768, @max-width: 1024){
font-size: @max-size * 1px;
font-size: ~"calc(@{min-size}px + (@{max-size} - @{min-size}) * ((100vw - @{min-width}px) / (@{max-width} - @{min-width})))";
@media screen and (max-width: (@min-width + 1px)) {
font-size: @min-size * 1px;
}
@media screen and (min-width: (@max-width + 1px)) {
font-size: @max-size * 1px;
}
}
@Nikolasgrizli
Nikolasgrizli / js
Created March 19, 2019 15:48
разделение суммы на тройки пробелами
function number_format(str) {
return str.replace(/(\s)+/g, '').replace(/(\d{1,3})(?=(?:\d{3})+$)/g, '$1 ');
}
@Nikolasgrizli
Nikolasgrizli / js
Created February 16, 2019 17:47
iphone menu closed problem
$(document).ready(function () {
var $ua = navigator.userAgent;
var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstart" : "click";
$(document).on($event, '.mob-menu-overlay', function (e) {
e.stopPropagation();
$(document).find('.side-mob-menu').removeClass('open');
if ($ua.match(/(iPod|iPhone|iPad)/i)) {
console.log('iPod|iPhone|iPad click');
}
@Nikolasgrizli
Nikolasgrizli / js
Created December 5, 2018 19:45
resize
var aForResize;
$(window).resize(function() {
clearTimeout(aForResize);
aForResize = setTimeout(function() {
// some code
},300);
});