Skip to content

Instantly share code, notes, and snippets.

View robpataki's full-sized avatar

Rob Pataki robpataki

  • Valtech
  • York UK
View GitHub Profile
@robpataki
robpataki / resizeVideo.js
Created November 25, 2014 18:57
This script will always make sure that the video is covering the browser window and it is centred, whilst the aspect ratio is maintained.
function resizeVideo() {
var videoEl = document.getElementsByTagName('video')[0];
var videoOriginalWidth = 854;
var videoOriginalHeight = 480;
var videoRatio = videoOriginalWidth/videoOriginalHeight;
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var videoWidth;
var videoHeight;
var videoDimensionMultiplier = 1.1;
@robpataki
robpataki / imageload.js
Created December 27, 2014 15:32
jQuery image load handling
var img = new Image();
$(img).on('load', function(e){
// Your code here
}).each(function() {
if(this.complete) $(this).load();
});
img.src = "http://dummyimage.com/600x400";
@robpataki
robpataki / singie.js
Created July 18, 2015 22:10
Very simple implementation of the singleton pattern in requirejs
define(
[],
function() {
'use strict';
var instance = null;
function Singie() {
@robpataki
robpataki / pixi_mc.js
Last active August 29, 2015 14:25
Demonstrating sweat free movieclip creation and clean up in PIXI
/*
This snippet requires PIXI and underscoreJS to work;
The good thing about this approach is that you don't have to manually set the number of total frames
used and file name references used in the animation to build up your texture data; and this technique
also makes it a lot easier to remove the BaseTextures from TextureCache once you no longer need them,
so that you can free up precious memory!
Use this snippet with caution, I quickly scribbled it in, so not sure if it breaks, please let me know
in the comments if you found it useful or found an error. Cheers!
@robpataki
robpataki / retina.css
Created September 10, 2015 15:00
Retina background image CSS
.icon {
background-image: url("social-icons.png") 0 0 no-repeat;
}
/* 1.25 dpr and up - including retina devices */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
.icon {
background-image: url("social-icons@2x.png");
[
{ "keys": ["super+shift+forward_slash"], "command": "toggle_comment", "args": { "block": true } }
]
@robpataki
robpataki / video-ready.js
Last active September 30, 2015 16:10
Handle video loading
function onVideoReady() {
video.play();
}
/* Solution #1
First check for the videos readyState, if not ready add an event
listener to 'canplaythrough' event
*/
if(video.readyState < 4) {
video.addEventListener('canplaythrough', function() {
@robpataki
robpataki / MediaResizer.js
Last active February 26, 2016 11:34
Resize media (video or image) to imitate 'background cover' or 'background contain' behaviour in JavaScript
define([
'jquery',
'underscore',
'brewser'
],
function(
$,
_,
brewser
/* Prevent overflow scroll bouncing on mac */
/* http://stackoverflow.com/questions/12046315/prevent-overscrolling-of-web-page */
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
# OS X
*.DS_Store
Icon
Iconr
Icon
*.log
# Python
*.pyc