Skip to content

Instantly share code, notes, and snippets.

Avatar

Jonas Goslow jgoslow

View GitHub Profile
@jgoslow
jgoslow / element-is-visible
Created Aug 13, 2022
Element In View JS Helper Functions
View element-is-visible
/**
* Check if Element is in View
*/
function elementIsVisible(el, offset) {
const rect = el.getBoundingClientRect();
return (
rect.top < window.innerHeight && rect.bottom - offset >= 0
);
}
@jgoslow
jgoslow / copy-Input-value-to-clipboard
Created Aug 13, 2022
Clipboard JS Helper Functions
View copy-Input-value-to-clipboard
function copyInputValueToClipboard(input) {
input.select();
document.execCommand("copy");
console.log(`${input.value} copied to clipboard!`)
}
@jgoslow
jgoslow / get-ancestor-by-attribute.js
Created Aug 13, 2022
Ancestor Selection JS Helper Functions
View get-ancestor-by-attribute.js
function getAncestorByAttribute(elem, attribute) {
if (elem.parentElement === null) {
return false;
} else if (elem.hasAttribute(attribute)) {
return elem;
} else {
return getAncestorByAttribute(elem.parentElement, attribute);
}
}
@jgoslow
jgoslow / elem-unwrap.js
Created Aug 13, 2022
Unwrap an element from it's container
View elem-unwrap.js
/**
* Unwrap element
*/
function unwrap(wrapper) {
// place childNodes in document fragment
var docFrag = document.createDocumentFragment();
while (wrapper.firstChild) {
var child = wrapper.removeChild(wrapper.firstChild);
docFrag.appendChild(child);
}
@jgoslow
jgoslow / throttle.js
Created Aug 13, 2022
Throttle and Debounce JS Functions
View throttle.js
/**
* Debounce Function
* to reduce # of events fired
* example: Scroll listeners
*/
function debounce(callback, interval) {
let debounceTimeoutId;
return function(...args) {
clearTimeout(debounceTimeoutId);
View terminal-cors-test.js
function corsTest(url) {
console.log("cors-test");
var http = new XMLHttpRequest();
http.open('GET', url, true);
http.onreadystatechange = function() {//Call a function when the state changes.
console.log(http.responseText)
}
@jgoslow
jgoslow / scrollbar.css
Created May 2, 2020
How to style scrollbars in CSS (May 2020)
View scrollbar.css
/* Coursey of https://alligator.io/css/css-scrollbars */
/* The emerging W3C standard
that is currently Firefox-only */
* {
scrollbar-width: thin;
scrollbar-color: blue orange;
}
/* Works on Chrome/Edge/Safari */
@jgoslow
jgoslow / custom-excerpt-length.php
Last active Aug 13, 2022
Wordpress Excerpt PHP Functions
View custom-excerpt-length.php
/**
* Filter the except length to 20 words.
*
* @param int $length Excerpt length.
* @return int (Maybe) modified excerpt length.
*/
function wpdocs_custom_excerpt_length( $length ) {
return 20;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );
@jgoslow
jgoslow / lyra-modal-mixin.scss
Last active Aug 13, 2022
Lyra Modal SCSS Mixin
View lyra-modal-mixin.scss
//Modal styles - mostly based on Bootstrap
@mixin modal() {
position: fixed;
pointer-events: none;
opacity: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
@jgoslow
jgoslow / Limit String Length - end of word
Last active Sep 29, 2018
Limits the length of a string but ensures you end on a word
View Limit String Length - end of word
// javascript word cut
function cut(n) {
return function textCutter(i, text) {
var short = text.substr(0, n);
if (/^\S/.test(text.substr(n)))
return short.replace(/\s+\S*$/, "");
return short;
};
}