Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@oliverbenns
oliverbenns / gist:6660563
Last active December 23, 2015 16:09
Clear text on input box click. Restore if no value entered.
// ================================================================================
//
// Clear text on input box on click. Restore if no value entered.
//
// On focus
$('.js-clear').on('focus', function() {
if (this.value === this.getAttribute('value')) {
this.value = "";
}
@oliverbenns
oliverbenns / 1 - Script
Last active December 23, 2015 16:09
Simple 'To Top' button script if browser goes below the fold.
$(window).scroll(function() {
var window_height = $(window).height();
if ( $(window).scrollTop() > window_height ) {
$('.to-top').addClass('show');
} else {
$('.to-top').removeClass('show');
}
});
@oliverbenns
oliverbenns / Scripts
Last active December 24, 2015 03:59
Nth-of-type IE7 & IE8 Fallback [jQuery]
// Adds class 'l-end-col' to matched elements.
function nthFallback(ele, nth) {
if ($('html').hasClass('lte8')) {
$(ele + ':nth-of-type(' + nth + ')').addClass('l-end-col');
}
}
// To run - e.g. select every 4th <li>
nthFallback('ul li','4n+4');
@oliverbenns
oliverbenns / 1- CSS
Last active January 3, 2016 04:49
Select Element Styling
.dropdown {
border: 1px solid black;
border-radius: 3px;
overflow: hidden;
background: white url("img/icon-arrow.png") no-repeat right 50%;
}
.dropdown select {
padding: 6px 12px;
border: none;
@oliverbenns
oliverbenns / gist:cf7e171f0ced1437dec5
Last active August 29, 2015 14:04
Stylus Mixin For Background Cover
background-size(arguments)
-webkit-background-size arguments
-moz-background-size arguments
-o-background-size arguments
background-size arguments
if arguments[0] == cover
-ms-behavior url('/assets/polyfill/backgroundsize.min.htc') //- https://github.com/louisremi/background-size-polyfill
@oliverbenns
oliverbenns / index.jade
Last active August 29, 2015 14:04
Jade - Test Typography
div(style="clear:both")
h1 Lorem ipsum dolor sit amet [h1]
p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo [p]
div(style="clear:both")
h2 Lorem ipsum dolor sit amet [h2]
p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo [p]
div(style="clear:both")
h3 Lorem ipsum dolor sit amet [h3]
@oliverbenns
oliverbenns / gist:e2b6cf86355562a469d7
Created August 27, 2014 04:58
Cut down that pagination on mobile!
span.text Prev
span.hidden-xs ious article
span.text Next&nbsp;
span.hidden-xs article
@oliverbenns
oliverbenns / config-mixins.styl
Last active August 29, 2015 14:08
Generic Button Styles
/* ==========================================================================
Mixins
========================================================================== */
transition(arguments)
-webkit-transition arguments
-moz-transition arguments
-o-transition arguments
transition arguments
@oliverbenns
oliverbenns / index.jade
Last active August 29, 2015 14:08
Social Share Links Snippet
li
a.js-share(href="http://twitter.com/share?text=" + meta.description, target="_blank", data-window-width="650", data-window-height="360")
.icon.icon-twitter
li
a.js-share(href="http://www.facebook.com/sharer.php", target="_blank", data-window-width="900", data-window-height="500")
.icon.icon-facebook
@oliverbenns
oliverbenns / line.jade
Created November 11, 2014 00:02
Mixin
mixin line(opts)
- var opts = opts || {};
tr
td.gutter(width=gutterWidth)
td.grey(height="1", colspan=opts.colspan || "1")
td.gutter(width=gutterWidth)