Skip to content

Instantly share code, notes, and snippets.

Avatar

Om Shankar OmShiv

View GitHub Profile
@OmShiv
OmShiv / colors.css
Last active Aug 29, 2015
Awesome CSS colors, gradients, etc.
View colors.css
.topics-menu__topic-submenu.topic-design {
background-color: #c42915
}
.topics-menu__topic-submenu.topic-code {
background-color: #005d50
}
.topics-menu__topic-submenu.topic-music {
background-color: #0235c0
@OmShiv
OmShiv / vertical-horizontal-center.html
Last active Aug 29, 2015
Vertical Horizontal Center
View vertical-horizontal-center.html
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
<style>
View progress-bar.html
<!DOCTYPE html>
<html>
<head>
<title>Progress Bar</title>
</head>
<style type="text/css">
#progress-bar {
background-color: blue;
height: 30px;
border-radius: 2px;
@OmShiv
OmShiv / placement.css
Created May 13, 2012
Inline-block and placement
View placement.css
body {
font-family: sans-serif;
}
ul {
list-style: none;
}
li {
background: slategrey;
@OmShiv
OmShiv / stereoscopic-3D-image.html
Last active Dec 10, 2015
Stereoscopic 3D image
View stereoscopic-3D-image.html
<h1>Simple 3D effect</h1>
<div class="flip"></div>
View nodes-html5.js
window.onload = function run() {
var width = window.innerWidth;
var height = window.innerHeight;
var elm = document.createElement('canvas');
var pixelDensity = window.devicePixelRatio || 1;
var orbs = [];
var orbCount = window.innerHeight / 10;
elm.setAttribute('width', width * pixelDensity);
elm.setAttribute('height', height * pixelDensity);
@OmShiv
OmShiv / bin-ajax.js
Last active Dec 14, 2015
Binary data in the OLD Web and the new HTML5 Web, via AJAX
View bin-ajax.js
/*
** OLD
*/
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
// Trick to pass bytes through unprocessed.
xhr.overrideMimeType('text/plain; charset=x-user-defined')
@OmShiv
OmShiv / overlay-pops.html
Last active Dec 14, 2015
Google Chrome - Overlay popups
View overlay-pops.html
<div id="overlay-container-1" class="overlay">
<div id="spelling-confirm-overlay" class="page" hidden="" style="max-height: 351.90000000000003px;">
<div class="close-button"></div>
<h1 i18n-content="spellingConfirmOverlay">Ask Google for Suggestions</h1>
<div class="content-area">
<span id="spelling-confirm-text" i18n-content="spellingConfirmMessage">Google Chrome can provide smarter spell-checking by sending what you type in the browser to Google servers, allowing you to use the same spell-checking technology used by Google search.</span>
<a id="spelling-confirm-learn-more" target="_blank" i18n-content="learnMore" i18n-values="href:privacyLearnMoreURL" href="https://support.google.com/chrome/?p=settings_privacy">Learn more</a>
</div>
<div class="action-area">
<div class="button-strip">
@OmShiv
OmShiv / dzutils.js
Created Apr 6, 2013
Best function bind
View dzutils.js
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
// closest thing possible to the ECMAScript 5 internal IsCallable
// function
if (typeof this !== "function")
throw new TypeError(
"Function.prototype.bind - what is trying to be fBound is not callable"
);
@OmShiv
OmShiv / oop-exp.js
Last active Dec 22, 2015
Object Oriented Programming in JavaScript
View oop-exp.js
/*** OOP in JS ***/
// No Classes in JavaScript, but constructor functions.
var a = 5;
// is equivalent to calling
var a = Number(5); // JavaScript abstracts it.
// Number is a Constructor Function
// A Class. First letter caps only for symantics
You can’t perform that action at this time.