Skip to content

Instantly share code, notes, and snippets.

View Lysindr's full-sized avatar

Alexey Lysindr

  • Ukraine
View GitHub Profile
@Lysindr
Lysindr / overflow-border-radius-fix.css
Created October 15, 2019 10:07
Fix for overflow: hidden with border-radius
.products-slider {
position: absolute;
top: 50%;
left: 50%;
width: 672px;
height: 672px;
border-radius: 50%;
overflow: hidden;
@Lysindr
Lysindr / main-slider.liquid
Created May 3, 2019 08:58
Slick slider with Youtube video, Vimeo video, Image. Autoplay/Pause on slide change. For example on Shopify Store (liquid tempaltes files)
<section class="main-slider">
<div id="hero-slider">
{% for block in section.blocks %}
{% case block.type %}
{% when 'image_slide' %}
<div>
<div class="main-slider__slide main-slider__slide--image" {% if block.settings.image != blank %} style="background-image: url({{ block.settings.image | img_url: "2000x" }})" {% endif %}>
<div class="main-slider__content">
{% if block.settings.slide_title != blank %}
@Lysindr
Lysindr / collection.liquid
Last active September 29, 2023 14:59
Shopify AJAX filter collection page with TAGS
<div class="collection__main">
<!-- COLLECTION SIDEBAR -->
{%- capture categories -%}
{%- for tag in collections[collection.handle].tags -%}
{%- if tag contains 'categories' -%}
{%- assign tag_patterns = tag | split: '_' -%}
<li class="collection-sidebar__filter-item main-filter" data-tag="{{ tag | handle }}">{{ tag_patterns[1] }}</li>
{%- endif -%}
{%- endfor -%}
@Lysindr
Lysindr / shopify-randon-min-max.liquid
Last active June 18, 2020 07:15
Shopify Liquid RANDOM MIN MAX code example
{% comment %}
!!! IMPORTANT !!! - the date variables CACHED ON LIVE THEME and DON'T CHANGE AFTER PAGE RELOAD.
{% endcomment %}
{% assign min = 0 %}
{% assign max = try_collection.all_products_count %}
{% assign diff = max | minus: min %}
{% assign timestamp = "today" | date: "%s" | plus: 0 %}
{% assign randomNumber = timestamp | modulo: diff | plus: min %}
.video-html {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
transform: translateX(-50%) translateY(-50%);
@Lysindr
Lysindr / disable-body-scroll.js
Created November 16, 2018 15:45
Disable body scroll (work on Safari, IOS)
// Prevent body scroll (try fixed issue on IOS)
var freezeVp = function(e) {
e.preventDefault();
};
function stopBodyScrolling (bool) {
if (bool === true) {
document.body.addEventListener("touchmove", freezeVp, false);
console.log(222);
} else {
@Lysindr
Lysindr / validate-input-on-numbers.js
Created November 12, 2018 16:33
Validate Input on numbers
validateInputOnNumberKeyPress($('input[type="number"]'));
function validateInputOnNumberKeyPress(input) {
input.keypress(function (e) {
if (e.which != 8 && e.which != 0 && e.which != 13 && (e.which < 48 || e.which > 57)) {
return false;
}
});
}
@Lysindr
Lysindr / close-menu.js
Created September 24, 2018 12:46
Close menu click outside
$body.on('click touchstart', function (event) {
if (!$(event.target).closest($menuButton.add($mobileMenu)).length) {
$mobileMenu.removeClass('is-active');
$menuButton.removeClass('menu-button--cross');
$body.removeClass('block-scroll');
} else {
return
}
});
@Lysindr
Lysindr / scroll-top.js
Created August 28, 2018 06:18
Scroll top with stoping animation if user scroll manualy when animation in progress
// Scroll to top
/*
* When you click and animation start, if you scroll with mouse, keybord hotkeys in same moment - animation will stop.
/*
$(".scroll-top-class").click(function(e) {
e.preventDefault();
$('html, body').on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
$('html, body').stop();
});
@Lysindr
Lysindr / disable-scroll.js
Created March 6, 2018 11:39
Disable user SCROLL on animate: scrollTop()
$('html, body').on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function () {
$('html, body').stop();
});
$('html, body').animate({
scrollTop: $('.news-full').offset().top
}, 600, function() {
console.log('popa');
$('html, body').off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
});