Skip to content

Instantly share code, notes, and snippets.

View mturnwall's full-sized avatar

Michael Turnwall mturnwall

View GitHub Profile
@mturnwall
mturnwall / gist:4559361
Created January 17, 2013 20:19
Make sure google maps isn't zoomed too far in when updating locations. You might want this because when one location is returned the map will be zoomed in as far as it can go. So you might want to make sure the zoom level never goes past a certain point.
/*
call this snippet after you call map.fitBounds();
replace "map" with the instance to your map
change the zoomThreshold to the zoom level you want the map never to zoom
past when loading locations
*/
google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
var oldZoom = map.getZoom(),
zoomThreshold = 16;
if (oldZoom > zoomThreshold) {
@mturnwall
mturnwall / create_polyfill.js
Last active December 14, 2015 06:18
Object.create() polyfill since IE8 doesn't support the create() method.
/**
* Polyfill for Object.create()
* use this to create new objects
*/
if (!Object.create) {
Object.create = function (o) {
if (arguments.length > 1) {
throw new Error('Sorry the polyfill Object.create only accepts the first parameter.');
}
function F() {}
@mturnwall
mturnwall / gist:5086988
Created March 5, 2013 00:29
Get a list of the property keys for an object in javascript
var temp = {a: 1, b: 2, c: 3};
var temp2 = [];
for (var propertyName in temp) {
temp2.push(propertyName);
}
console.log(temp2);
@mturnwall
mturnwall / placeholder.scss
Last active December 16, 2015 20:19
SASS mixin that will hide the placeholder text for input fields. Right now Firefox doesn't do the transition so the text is hidden using opacity. Browser support is: Webkit based browsers, Firefox 19+, IE10
@mixin placeholder($prefix) {
[placeholder]::-#{$prefix}-placeholder {
@if $prefix != moz {
text-indent: 0;
transition: text-indent 500ms ease-out;
} @else {
opacity: 0.5;
transition: opacity 500ms ease-out;
}
}
@mturnwall
mturnwall / README.md
Last active December 20, 2015 19:59
A reliable way to get the browser's language on the front-end. It uses a service at http://ajaxhttpheaders.appspot.com. That service returns the headers which contains the browser's preferred language in the "Accept-Language" header.

Multilingual

A reliable way to get the browser's language on the front-end. It uses a back-end service at http://ajaxhttpheaders.appspot.com. That service returns the headers which contains the browser's preferred language in the "Accept-Language" header.

Usage

The ML object gets added to the browser's window object as the alias "multilingual". When the page loads you can simply call multilingual.init();. This will initate an ajax call to the service and set the multilingual.language property to whatever is returned in the "Accept-Language" header. This value is whichever language is set as the browser's top preference.

multilingual.init() makes a call to multilingual.getLanguage() with the multilingual.setLanguage() method as the callback. If you want to supply your own call back you can call multilingual.getLanguage() manually and supply your own callback. Your callback will need to accept the language string as the first parameter.

@mturnwall
mturnwall / device_is.js
Last active December 25, 2015 07:49
A simple function to determine if a device is iPad, iPhone, or Android. The version of the OS is also returned.
var deviceIs = (function () {
var userAgent = navigator.userAgent,
device = {
type: (userAgent.match(/iphone|android|ipad/i)) ? userAgent.match(/iphone|android|ipad/i)[0] : false,
fullVersion: false,
majorVersion: false
};
if (device.type) {
device.fullVersion = userAgent.match(/(OS|android)\s+([\d(\_|\.)]+)/i)[0].replace(/_/g,'.');
device.majorVersion = device.fullVersion.match(/[0-9]/)[0];
@mturnwall
mturnwall / Dot-Navigation.markdown
Created October 18, 2013 21:53
A Pen by Michael Turnwall.

Dot Navigation

Using some advanced SASS to calculate styles so that the transparency of the dots increases as the number of dots gets further away from the "active" dot.

A Pen by Michael Turnwall on CodePen.

License.

@mturnwall
mturnwall / SassMeister-input-HTML.html
Created December 6, 2013 06:22
Generated by SassMeister.com.
<div id="wrapper">
<a href="#" class="thirtyDay"><strong><em>30 Day</em>Money Back Guarantee</strong></a>
<a href="#" class="cta">Get a Number &amp; Sign Up &raquo;</a>
</div>
@mturnwall
mturnwall / SassMeister-input.scss
Created January 23, 2014 05:03
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
@import "compass";
@mixin dots($total) {
@for $i from 1 through $total {
.s#{$i} {
@include fadeDots($total, $i);
@mturnwall
mturnwall / SassMeister-input.scss
Created April 17, 2014 17:02
Generated by SassMeister.com.
// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----
$social-icons:
(facebook, \e600, #fff, b, c),
(twitter, \e601),
(pinterest, \e602),
(instagram, \e603),