Skip to content

Instantly share code, notes, and snippets.

@mediamichael
mediamichael / .block
Created November 8, 2017 08:21 — forked from mbostock/.block
Force Layout with Mouseover Labels
license: gpl-3.0
@mediamichael
mediamichael / RTL Bootstrap flip via JS
Last active March 3, 2020 17:07
RTL and LTR direction change for Bootstrap using JavaScript i18N
// Eldar: https://stackoverflow.com/questions/19730598/right-to-left-support-for-twitter-bootstrap-3
// Edited for custom implementation
var layout = {};
layout.setDirection = function (direction) {
layout.rtl = (direction === 'rtl');
document.getElementsByTagName("html")[0].style.direction = direction;
var styleSheets = document.styleSheets;
var modifyRule = function (rule) {
/* ---------------------------------------------------------------------------
Boilerplate CSS Media Queries
Encoding: UTF-8
Author: PaulUnd (http://www.paulund.co.uk/boilerplate-css-media-queries)
--------------------------------------------------------------------------- */
/* =Smartphones (portrait and landscape)
--------------------------------------------------------------------------- */
@media only screen
// http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css
// center
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
// within container
@mediamichael
mediamichael / appendCSS
Created October 20, 2014 20:32
Append CSS with JS
var css = '@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,900,700,500,500italic,700italic,900italic);',
header = document.getElementsByTagName("head")[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
@mediamichael
mediamichael / side-swipe.css
Created February 14, 2014 03:31
Mobile List with Swipe, Horizontal Scroll
.items li {
padding: 0px;
display: inline-block;
white-space: nowrap;
overflow: scroll;
-webkit-overflow-scrolling:touch;
}
<!doctype html>
<html>
<head>
<title>Flix</title>
<script src="mobile/js/redirect.js"></script>
<script>redirectMobileTo('mobile/index.html');</script>
</head>
<body>
<h1>Flix Homepage</h1>
<p><a href="mobile/index.html">Mobile</a></p>
@mediamichael
mediamichael / no_drag.css
Last active January 2, 2016 10:29
Disable Dragging and Selecting CSS
.img{
user-drag: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
/* click through it */
.elem {
@mediamichael
mediamichael / iframeAppendCSS
Last active December 24, 2015 07:59
Get iframe by ID and append a CSS style to affect an element inside the iframe.
var iframe1 = document.getElementById('myiframeID');
iframe1.onload = function (){
if(this.contentDocument) iframe1.doc = iframe1.contentDocument;
else if(iframe.contentWindow) iframe1.doc = iframe1.contentWindow.document;
var css = '.myelement{float:right;}',
header = iframe1.doc.getElementsByTagName('head')[0],
style = document.createElement('style');
@mediamichael
mediamichael / isMobile
Created September 17, 2013 22:31
Detect if device is Android, iPhone, iPad, or iPod.
var isMobile;
var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf( "android") > -1;
if ( isAndroid || is_uiwebview || is_safari_or_uiwebview ) {
isMobile = true;
//do something
}