Skip to content

Instantly share code, notes, and snippets.

@craigbutcher
craigbutcher / ordered-list.css
Created August 3, 2015 15:03
A Better Ordered List (ABOL)
ol {
counter-reset: item;
margin: 0 0 20px 20px;
}
ol li {
display: block;
position: relative;
}
@craigbutcher
craigbutcher / index.html
Last active August 29, 2015 14:26
Targeting x and y element with name.
<div class="r">
<p>Name</p>
</div>
<form name="test">
<select name="drop">
<option>this</option>
</select>
<div>
<p>a something</p>
</div>
@craigbutcher
craigbutcher / select-placeholder.html
Created July 28, 2015 10:17
Placeholder for select box.
<select>
<option value="" disabled selected>Select your option:</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
@craigbutcher
craigbutcher / gist:4e5d1efe464c331fc27e
Last active August 29, 2015 14:25
javascript module for sticky sidebar
// Sticky sidebar - JavaScript
'use strict';
var fixedSidebar = {
init: function() {
// Set up the click handlers.
this.bindUIActions();
@craigbutcher
craigbutcher / gist:9e2c011326a678438ac7
Last active August 29, 2015 14:25
Simple fixed sidebar in jQuery/JavaScript
$(window).scroll(function(){
// var adjustGlue = $('footer').offset();
// var bottom = $(window).height() - setGlue.top - $('.content .page').height();
// var bottom = $(window).height() + adjustGlue.top;
if (setGlue = bottom){
$('.fixed-sidebar').removeClass('glue');
$('.fixed-sidebar').addClass('glue-to-bottom');
console.log('glued to the bottom');
@craigbutcher
craigbutcher / gist:3f53b6168f7bf3e45fed
Last active August 29, 2015 14:25
Fixed sidebar scrolling with stick to bottom when reach... the bottom of the page.
// Using require.js
if(has('.fixed-sidebar')) {
// Global variable to find the correct value where fixed-sidebar resides at
var setGlue = $('.fixed-sidebar').offset().top;
$(document).scroll(function(){
// Fetch the value from the browser's window
var windowTop = $(window).scrollTop();
@craigbutcher
craigbutcher / gist:0580b1ad947a53cab134
Last active August 29, 2015 14:25
Useful websites for web developing
RegEX - http://www.regexr.com/
jQuery Validate - http://jqueryvalidation.org/
@craigbutcher
craigbutcher / gist:59752be0460c7776569f
Last active November 3, 2015 03:19
jQuery Validation - No Special Characters allowed (not allowing < > # )
// Thanks to this site to help out on RegEx - http://www.regexr.com/
require(["jQueryValidate"], function(){
// dont allow < > # \ /
// add alphanumeric validator
jQuery.validator.addMethod("noSpecialCharacter", function(value, element) {
var regex = new RegExp("[<>#]+");
var key = value;
@craigbutcher
craigbutcher / gist:85abbcbc48b649be1be3
Last active August 29, 2015 14:24
Accessibility Form
<div class="form-wrapper">
<form action="registered-confirmed.php" novalidate="novalidate" class="registerInterest">
<div class="row account-info">
<fieldset>
<label for="Name">Name:</label>
<input type="text" title="Name" id="Name" value="">
</fieldset>
<fieldset>
<label for="Position">Position:</label>
<input type="text" title="Position" id="Position" value="">