Harold AO haroldao

🎯

Design + Dev

| Creative Technologist (Dev + Design) | @Shopify Theme Partner | @awwwards Young Jury | Always Be Creative

haroldao / test-guest-login.txt

Last active October 2, 2024 14:43

Shopify theme dev test customer guest login

haroldao / external-link.liquid

Created September 11, 2022 01:45

Shopify liquid - Know if a link is an external link

{% if XX contains 'http://' or XX contains 'https://' %}It's an external link{% endif %}

haroldao / is_touch_device.js

Created November 9, 2021 12:32

Check if is touch device

	function is_touch_device() {
	return 'ontouchstart' in window // works on most browsers
	\|\| 'onmsgesturechange' in window; // works on ie10
	};

haroldao / real-viewport.js

Created September 9, 2021 11:05

Real Viewport (No more issues with the 100vh in mobile browsers)

	/* Vh Calc */
	// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
	let vh = window.innerHeight * 0.01;
	// Then we set the value in the --vh custom property to the root of the document
	document.documentElement.style.setProperty('--vh', `${vh}px`);

	window.setTimeout(() => {
	let vh = window.innerHeight * 0.01;
	document.documentElement.style.setProperty('--vh', `${vh}px`);
	}, 1000);

haroldao / functions.scss

Created July 9, 2021 16:02

px to em/rem | SCSS

	// Source: https://css-tricks.com/snippets/sass/px-to-em-functions/
	@function rem($pixels, $context: 16) {
	@return (math.div($pixels, $context)) * 1rem;
	}

haroldao / check-isMobile.js

Created May 29, 2021 14:03

	// check device
	let isMobile = false;

	if (/Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry\|IEMobile\|Opera Mini/i.test(navigator.userAgent)) {
	isMobile = true;
	document.body.classList.add('is-mobile');
	}

haroldao / faq-accordion.markdown

Created April 21, 2021 20:04

FAQ Accordion

haroldao / anti-flicker

Created April 21, 2021 02:19

Anti Flicker // https://support.google.com/optimize/answer/7100284

	<HTML>
	<HEAD>
	<!-- anti-flicker snippet (recommended) -->
	<style>.async-hide { opacity: 0 !important} </style>
	<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
	h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
	(a[n]=a[n]\|\|[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
	})(window,document.documentElement,'async-hide','dataLayer',4000,
	{'CONTAINER_ID':true});</script>

haroldao / checkBrowserVersion.js

Created April 4, 2021 15:34

	function checkBrowserVersion() {
	var objappVersion = navigator.appVersion;
	var objAgent = navigator.userAgent;
	var objbrowserName = navigator.appName;
	var objfullVersion = ''+parseFloat(navigator.appVersion);
	var objBrMajorVersion = parseInt(navigator.appVersion,10);
	var objOffsetName,objOffsetVersion,ix;

	// In Chrome
	if ((objOffsetVersion=objAgent.indexOf("Chrome"))!=-1) {

haroldao / confetti.js

Created February 18, 2021 21:07