Skip to content

Instantly share code, notes, and snippets.

View cbourdage's full-sized avatar

Collin Bourdage cbourdage

View GitHub Profile
@cbourdage
cbourdage / checkout-file-upload.js
Created March 26, 2015 16:31
Full view of what a file upload may contain within magento checkout
/**
* Custom RxMethod Checkout step
*
* @type {*}
*/
var RxMethod = Class.create();
RxMethod.prototype = {
initialize: function(form, saveUrl) {
var _self = this;
@cbourdage
cbourdage / image-load.js
Created September 4, 2014 18:36
Image load function to force for IE
$thumbnail.find('img').one('load', function() {
var $this = $(this);
if($this.attr('src').replace('thumbnails', 'fullsize') == $lgImg.attr('src')){
$this.parent('a').addClass('active');
}
}).each(function() {
if($(this).complete){
$(this).load();
}
});
@cbourdage
cbourdage / responsive-custom-menu.less
Created August 12, 2014 20:52
Custom responsive menu that appears in main navigation and slides from right and has sub nav that slides in over.
@media screen and (max-width: @media-mobile-break) {
body.menu-opened .nav-container {
-webkit-overflow-scrolling: touch;
}
.nav-container {
margin: 0;
position: relative;
padding: 0 !important;
height: 0;
z-index: 200;
@cbourdage
cbourdage / 0_reuse_code.js
Created July 8, 2014 22:38
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@cbourdage
cbourdage / po-box-validation.js
Last active August 2, 2024 13:17
PO BOX js Regex validation
/**
1.1 Checkout
- Gorilla will add custom client side validation to the shipping method address field to test if the string contains a pattern of characters that would denote that the string contains the words PO Box.
- If the validation fails the user will be displayed a message stating that the shipping address cannot be a PO Box.
? P.O. Box
? PO. Box
? PO Box
? POBox
? P O Box
@cbourdage
cbourdage / image-dimensions.js
Last active August 29, 2015 14:02
Image min height and width detection
/**
* Compares the images natural height and width with a provided
* minimum height and width to check against. Fires callback if
* valid
*
* @param $img jQuery Object
* @param minH integer
* @param minW integer
* @param fn function
*/
@cbourdage
cbourdage / accordion-updates.js
Created June 18, 2014 17:03
Scroll UX and Custom Elements/Selects For Checkout
Accordion.prototype.openSection = function(section) {
var section = $(section);
// Check allow
if (this.checkAllow && !Element.hasClassName(section, 'allow')){
return;
}
if(section.id != this.currentSection) {
this.closeExistingSection();
@cbourdage
cbourdage / form.less
Last active August 29, 2015 14:02
Custom form validation by extending prototype validation
// Validation errors
.input-box {
position: relative;
.validation-failed {
padding-right: 80px;
}
.validation-advice {
background-color: #fff;
border: 2px solid @brand-orange;
<script>
(function(doc, script) {
var js,
s = doc.getElementsByTagName(script)[0],
load = function(src, callback, id) {
if (d.getElementById(id)) return;
js = doc.createElement(script);
js.src = src;
js.id = id;
//js.async = true;
.sprite(@pos-x; @pos-y; @repeat: no-repeat) {
background: url("../images/sprite.png") @pos-x @pos-y @repeat;
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-size: 500px 500px;