scrawlon’s gists

scrawlon / swiper-js-fullscreen-image-slider-complete.html

Created January 12, 2019 01:49

Swiper JS fullscreen image slider (complete)

	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css'>
	<style>
	.swiper-container {
	height: 300px;
	}
	.swiper-container.fullscreen {
	height: 100vh;

scrawlon / swiper-js-fullscreen-image-slider-css.html

Last active May 1, 2019 16:23

Swiper JS fullscreen image slider CSS

	<style>
	.swiper-container {
	height: 300px;
	}
	.swiper-container.fullscreen {
	height: 100vh;
	}
	.swiper-slide {
	background: lightgray;
	text-align: center;

scrawlon / swiper-js-fullscreen-image-slider-javascript.html

Last active May 1, 2019 16:23

Swiper JS fullscreen image slider JavaScript

	<script>
	window.onload = function() {
	var swiper = new Swiper('.swiper-container', {
	loop: true,
	navigation: {
	nextEl: '.swiper-button-next',
	prevEl: '.swiper-button-prev',
	},
	pagination: {
	el: '.swiper-pagination'

scrawlon / swiper-js-image-slides-css.html

Last active May 1, 2019 16:22

Swiper JS image slides CSS

	<style>
	.swiper-container {
	height: 300px;
	}
	.swiper-slide {
	background: lightgray;
	text-align: center;
	/* Center slide text vertically */
	display: flex;
	justify-content: center;

scrawlon / swiper-js-image-slides-html.html

Last active May 1, 2019 16:22

Swiper JS image slides HTML

	<!-- Slides -->
	<div class='swiper-slide'>
	Slide 1
	<img src='https://farm5.staticflickr.com/4906/31468331457_2b30dda299_z.jpg' alt='Hubble’s Cosmic Holiday Wreath'>
	<figcaption>
	<a href='https://www.flickr.com/photos/gsfc/31468331457/'>"Hubble’s Cosmic Holiday Wreath" © NASA </a><br />
	<a href='https://creativecommons.org/licenses/by/2.0/' target='_blank'>Creative Commons</a>
	</figcaption>
	</div>
	<div class='swiper-slide'>

scrawlon / swiper-js-multi-slide-example.html

Last active January 7, 2019 02:33

Swiper JS multi-slide example

	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css'>
	<style>
	.swiper-container {
	height: 300px;
	}
	.swiper-slide {
	background: lightgray;

scrawlon / mirror.html

Last active October 1, 2015 03:17

code from the blog post: http://scrawlon.com/2015/07/26/control-your-webcam-with-html-and-javascript/

	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<meta charset="UTF-8">
	</head>
	<body>

	<video autoplay></video>

	<script src="mirror.js"></script>

scrawlon / custom_options_divi.php

Last active November 18, 2021 01:07

code from blog post: http://scrawlon.com/2015/09/21/add-more-social-media-options-to-wordpress-divi-theme/

	<?php

	require_once( get_template_directory() . esc_attr( "/options_divi.php" ) );
	global $options;
	$epanel_key = "name";
	$epanel_value = "Show RSS Icon";

	$custom_options = array (
	array( "name" => esc_html__( "Show GitHub Icon", $themename ),
	"id" => $shortname."_show_github_icon",

scrawlon / mcgrath_websockets

Created July 9, 2014 20:05

The following code accepts data from a WebSocket connection and adds a clickable Twitter-style "x number of new updates" message to the DOM. If clicked, the updates are added to the timeline.

	$(function() {
	var updates = {
	'total': 0,
	'new': []
	}
	var faye = new Faye.Client('http://localhost:9292/faye');

	faye.subscribe("/" + fayeChannel + "/new", function(data) {
	var update_valid = checkDataValidity(data);
	if (update_valid === true) {

Scrawlon scrawlon