David Browne wplit

💭

I may be slow to respond.

Sydney WordPress developer. I partner with designers to create cool things with WordPress. I also build plugins for Oxygen, which you can find here.

wplit / code-block.js

Last active January 21, 2021 10:31

pause autoplay after clicking prev/next for a time, then resume play

	jQuery(document).ready(function($) {

	let $carousel = $('#%%ELEMENT_ID%%').find($('#%%ELEMENT_ID%%').children().data('carousel'));

	$('#%%ELEMENT_ID%%').find('.oxy-carousel-builder_icon').on( 'click', pauseUnpause );

	function pauseUnpause() {

	$carousel.flickity('pausePlayer');
	setTimeout(() => $carousel.flickity('unpausePlayer'), 1000); // resume after 1000ms

wplit / style.css

Last active February 3, 2021 10:19

amanda burger sync

	.oxy-burger-trigger .hamburger--slider.is-active .hamburger-inner {
	transform: none;
	}

	.oxy-burger-trigger .hamburger--slider.is-active .hamburger-inner::before {
	transform: none;
	opacity: 1;
	}

	.oxy-burger-trigger .hamburger--slider.is-active .hamburger-inner::after {

wplit / code-block.js

Last active February 5, 2021 23:09

isotope code from Elijah's code, ammended to ensure filters work with the Infinite Scroller component.

	jQuery(document).ready( function() {

	var $grid = jQuery('.grid').isotope({
	itemSelector: '.grid-item',
	layoutMode: 'fitRows',
	getSortData: {
	title: '.title',
	date: '.date'
	}
	})

wplit / j.js

Created February 24, 2021 22:39

force carousel autoplay to stop on last cell

	jQuery(document).ready(function($) {

	let $carousel = $('#%%ELEMENT_ID%%').find($('#%%ELEMENT_ID%%').children().data('carousel'));
	let numberCells = $('#%%ELEMENT_ID%%').find($('#%%ELEMENT_ID%%').children().data('cell')).length;

	$carousel.on( 'settle.flickity', function( event, index ) {

	if ((index + 1) == numberCells) {
	$carousel.flickity('pausePlayer');
	}

wplit / social-share.js

Last active February 26, 2021 02:11

Make social share links open up new window 600x600 (in center of screen). Add to social share > advanced > javascript

wplit / carousel.js

Created February 28, 2021 04:37

Add class to carousel builder if not enough cells. Add to carousel builder > advanced > javascript

	jQuery(document).ready(function($) {

	let minimumCells = 2; /* Change to minimal cells needed for navigation */

	let $carousel = $('#%%ELEMENT_ID%%').find($('#%%ELEMENT_ID%%').children().data('carousel'));
	let numberCells = $('#%%ELEMENT_ID%%').find($('#%%ELEMENT_ID%%').children().data('cell')).length;

	$carousel.on( 'ready.flickity', function() {

	if (minimumCells > numberCells) {

wplit / carousel.css

Created February 28, 2021 04:39

styles to hide nav and dots in carousel builder if not enough cells

	.oxy-carousel-builder.hide-carousel-nav .flickity-page-dots,
	.oxy-carousel-builder.hide-carousel-nav .oxy-carousel-builder_icon {
	visibility: hidden;
	}

wplit / style.css

Created March 1, 2021 03:01

Add numbers to page dots in carousel builder

	.oxy-carousel-builder .flickity-page-dots .dot {
	counter-increment: carousel-cell;
	background: transparent;
	left: 0;
	margin: 0;
	opacity: 1;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;

wplit / code-block.js

Last active May 21, 2022 10:14

trigger offcanvas opening when item added to cart (add to code block and just change the class or ID to match your offcanvas)

	(function($){

	let offCanvas = '.my-offcanvas'; // Change to your offcanvas selector (class or ID)

	/* When item is added to cart */
	$( document.body ).on( 'added_to_cart', function(){

	/* Toggle the classes to open the offcanvas */
	$('html,body').addClass('off-canvas-toggled');
	$(offCanvas).addClass('oxy-off-canvas-toggled');

wplit / code-block.js

Last active March 2, 2021 10:47

allow burger trigger to be toggle for modal (add to code block) remember to remove the trigger from the modal settings

	jQuery(document).ready(function($) {

	let clickTrigger = '.trigger'; /* The class you give the burger trigger */
	let modalSelector = '.my-modal'; /* The class you give the modal */

	function showModal(modal) {
	var $modal = jQuery(modal);
	$modal.addClass("live");
	$modal.css("display", "flex");
	$modal.hide();

	jQuery('#%%ELEMENT_ID%% .oxy-share-button').on('click', function (e) {

	let socialWidth = 600;
	let socialHeight = 600;

	let leftPosition = (window.screen.width / 2) - ((socialWidth / 2) + 10);
	let topPosition = (window.screen.height / 2) - ((socialHeight / 2) + 50);
	let windowFeatures = "width="+ socialWidth +",height="+ socialHeight +",scrollbars=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,location=no,directories=no";

	e.preventDefault();