Skip to content

Instantly share code, notes, and snippets.

View stephenscaff's full-sized avatar

Stephen Scaff stephenscaff

64 followers · 7 following
View GitHub Profile
@stephenscaff
stephenscaff / fade-title-up-and-down-onscroll.html
Created September 13, 2013 11:51
Fade hero title down + up on scroll with a touch of jquery and CSS keyframes. No keyframe support? Loser. But, no worries, just fade title in and out with animate opacity then.
<!DOCTYPE html>
<head>
<!-- CSS
================================================== -->
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@stephenscaff
stephenscaff / Load page then scroll to anchor
Last active December 22, 2015 23:49
Got a scroll-based site with more than one page, and some page anchor nav links? Nice. But, when clicking a page anchor link from another page, let's load the new page first, slow our damn rolls, then scroll down to the bad boy all sexy like. Throw in a bit of offset for a fixed nav too. Don't forget them easing equations son. They make life wor…
//Scroll to anchor on new page load
$(document).ready(function() {
//This a page anchor link?
if (window.location.hash) {
//Then, slow your roll son, load then scroll
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
//how about a touch of offset, cause I'm rockin' a fixed nav
scrollTop: $(window.location.hash).offset().top-50
@stephenscaff
stephenscaff / Wordpress Cleanups for JS and CSS
Last active December 23, 2015 00:39
Wordpress can get pretty grimey in the head, droppin in all kinds of nasty bits. So, I always include a cleanup.php deal (included within functions.php), with a bunch of functions to tidy up the nav, body class, lang, js and css outputs, et cetera, et cetera. Here's the Mr. Clean treatment for js and css output. Of course, remember to prefix boss.
<?php
/*-----------------------------------------------------------------------------------*/
/* Clean them stylesheet <link> tags
/*-----------------------------------------------------------------------------------*/
function clean_style_tag($input) {
preg_match_all("!<link rel='stylesheet'\s?(id='[^']+')?\s+href='(.*)' type='text/css' media='(.*)' />!", $input, $matches);
// Display media if it's print
$media = $matches[3][0] === 'print' ? ' media="print"' : '';
return '<link rel="stylesheet" href="' . $matches[2][0] . '"' . $media . '>' . "\n";
@stephenscaff
stephenscaff / slow-your-roll.html
Last active December 28, 2015 02:29
Circular loading animation thingy consisting of three rings thing that change colors while spinning in opposite directions. Pure CSS approach using keyframes. No big deal. Here it go right here: http://cdpn.io/KJsjv
<div id="loading_animation">
<div class="outside_ring"></div>
<div class="middle_ring"></div>
<div class="inner_ring"></div>
<span id="animation_message">Slow Your Roll</span>
</div>
@stephenscaff
stephenscaff / Catch that iframe image
Last active December 28, 2015 02:48
Revision of the great catch_that_image Wordpress function (which grabs the first image of a post instead of a featured image) to grab the placeholder image from say a YouTube or Vimeo vid. For output, a little conditional says, "Got a first image? No? Well, got an iframe image? Naws? Well, then just use a default image. After many clients gumpin…
function catch_that_iframe() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<iframe.+src=[\'"]([^\'"]+)[\'"].*><\/iframe>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
return $first_img;
}
@stephenscaff
stephenscaff / Kick Rocks Wp Visual Editor
Last active December 28, 2015 03:09
You spend all this time crafting a great Wordpress site, with a killer blog section chalked full of snazzy css and vertical rhythm badassery. Just to have the client get all clever with that WYSI toolbar, dropping nasty inline styles all over your design's face. Easy solution - tell the WYSI tab to kick rocks. Just plop this filter in functions.…
add_filter ( 'user_can_richedit' , create_function ( '$a' , 'return false;' ) , 50 );
@stephenscaff
stephenscaff / Woo Commerce Call For Price
Last active December 31, 2015 00:59
Filter / function for the Woo Commerce plugin (wordpress). If no price is set, let's output a custom Call For Price (or whatevers). Goes in /woocommerce/woocommerce-hooks.php, but should also work out in your functions.php. Saw that a few peeps created plugins for this idea, but that's kinda retardery, since it's such a simple and tiny solution.
/* Call for price filter */
add_filter('woocommerce_empty_price_html', 'custom_call_for_price');
function custom_call_for_price() {
return 'Call for price: 1-800-your-mum';
}
@stephenscaff
stephenscaff / Random Images on Refresh
Last active October 21, 2023 07:29
Super simple way to randomly load new images on refresh via Jquery and DOM injection. Great for banners.
<!DOCTYPE html>
<head>
<!--Little CSS fade in -->
<style>
.fade-in{
-webkit-animation: fade-in 2s ease;
-moz-animation: fade-in ease-in-out 2s both;
-ms-animation: fade-in ease-in-out 2s both;
-o-animation: fade-in ease-in-out 2s both;
@stephenscaff
stephenscaff / Wordpress Circular Nav for Single Post Types
Created January 10, 2014 14:13
Rocking a portfolio custom post type with Previous / Next links? Want a Next link on the last portfolio page to simply link back to the first? Ha! Have fun with that. Turns out, that's not so easy huh? Wp's <?php previous_post(); ?> tag doesn't work like that out the box. So, just throw this puppy into your functions.php and use the created <?ph…
/*===================================================================================
Circular Navigation for Single CPT files (or just your single.php)
From:
http://wordpress.org/plugins/loop-post-navigation-links/
Example Useage:
For use with next / last post markup that would look a little something like this:
<div id="folio-nav">
<div class="prev-post">
<?php themename_previous_or_loop_post_link( '%link', '<span class="icon-left"></span>'); ?>
@stephenscaff
stephenscaff / Fade Out - Fade In
Created January 13, 2014 21:36
Simple fade in on body and fade out via nav or link class. I usually use a the css for the fades and stuff, but this should do it....
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(500);
$("nav a, a.suave").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage);