Skip to content

Instantly share code, notes, and snippets.

View robspangler's full-sized avatar

Rob Spangler robspangler

5 followers · 5 following
View GitHub Profile
@robspangler
robspangler / data-mobile-href.js
Last active December 16, 2015 20:19
Open a unique URL from an <a> tag when on mobile browser. Used for responsive designs.Example: <a href="http://desktop.url" data-mobile-href="http://mobile.url">Link Text</a>
jQuery(document).ready(function($){
//Max Mobile Size
var mobileMaxWidth = 570;
//DO ON CLICK (Any mobile specific links go to the URL in their data-mobile-href -- on 'click' allows it to detect the current screensize)
$('*[data-mobile-href]').click(function(){
if ( $(document).width() < mobileMaxWidth ) {
var mobileURL = $(this).data("mobile-href");
$(this).attr('href', mobileURL ); //swap default href with new mobile href
@robspangler
robspangler / centered-floats.css
Last active December 16, 2015 21:50
Center a floating list navigation / pagination Sample HTML: <div id="pagination" class="centered-list"> <ul class="page-numbers clearfix"> <li><a class="prev" href="#prev">Prev</a></li> <li><a href="#1">1</a></li> <li><a href="#2">2</a></li> <li><a class="next" href="#next">Next</a></li> </ul> </div>
/*Centered List Items*/
.centered-list { float: left; width: 100%; overflow: hidden; position: relative; }
.centered-list ul { clear: left; float: left; position: relative; left: 50%; text-align: center; }
.centered-list ul li { float: left; position: relative; right: 50%; list-style: none; }
@robspangler
robspangler / detect-touch-modernizr.js
Created May 10, 2013 14:29
Detects touch screen using Javascript with Modernizr and gives you a handy re-usable variable. Also added an iPad specific variable.
var isTouch = Modernizr.touch != false;
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isTouch)
alert('Touch');
if (isiPad)
alert('iPad');
@robspangler
robspangler / fancy-ampersand.css
Last active December 21, 2015 14:29
.amp {
font-family: Baskerville, Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
@robspangler
robspangler / simple-grid-percentage.css
Last active December 21, 2015 14:29
Grid frameworks are generally way too bloated. This is a 12 column grid based off of 960px with 20px gutters, converted to percentages (so it works in any sized new or pre-existing layout). Sample:<div class="row"> <div class="column eight">Eight Columns</div> <div class="column four">Four Columns</div></div>
/* Grid Columns -- 12 columns based off of 960px with 20px gutters*/
.row { clear: both; }
.row:before, .row:after {content: " "; display: table; } .row:after { clear: both; } /*clearfix*/
.row .column { padding-left: 1.041666666%; padding-right: 1.041666666%; /*gutter*/ float: left; }
.row .column.right { float: right; /*good if you have a sidebar and need to skip a column & float it right*/ }
.row .one { width: 6.25%; }
.row .two { width: 14.583333333%; }
.row .three { width: 22.916666666%; }
.row .four { width: 31.25%; }
@robspangler
robspangler / chrome-parameters
Last active December 2, 2015 18:48
Opens Chrome from OSX terminal with parameters to allow Chrome to store and access local cookies, or access local files/ajax.
*Opens Chrome from OSX terminal allowing it to store and access local cookies.*
open /Applications/Google\ Chrome.app --args --enable-file-cookies
*Opens Chrome from OSX terminal allowing it to access local files and ajax calls.*
open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
@robspangler
robspangler / retina@2x-display.css
Last active August 29, 2015 13:57
CSS and JavaScript needed to accommodate Retina devices
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}
@robspangler
robspangler / wp-add-shortcodes.php
Last active August 29, 2015 13:57
http://wpsnipp.com/index.php/functions-php/add-custom-media_buttons-for-shortcode-selection/
add_action('media_buttons','add_sc_select',11);
function add_sc_select(){
echo '&nbsp;<select id="sc_select">
<option>Shortcode</option>
<option value="[html][/html]">[html]</option>
<option value="[css][/css]">[css]</option>
<option value="[javascript][/javascript]">[javascript]</option>
</select>';
}
add_action('admin_head', 'button_js');
@robspangler
robspangler / wp-add-shortcodes-auto.php
Last active March 31, 2016 16:09
http://wpsnipp.com/index.php/functions-php/update-automatically-create-media_buttons-for-shortcode-selection/
add_action('media_buttons','add_sc_select',11);
function add_sc_select(){
global $shortcode_tags;
/* ------------------------------------- */
/* enter names of shortcode to exclude bellow */
/* ------------------------------------- */
$exclude = array("wp_caption", "embed");
@robspangler
robspangler / backstretch-inline.html
Last active August 29, 2015 14:01
Use jQuery Backstretch.js inline rather than housed in a script in <head>.
<!--In the HTML you would just need something like:-->
<section data-backstretch-url="images/featured-about.jpg">
...
</section>