Skip to content

Instantly share code, notes, and snippets.

Avatar

Necat Bolpaça anova

View GitHub Profile
@anova
anova / createObserver.js
Created Nov 16, 2022
creates an Intersection Observer.
View createObserver.js
/** @return IntersectionObserver */
function createObserver(p_threshold) {
return new IntersectionObserver(
(entries) => {
entries.forEach((/** @type IntersectionObserverEntry */ entry) => {
if (entry.isIntersecting) {
const eventIntersecting = new CustomEvent("intersecting");
entry.target.dispatchEvent(eventIntersecting);
return;
}
@anova
anova / intersection-observer.js
Last active Oct 7, 2022
Trigger something when marked element's half percent is visible in viewport.
View intersection-observer.js
// define the observer
const observer = new IntersectionObserver((entries) => {
entries.forEach((/** @type IntersectionObserverEntry */ entry) => {
if (entry.isIntersecting) {
const eventIntersecting = new CustomEvent("intersecting");
entry.target.dispatchEvent(eventIntersecting);
return;
}
const eventNotIntersecting = new CustomEvent("not-intersecting");
entry.target.dispatchEvent(eventNotIntersecting);
@anova
anova / fetch-send-post-data.js
Created Sep 30, 2022
Send POST form data, serialized by FormData with fetch
View fetch-send-post-data.js
const the_form = document.getElementById('the_form');
const formData = new FormData(the_form);
fetch('the-handler.php',{
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('data is:', data);
});
View instagram-gradient.html
<style>
.instagram-link {
display: block;
background-image: linear-gradient(49.12deg, #fd5 6.61%, #FF543E 50.05%, #C837AB 93.49%);
border-radius: 50%;
width: 45px;
height: 45px;
}
</style>
@anova
anova / gtm-onscroll.js
Created Jul 4, 2022
A scroll trigger for Google Tag Manager
View gtm-onscroll.js
function documentScrolled() {
console.log('document is scrolled');
document.removeEventListener('scroll', documentScrolled);
}
document.addEventListener('scroll', documentScrolled);
View exclude-password-protected-pages.php
<?php
// get_pages
$pages = get_pages( [
'child_of' => $id,
//'sort_column' => 'rand',
'sort_column' => 'menu_order',
'post_status' => 'publish,draft',
] );
// WP_Query
@anova
anova / breakpoint-event-handler.js
Created Feb 23, 2022
Trigger events by breakpoint change.
View breakpoint-event-handler.js
const breakpoint_lg = window.matchMedia('(min-width: 992px)');
breakpoint_lg.addEventListener('change', () => {
if(breakpoint_lg.matches) {
console.log('lg');
return;
}
console.log('not lg');
});
View u-font-size.css
/*
Usage:
<span class="u-font-size" style="--min: 15px; --max: 50px;">Example font size</span>
*/
.u-font-size[style*="--min"][style*="--max"]{
font-size: calc(calc(var(--min) * 1px) + (var(--max) - var(--min)) * ((100vw - 300px) / (1600 - 300)));
}
@anova
anova / u-spacer.scss
Created Dec 24, 2021
Spacer utility for vertical space
View u-spacer.scss
/*
Usage:
<div class="u-spacer" style="--xs: 10px; --sm: 15px; --md: 20px; --lg: 25px; --xl: 40px; --xxl: 50px;"></div>
Note:
xs, sm, md, lg, xl, xxl breakpoints taken from bootstrap
https://getbootstrap.com/docs/5.1/layout/breakpoints/#available-breakpoints
*/
.u-spacer {
&[style*="--xs"] {
@anova
anova / color-opacity.css
Last active Nov 30, 2021
How do I apply opacity to a CSS color variable? (Stackoverflow answer)
View color-opacity.css
:root {
--color-cultured-white: 242, 244, 247;
}
.element {
/*
How do I apply opacity to a CSS color variable?
https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable
https://stackoverflow.com/a/41265350 - BoltClock's answer
*/