working on it ...

Filters

Explore Public Snippets

Sort by

Found 1,924 snippets matching: html5

    public by sTiLL-iLL modified Dec 1, 2015  235337  1  7  15

    ES5 Array funKtion polly-fillerz...

    just in case your browser sucks
    
    // filler for Array.prototype.bind()
    
    if (!Function.prototype.bind) {
      Function.prototype.bind = function(that) {
        if (typeof this !== 'function') {
          throw new TypeError('obj is not callable');
        }
        var a_Argz = Array.prototype.slice.call(arguments, 1), noop = function() {},
            bFnky = this, bnd  = function() {
              return bFnky.apply(this instanceof noop && that? this: that,
                     a_Argz.concat(Array.prototype.slice.call(arguments)));
            };
    
        noop.prototype = this.prototype;
        bnd.prototype = new noop();
        return bnd;
      };
    }
    
    // different approach for isArray()...
    
    function isArray (list) {
      
    }
    
    if (!Array.isArray) {
      Array.isArray = function(argz) {
        return Object.prototype.toString.call(argz) === '[object Array]';
      };
    }
    
    function isArray (list) {
      if (Array.isArray) {
        return Array.isArray(list);
      }
    }
    
    function isArray (list) {
      if (Array.isArray) {
        return Array.isArray(list);
      }
      return Object.prototype.toString.call(list) === '[object Array]';
    }
    
    
    var isArray;
    var isArray = (function () {
      
    })();
    
    var isArray = (function () {
      if (Array.isArray) {
        return Array.isArray;
      }
    })();
    
    var isArray = (function () {
      if (Array.isArray) {
        return Array.isArray;
      }
      return function (list) {
        return Object.prototype.toString.call(list) === '[object Array]';
      };
    })();
    
    function (list) {
      return Object.prototype.toString.call(list) === '[object Array]';
    }                        

    public by sTiLL-iLL @ SniPitz-KND modified Nov 1, 2014  183827  1  8  23

    EventDelagateAsyncContextMessageBuzzWordObject

    does it work? IDK... havent tried.. the idea is solid... itll prolly work... without to much effort...
    // polyfill first... just in case
    
    if(!window.CustomEvent) {
      (function(wdw) {
        function CustomEvent ( event, params ) {
          params = params || { bubbles: false, cancelable: false, detail: undefined };
          var evt = document.createEvent( 'CustomEvent' );
          evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
          return evt;
        }
        CustomEvent.prototype = window.Event.prototype;
        wdw.CustomEvent = CustomEvent;
      }(window));
    }
    
    function ContextConnection_ChannelBroker(document) {
    	var slf = this;
    	this.create = function (evtName, obj) {
    	  var eventChannel = new CustomEvent(eventName, 
    	    {
    	      bubbles: true,
    	      cancelable: true,
    	      detail: obj
    	     });
    	     
    	  this.fwdResult = function (rslt) {
    			obj.dispatchEvent(evtName, rslt);
    		};
    		
    		this.objPxy = (function(fwdResult) {
    			this.eventChannel.call(slf);
    			obj.addEventListener(evtName, function (ev) {
    				ev.preventDefault();
    				return obj.bind(fwdResult(ev));
    			});
    			return obj;
    		}());
    		
    		return objPxy;
    	};
    	
    	objPxy.prototype = Object.create(obj.prototype,	{ 
    	  constructor: {
    	    value: objPxy,
    	    enumerable: false
    	  }
    	});
    	objPxy.prototype.on = function (n,fnc) {
    		obj.addEventListener(n, function(e) {
    			fnc(e.data);
    		});
    	};
    	objPxy.prototype.emit = function (n,obj) {
    		obj.dispatchEvent(n, obj);
    	};	
    	return {
    		onSignaled: on,
    		emitSignal:	emit,
    		createContextChannel: create
    	}
    };

    public by micurs modified Oct 30, 2015  33754  558  8  3

    HTML5 Canvas: drawing an arrow at the end of the line

    The Canvas 2D API does not have a way to draw an arrow as endpoint of a line. This simple code shows how you can draw one yourself. With this HTML: Running demo available here: http://jsfiddle.net/n7e2zhj3/2/
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    
    function grid() {
        for (var x = 0.5; x < canvas.width; x += 10) {
            ctx.moveTo(x, 0);
            ctx.lineTo(x, canvas.height);
        }
        for (var y = 0.5; y < canvas.height; y += 10) {
            ctx.moveTo(0, y);
            ctx.lineTo(canvas.width, y);
        }
        ctx.strokeStyle = "#eee";
        ctx.stroke();
    }
    
    function arrow(p1, p2) {
    
        ctx.save();
        var dist = Math.sqrt((p2[0] - p1[0]) * (p2[0] - p1[0]) + (p2[1] - p1[1]) * (p2[1] - p1[1]));
    
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#0000ff';
        ctx.moveTo(p1[0], p1[1]);
        ctx.lineTo(p2[0], p2[1]);
        ctx.stroke();
    
        var angle = Math.acos((p2[1] - p1[1]) / dist);
    
        if (p2[0] < p1[0]) angle = 2 * Math.PI - angle;
    
        var size = 15;
    
        ctx.beginPath();
        ctx.translate(p2[0], p2[1]);
        ctx.rotate(-angle);
        ctx.fillStyle = '#0000ff';
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#ff0000';
        ctx.moveTo(0, -size);
        ctx.lineTo(-size, -size);
        ctx.lineTo(0, 0);
        ctx.lineTo(size, -size);
        ctx.lineTo(0, -size);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    }
    
    $('#myCanvas').bind('mousemove', function (e) {
        var offset = $(this).offset();
        var p1 = [200.0, 200.0];
        var p2 = [e.pageX - offset.left, e.pageY - offset.top];
    
        ctx.clearRect(0, 0, 400, 400);
        grid();
        arrow(p1, p2);
    })                                  

    public by jitin modified Dec 9, 2017  398  5  5  1

    Basic HTML 5

    <!DOCTYPE html>
    
    <html lang="en">
    <head>
      <meta charset="UTF-8">
    
      <title>Untitled</title>
      <meta name="description" content="HTML5 Website Content">
      <meta name="author" content="Jitin">
    
      <link rel="stylesheet" href="css/styles.css">
    
      <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
      <![endif]-->
    </head>
    
    <body>
    
    </body>
    </html>																								

    public by quiet_rogue modified Sep 2, 2018  235  3  4  0

    HTML Quick Start

    Basic HTML starter for ad hoc responsive pages.
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<link rel="stylesheet" href="styles.css">
    	<script src="script.js"></script>
    </head>
    <body>
    
    </body>
    </html>

    public by sTiLL-iLL @ SniPitz-KND modified Dec 1, 2015  4644  12  8  28

    my skreenScooper in pure js. schweet YO!

    self executing module. skreen shots from DA BROWSAH!
    // javascript screenshot in your face!!!
    
    (function (wIn) {
    	function toAbso(urlz) {
    		if (!urlz.length) {
    		return [];
    	}
    
    	var attrNm = 'href', imgPrto = Object.create(HTMLImageElement.prototype),
    	    scptPrto = Object.create(HTMLScriptElement.prototype);
    	if (urlz[0].prototype === imgPrto || urlz[0].prototype === scptPrto) {
    		attrNm = 'src';
    	}
    
    	urlz = [].map.call(urlz, function (el, i) {
    	  var attr = el.getAttribute(attrNm);
    	  if (!attr) {
    		  return;
    	  }
    	  var dta = /^(https?|data):/i.test(attr);	
    	  if (dta) {
    		  return el;
    	  }
    	  else {
    		  return el;
    	  }});
    	  
    	return urlz;
    }
    
    function shootIt() {
    	toAbso(document.images);
    	toAbso(document.querySelectorAll("link[rel='stylesheet']"));
    	
      var sht = document.documentElement.cloneNode(true),
          shts = sht.style,
          shtd = sht.dataset,
          hed = sht.querySelector('head'),
          scpt = document.createElement('script');
          b = document.createElement('base');
          b.href = document.location.protocol + '//' + location.host;
          hed.insertBefore(b, hed.firstChild);
    
    	shtd.scrollX = wIn.scrollX;
    	shtd.scrollY = wIn.scrollY;
    	shts.pointerEvents, shts.userSelect, shts.webkitUserSelect,
    	shts.mozUserSelect, shts.msUserSelect, shts.oUserSelect = 'none';
    	shts.overflow = 'hidden';
    	scpt.textContent = '(' + onReadyGo.toString() + ')();';
    	sht.querySelector('body').appendChild(scpt);
    	
    	var blb = new Blob([sht.outerHTML], {
    		type: 'text/html'
    	});
    	return blb;
    }
    
    var seeIt = function() {
    	wIn.URL = wIn.URL || wIn.webkitURL;
    	wIn.open(wIn.URL.createObjectURL(shootIt()));
    };
    
    var onReadyGo = function() {
    	wIn.addEventListener('DOMContentLoaded', function (e) {
    		var xx = document.documentElement.dataset.scrollX || 0;
    		var yy = document.documentElement.dataset.scrollY || 0;
    		wIn.scrollTo(xx, yy);
    	});
    };
    
    wIn.seeIt = seeIt;
    
    })(window);            

    public by sTiLL-iLL @ SniPitz-KND modified Dec 19, 2014  4272  2  8  28

    .mP3 aUDiO viSUaliZatioN with CANVAS

    sounds dangerous!
    // quick visualization experimentation
    
    <div class="container">
    	
    	<div>
    		<canvas id="canvas" width="124" height="220" style="display: block;"></canvas>
    		<p>
    		  <button id="playBtn">
    		    <span>Play<span></span></span>
    		  </button>
    		</p>
    	</div>
    	
    	<div>
    		<div>
    			<img src="/someImg.jpg"/>
    		</div>
    	</div>
    </div>
    
    <script>
    	if (!window.AudioContext) {
    	  
    		if (!window.webkitAudioContext) {
    			alert('not supported');
    		}
    		
    		window.AudioContext = window.webkitAudioContext;
    	}
    	
    	var cntxt = new AudioContext(),
    		srchr, srchr2,
    	  srcNode, toknzr,
        aBuffer, jsNode,
    	  ctx = $("#canvas").get()[0].getContext("2d");
    
    	var grdt = ctx.createLinearGradient(0,0,0,130);
    	grdt.addColorStop(1,'#000000');
    	grdt.addColorStop(0.75,'#ff0000');
    	grdt.addColorStop(0.25,'#ffff00');
    	grdt.addColorStop(0,'#ffffff');
    
    	setNodes();
    	load("/someSounds.mp3");
    
    	function setNodes() {
    		jsNode = cntxt.createScriptProcessor(2048, 1, 1);
    		jsNode.connect(context.destination);
    		
    		srchr = cntxt.createsrchr();
    	  srchr.smoothingTimeConstant = 0.3;
    		srchr.fftSize = 1024;
    		
    		srchr2 = cntxt.createsrchr();
    		srchr2.smoothingTimeConstant = 0.0;
    		srchr2.fftSize = 1024;
    		
    		srcNode = cntxt.createBufferSource();
    		toknzr = cntxt.createChannelSplitter();
    		srcNode.connect(toknzr);
    		
    		toknzr.connect(srchr,0,0);
    		toknzr.connect(srchr2,1,0);
    		
    		srchr.connect(jsNode);
    		srcNode.connect(cntxt.destination);
    	}
    
    	function load(url) {
    		var req = new XMLHttpRequest();
    		req.open('GET', url, true);
    		req.responseType = 'arraybuffer';
    		
    		req.onload = function() {
    			cntxt.decodeAudioData(req.response, function(bfr) {
    				play(bfr);
    			}, wenError);
    		}
    		req.send({});
    	}
    	
    	function play(buffer) {
    		srcNode.buffer = bfr;
    	}
    	
    	function wenError(err) {
    		console.log(err);
    	}
    	
    	jsNode.onaudioprocess = function() {
    		var ary = new Uint8Array(srchr.frequencyBinCount);
    		srchr.getByteFrequencyData(ary);
    		
    		var avg = medianVolume(ary),
    		    ary2 = new Uint8Array(srchr2.frequencyBinCount);
    		
    		srchr2.getByteFrequencyData(ary2);
    		var avg2 = medianVolume(ary2);
    		
    		ctx.clearRect(0, 0, 60, 130);
    		ctx.fillStyle=gradient;
    		ctx.fillRect(0,130-avg,25,130);
    		ctx.fillRect(30,130-avg2,25,130);
    	}
    	
    	function medianVolume(array) {
    		var vals = 0, i = 0,
      		  len = ary.length,
      		  avg;
    		for (;i<len;i++) {
    			vals+=ary[i];
    		}
    		avg=vals/len;
    		return avg;
    	}
    	
    	$(document).ready(function() {
    		$('#playBtn').click(function(evt){
    			evt.preventDefault();
    			srcNode.start(0);
    		});
    	});
    	
    </script>            

    public by sTiLL-iLL modified Feb 2, 2015  2119  1  8  31

    LineWorker.js swing shift yo!

    spin up a new web thread without a separate file.
    // lineWrker.js
    
    function workman() {
      setInterval(function() {
        postMessage({eat: "me"});
      }, 500);
    }
    
    var wkd = workman.toString();
    wkd = wkd.substring(wkd.indexOf("{")+1, wkd.lastIndexOf("}"));
    
    var blobbyJo = new Blob([wkd], { type: "application/javascript" });
    var wrkr = new Worker(URL.createObjectURL(blobbyJo));
    
    wrkr.onmessage = function(msgz) {
      console.log("msg", msgz);
    };            

    public by micurs modified Jun 17, 2014  3778  8  8  1

    Change the address in the browser without reloading

    In HTML5 it is possible to change part of the address in the address browser without reloading the page. This helps building single page site with elements of the UI addressable using a consistent URL. See an example here: http://www.usatoday.com/ . By clicking on any article box a popup within the same page shows the content, and the URL in the
    // This add a new state to the browser history and replace the path
    window.history.pushState( stateObj, 'content title', '/new-path');
    
    // This replace the current state to the browser history and replace the path
    window.history.replaceState(stateObj, 'content title', '/new-path');
    

    public by sTiLL-iLL @ SniPitz-KND modified Dec 1, 2015  3693  4  8  19

    object data store... stuff it in yer client

    make a data tier in the browser
    
      // Local Data
       
    function DB(store, schema) {
          this.store = store;
          if (!localStorage[store] || typeof localStorage[store] == 'undefined') {
              localStorage[store] = JSON.stringify(schema|| {});
          }
          this.setData = function (key, val) {
              var lda = JSON.parse(localStorage[this.store]);
              doUpdate(ldta, key, val);
              localStorage[store] = JSON.stringify(ldta);
          };
          this.getData = function (key) {
              var ldta = JSON.parse(localStorage[this.store]);
              if (key) {
                  return pathGet(ldta, key);
              }
              return ldta;
          };
          this.reset = function (schema) {
              localStorage[this.store] = JSON.stringify(schema || {});
          };
          this.delete = function() {
              localStorage.removeItem(this.store);
          };
          var doUpdate = function (ob, kStr, val) {
              var kpth = keyStr.split('.'),
              i = 0, lstIdx = kpth.length - 1;
              for (;i < lstIdx; ++i) {
                  var key = kpth[i];
                  if (!(key in ob)) {
                      ob[key] = {};
                  }
                  ob = ob[key];
              }
              ob[kpth[lstIdx]] = val;
          };
          var pathGet = function (obj, key, leftOvrs) {
              if ( leftOvrs === undefined ) {
                  leftOvrs = key.split('.');
              }
              var cur = leftOvrs.shift();
              if ( typeof(obj) == 'object' && obj[cur] !== undefined ) {
                  if ( leftOvrs.length === 0 ) {
                      return obj[cur];
                  }
                  else if ( typeof(obj[cur]) == 'object' ) {
                      return arguments.callee(obj[cur], undefined, leftOvrs);
                  }
              }
              return null;
          };
      }
                
    • Public Snippets
    • Channels Snippets