w3bninja’s gists

adamculpepper / masonry-layout.css

Last active June 3, 2019 16:45

Masonry Layout - CSS only

	/* Masonry */
	.masonry {column-count:1; column-gap:1.5em; margin:1.5em auto;}
	.masonry .item {display:inline-block; margin:0 0 1em; width:100%;}
	.masonry .item iframe {max-width:100%;}

	/* Large (lg) and up */
	@media (min-width:992px) {
	.masonry {column-count:2;}
	}

adamculpepper / css-centering.css

Created January 25, 2018 17:09

CSS Helper Classes for Centering Things in CSS

	.center-margin {margin:0 auto;}
	.center-flex {display:flex; align-items:center; justify-content:center;}
	.center-flex-hor {display:flex; justify-content:center;}
	.center-flex-vert {display:flex; align-items:center;}
	.center-transform {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
	.center-transform-hor {position:absolute; left:50%; transform:translateX(-50%);}
	.center-transform-vert {position:absolute; top:50%; transform:translateY(-50%);}

iamravenous / jquery.smooth-scroll-pageload.js

Last active October 22, 2024 17:11

Smooth scrolling on page load if URL have a hash

	/*
	* Smooth Scroll on Pageload
	* Smooth scrolling on page load if URL have a hash
	* Author: Franco Moya - @iamravenous
	*/

	if (window.location.hash) {
	var hash = window.location.hash;

	if ($(hash).length) {

morena / Mustache usage example

Last active May 6, 2021 17:26

Mustache usage example

	I have put together a this gist with my example code of usage of Mustache, I found the examples online a bit simplistic (for example both template and data were passed to Mustache.render inline) so maybe somebody else will be able to reuse it.
	It also is the code for my article "2 things I did not understand about Mustache.js" http://morenafiore.com/2-things-i-did…about-mustache/

omurphy27 / Jquery Smooth Scrolling for Bootstrap Scroll Spy Nav.js

Created January 15, 2015 22:30

Jquery Smooth Scrolling for Bootstrap Scroll Spy Nav.js

	// simple smooth scrolling for bootstrap scroll spy nav
	// credit http://stackoverflow.com/questions/14804941/how-to-add-smooth-scrolling-to-bootstraps-scroll-spy-function

	$(".navbar-nav li a[href^='#']").on('click', function(e) {
	// prevent default anchor click behavior
	e.preventDefault();

	// store hash
	var hash = this.hash;

adamculpepper / sticky-element.js

Created January 14, 2015 16:22

Sticky Elements (jQuery required)

	// demo: http://jsfiddle.net/adamculpepper/mvcjbwbv

	$(window).scroll(makeSticky).trigger("scroll");

	$(window).load(function () {
	$(".sticky-element").each(function () {
	var el = $(this);
	if (!el.attr("data-offset-top")) {
	el.attr("data-offset-top", el.offset().top);
	el.attr("data-offset-left", el.offset().left);

adamculpepper / center-vertically.js

Last active August 29, 2015 14:13

Vertically Centering Elements with offset (jQuery)

	/*
	usage:
	call function: centerThings();
	add class: "center-vert"
	add offset (optional): data-center-offset="-3"
	example: <div class="center-vert" data-center-offset="-3">text</div>
	demo: http://jsfiddle.net/adamculpepper/kns0osky
	*/

	function centerThings() {

sareiodata / empty-wp-plugin.php

Created July 2, 2014 08:45

Empty WordPress plugin

	<?php
	/**
	* Plugin Name: Name Of The Plugin
	* Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
	* Description: A brief description of the Plugin.
	* Version: The Plugin's Version Number, e.g.: 1.0
	* Author: Name Of The Plugin Author
	* Author URI: http://URI_Of_The_Plugin_Author
	* License: A "Slug" license name e.g. GPL2
	*/

pepelsbey / duplicates.html

Last active June 28, 2019 12:15

Removing duplicates from Liquid array

	{% assign array = 'c\|c\|b\|b\|a\|a' \| split: '\|' %}
	{% assign tags = array[1] %}

	{% for item in array %}
	{% unless tags contains item %}
	{% capture tags %}{{ tags }}\|{{ item }}{% endcapture %}
	{% endunless %}
	{% endfor %}

	{{ tags \| split: '\|' \| sort \| join: ', ' }}

builtbylane / add-class-incrementally.js

Last active October 14, 2019 19:45

jQuery: add class to each item incrementally... good for fading in blocks

	$(function() {
	'use strict';
	// deps... jquery
	var $fade_this_in = $('.something-with-opacity-0');

	function laneAddClassDelay(jquerobj, theclass, theinterval) {
	setTimeout(function() {
	jquerobj.addClass(theclass);
	}, theinterval);
	}

Aaron w3bninja