Skip to content

Instantly share code, notes, and snippets.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>AR Quick Look Example</title>
<script>
/* from Apple's AR Quick Look Gallery */
(function () {
var isRelAR = false;
var a = document.createElement('a');
if (a.relList.supports('ar')) {
return "<img width='$width' height='$height' src='https://api.mapbox.com/styles/v1/mapbox/streets-v10/static/$lnglat,9.67,0.00,0.00/{$width}x{$height}@2x?access_token=$mapboxkey'>";
@FellowshipAgency
FellowshipAgency / IntersectionObserver.js
Created October 30, 2018 15:32
IntersectionObserver
// IntersectionObserver
// Used with Rubious plugin and lazy load images
var images = document.querySelectorAll('[data-lazy-src]');
var config = {
rootMargin: '0px 0px 400px 0px',
threshold: 0 };
var loaded = 0;
@FellowshipAgency
FellowshipAgency / Intersection Observer.txt
Created October 17, 2018 12:58
Intersection Observer
// Include intersection-observer-polyfill.js for older browsers
// https://github.com/w3c/IntersectionObserver/tree/master/polyfill
// JS:
// Get scroll direction
var lastScrollTop = 0, delta = 5;
var lastScrollDirection = null;
$(window).scroll(function(event){
@FellowshipAgency
FellowshipAgency / Scaling website.scss
Last active October 16, 2018 15:34
Scaling website
// Need to add "frontend" class to the site - this is to prevent this stuff happening on the WYSIWYG editor
html.frontend {
@media only screen and (min-width: 1920px) { // Correct size for large screens
font-size: 62.5%;
}
@media only screen and (max-width: 1289px) { // Slightly larger size for small screens
font-size: 0.6vw;
}
@FellowshipAgency
FellowshipAgency / disable-css-grid.scss
Created September 6, 2018 11:21
Easily disable CSS Grid
// To easily view how a site looks when CSS Grid is not available, use this in the SASS file.
// First you need this variable:
$cssgrid: "(grid-template-rows:initial)";
// Then you can uncomment the below to re-declare the variable and so disable the @supports for every browser:
// $cssgrid: "(display:no-css-grid-support)";
// Wrap every usage of CSS Grid in this:
@supports(#{$cssgrid}) {
@FellowshipAgency
FellowshipAgency / php-block.js
Created August 3, 2018 13:43 — forked from pento/php-block.js
Converting a shortcode to a block
// License: GPLv2+
var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
InspectorControls = wp.editor.InspectorControls;
/*
* Here's where we register the block in JavaScript.
@FellowshipAgency
FellowshipAgency / Holiday Messages
Created June 14, 2017 09:51
Holiday Messages for Rubious plugin
<?php
/* ==========================================================================
Holiday Message Hooks
============================================================================= */
if(function_exists('holiday_messages')) {
// PHP:
add_filter( 'gform_file_upload_markup', 'change_upload_markup', 10, 4 );
function change_upload_markup( $file_upload_markup, $file_info, $form_id, $field_id ) {
return '<strong>' . esc_html( $file_info['uploaded_filename'] ) . "</strong > <img class='gform_delete' src='" . GFCommon::get_base_url() . "/images/delete.png' onclick='gformDeleteUploadedFile({$form_id}, {$id}, this);' />";
}
// JS:
<?php
/**
* Filters default image arguments for TSF.
*
* @param array $defaults The image defaults.
* @param array $args The image callback arguments.
*/
add_filter( 'the_seo_framework_og_image_args', function( $defaults, $args = array() ) {