Skip to content

Instantly share code, notes, and snippets.

View panayotoff's full-sized avatar

Chris panayotoff

View GitHub Profile
@panayotoff
panayotoff / TweenLite JS staggerTo
Created January 29, 2014 20:03
In a project, I needed very small filesize and great animation tool. TweenLite + CSSPlugin are great, but sometimes you need staggerTo(), which is part of TweenMax. So, I get this function out of TweenMax. Just add it and use it like TM.staggerTo( items, time, animation, stagger ... )
var TM = {};
TM.staggerTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
stagger = stagger || 0;
var delay = vars.delay || 0,
a = [],
finalComplete = function() {
if (vars.onComplete) {
vars.onComplete.apply(vars.onCompleteScope || this, arguments);
}
<!DOCTYPE html>
<html>
<head>
<title>Image Load</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Image Load</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, del, dfn, em, img, q, s, samp, small, strike, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
@panayotoff
panayotoff / send sms
Last active August 29, 2015 14:21
Send SMS via JS
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SMS sender</title>
<style>
body {
font-family: Helvetica;
@panayotoff
panayotoff / width-to-ratio.scss
Last active November 9, 2015 11:07
Sometimes the designer gives you static design with column widths, that doesn't fit exactly in the grid system. For example the container is 200px, and there are two columns - 110px and 90 px. To make a fluid design, you have to represent them as percentages - so just use this little scss function that will return the appropriate width, represen…
//--------------------------------------------------------------
// Width to ratio
// You can pass to the mixin the target and the context in units:
// fixed-to-fluid(35px, 100px);
// Or you can pass just ratio from the pixels
// fixed-to-fluid(35/100);
//--------------------------------------------------------------
@function fixed-to-fluid($target-width, $context-width:false) {
//Process ratio
@panayotoff
panayotoff / dollar-like.js
Created November 14, 2015 20:52
dollar-like.js
(function(window)
{
var $ = function(expression)
{
if(!(this instanceof $))
{
return new $(expression);
}
@panayotoff
panayotoff / x.js
Created June 23, 2015 21:06
x.js is my first attempt to build jQuery-like micro library. It has most of the functionality you use every day - selectors, events, traversal, add/remove/toggle class, get/set attributes and handles most common cases.
;
(function (window) {
'use strict';
var xBuild = (function () {
var xGlobals = {
newElementRegex: /<(\w+)\s?\/>/,
};
SpecialChars['А'] = {code: 0x0410, charset: 6};
SpecialChars['Б'] = {code: 0x0411, charset: 6};
SpecialChars['В'] = {code: 0x0412, charset: 6};
SpecialChars['Г'] = {code: 0x0413, charset: 6};
SpecialChars['Д'] = {code: 0x0414, charset: 6};
SpecialChars['Е'] = {code: 0x0415, charset: 6};
SpecialChars['Ж'] = {code: 0x0416, charset: 6};
SpecialChars['З'] = {code: 0x0417, charset: 6};
SpecialChars['И'] = {code: 0x0418, charset: 6};
SpecialChars['Й'] = {code: 0x0419, charset: 6};
console.log('%cHello from\n%cThe other side',[
'font-family: \'Helvetica\'',
'font-weight: normal',
'font-size: 15px',
'line-height: 1.25',
].join(';'), [
'font-family: "Helvetica"',
'font-weight: 600',
'font-size: 15px',
'line-height: 1.25',