willbroderick’s gists

willbroderick / recursive_nav_helper.liquid

Last active July 4, 2021 05:37

Generic recursive nav markup generator for Shopify, works with non-latin alphabet and to any depth.

	{% comment %}
	Usage: {% include 'recursive-navigation-helper' with 'main-menu' %}
	{% endcomment %}

	{% comment %} Sanity check to prevent infinite recursion {% endcomment %}
	{% assign sanity = sanity \| plus: 1 %}

	{% if sanity < 10000 %}
	{% if linklists[recursive-navigation-helper].links.size > 0 %}

willbroderick / remaining_chars.html

Last active December 28, 2015 20:49

Show the number of remaining characters beside any text input (requires jQuery)

	<script>
	$(function(){
	$('textarea[maxlength], input[maxlength]').bind('keyup change paste', function(){
	var maxlength = parseInt($(this).attr('maxlength'));
	var val = $(this).val();
	var currLen = val.length;
	var newLines = val.match(/(\r\n\|\n\|\r)/g);
	if(newLines != null) {
	currLen += newLines.length;
	}

willbroderick / scale_text_with_container.html

Last active December 28, 2015 20:49

Scale size of text up/down with % to sit nicely inside parent container. Great for live-type over images/slides. - CURRENTLY DEPENDENT ON A BASE SIZE FROM: {{ settings.adv_page_width }} - how should this be remedied? What's the best way to get a 'default' size? Maybe just a px val in data attribute?

	<script>
	$(function(){
	//Text that scales up/down based on container width
	function resizeScalingTextFromColumn() {
	$('.scaled-text').each(function(){
	var $base = $(this).closest('.scaled-text-base');
	var scale = $base.width() / {{ settings.adv_page_width }};
	$(this).css('font-size', (scale * 100) + '%');
	});
	}

willbroderick / willFillParent.js

Last active January 10, 2017 10:30

Set an image or iframe to fill its parent (like a desktop wallpaper)

	/* Take an image, or any other element with height/width attrs (e.g. iframe) and stretch it to fill parent
	* MIT license
	*
	* Dependencies:
	* imagesLoaded: https://github.com/desandro/imagesloaded
	*
	* Usage examples:
	* $('.fillcontainer img.main').willFillParent({ closest: '.fillcontainer', windowEvent: 'debouncedresize load' });
	* $('.video-bg > .video').willFillParent({ windowEvent: 'resize' });
	*

willbroderick / gist:7806634

Last active December 30, 2015 08:59

Hide orphaned elements - the last unfull row of a grid, call on parent with child selector

	//Ignore if you already have it:
	$.fn.reverse = [].reverse;

	//Hide orphaned thumbs, call on parent with child selector
	$.fn.hideOrphans = function(selector, totalCountSelector){
	var selector = selector;
	$(this).each(function(){
	var $children = $(this).find(selector);
	$children.filter('.hidden-orphan').show().removeClass('hidden-orphan');
	if($(this).hasClass('show-orphans')) {

willbroderick / bumpMeDown.js

Last active October 24, 2017 07:58

Emulate position:fixed on a div to keep it locked, vertically, inside the browser viewport. Designed for tiny sidebar-style content.Add class 'bump-me-down' to any floated div & it'll add padding to the top to make it fit.

	/// Bump-down a div to fit (position:fixed style) inside a browser
	$(function(){
	if($('.bump-me-down').length > 0) {
	$(window).on('scroll process-bump-me-downs resize', function(){
	var scrollTop = $(window).scrollTop();
	var defaultPad = 20;
	$('.bump-me-down').each(function(){
	var thisOffset = $(this).offset().top;
	if($(this).data('bumpOffset')) {
	thisOffset -= $(this).data('bumpOffset');

willbroderick / split_images_from_content.liquid

Last active December 31, 2015 22:29

Liquid code to separate X number of images from html content - for displaying these in separate areas.

	{% comment %}
	Use:
	{% include 'split_images_from_content' with collection.description %}
	<div class="header">{{ split_images }}</div>
	<div class="description">{{ split_content }}</div>
	{% endcomment %}

	{% assign num_to_split = 1 %}
	{% assign split_content = split_images_from_content %}
	{% assign split_images = '' %}

willbroderick / scrollinternallinks.js

Last active December 14, 2015 16:58

Javascript to scroll to in-page # hrefs, and permit external links

	/// Scroll to in-page links
	$(document).on('click', 'a[href^="#"]:not([href="#"]), a[href^="'+location.pathname+'#"]', function(e){
	var $target = $('#'+$(this).attr('href').split('#')[1]).first();
	if($target.length == 1) {
	$('html:not(:animated),body:not(:animated)').animate({
	scrollTop: $target.offset().top
	}, 500 );
	e.preventDefault();
	}
	});

willbroderick / minicomp.js

Created March 31, 2014 12:33

For compressing strings, just a little bit, when you already know good keywords to use for the compression. I use it to trim cookies.

	var compList = ['products', 'collections', '_thumb.jpg', '.myshopify.com/', '//cdn.shopify.com/s/files/', 'http://', 'shopify.com'];

	function miniComp(str) {
	for(var i=0; i<compList.length; i++) {
	str = str.split(compList[i]).join('#['+i+']'); //Split/join vs regex speed = surprising
	}
	return str;
	}

	function miniDecomp(str) {

willbroderick / jsonIsEqual

Created April 16, 2014 10:43

Check if two 1-level-deep json arrays contain the same values

	// A shallow scan of a JSON object to test for equality
	function getNumKeysInJsonObject(obj) {
	var i = 0;
	for (var x in obj)
	if (obj.hasOwnProperty(x)) i++;
	return i;
	}
	function jsonIsEqual(obj1, obj2) {
	var isEqual = true; //Equal until proven otherwise
	if(typeof obj1 != 'undefined' && typeof obj2 != 'undefined') {

Will Broderick willbroderick