Resources for learning web design & front-end development:
ONLINE
Design
nathansmith
/ detect_full_screen.html
Created
May 18, 2011 15:42
Detect full-screen mode for desktop browsers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Detect Full-Screen</title> | |
| <style> | |
| * { | |
| font-family: sans-serif; | |
| line-height: 1.5; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($, window, undefined) { | |
| $.widget("mobile.instantsearch", $.mobile.widget, { | |
| si: undefined, //search inupt | |
| rd: undefined, //result div | |
| timeout: undefined, | |
| options: { | |
| delay: 500 | |
| }, | |
| _init: function() { | |
| this.rd= $("<div>"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = (function(){ | |
| const MS = | |
| { seconds: 1000 | |
| , minutes: 60 * 1000 | |
| , hours: 60 * 60 * 1000 | |
| , days: 24 * 60 * 60 * 1000 | |
| , weeks: 7 * 24 * 60 * 60 * 1000 | |
| , months: 30 * 7 * 24 * 60 * 60 * 1000 | |
| , years: 365 * 24 * 60 * 60 * 1000 } |
rwaldron
/ popcorn.html
Created
June 2, 2011 21:52
A smallish Popcorn.js example. Check it live: http://jsfiddle.net/rwaldron/m94Tn/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script> | |
| <script> | |
| // ensure the DOM has loaded | |
| document.addEventListener("DOMContentLoaded", function () { | |
| // Create a popcporn instance by calling Popcorn("#id-of-my-video") |
nathansmith
/ web-design-development-learning-resources.md
Last active
August 2, 2025 01:31
Resources for learning web design & front-end development
atk
/ LICENSE.txt
Created
June 19, 2011 15:45
— forked from 140bytes/LICENSE.txt
polyfill an ES5-compatible Array.prototype.indexOf
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 Alex Kloss <[email protected]> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE |
alexgibson
/ Touch-Event-Delegation.js
Created
July 6, 2011 19:38
Event delegation for JavaScript 'tap' events
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var tapArea, moved, startX, startY; | |
| tapArea = document.querySelector('#list'); //the element to delegate | |
| moved = false; //flags if the finger has moved | |
| startX = 0; //starting x coordinate | |
| startY = 0; //starting y coordinate | |
| //touchstart | |
| tapArea.ontouchstart = function(e) { | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* See http://cl.ly/8KmQ for an example */ | |
| hr { | |
| margin: 15px 0; | |
| position: relative; | |
| border: 1px solid transparent; | |
| .box-shadow(0, 1px, 2px, rgba(0,0,0,0.3)); | |
| &:before, &:after { | |
| content: ""; |
benschwarz
/ index.html
Last active
November 6, 2023 21:10
Using ARIA roles with <header>, <footer> and <aside>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <body> | |
| <header role="banner"> | |
| <a href="/" rel="home">My company</a> | |
| <nav role="navigation"> | |
| <a href="/about">About</a> | |
| <a href="/contact">Contact</a> | |
| </nav> | |
| </header> |
addyosmani
/ vendorPrefix.js
Created
August 8, 2011 06:13
— forked from danheberden/vendorPrefix.js
Get the vendor prefix for a property in a specific context.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function getPrefix(prop, context) { | |
| var vendorPrefixes = ['moz', 'webkit', 'khtml', 'o', 'ms'], | |
| upper = prop.charAt(0).toUpperCase() + prop.slice(1), | |
| pref, len = vendorPrefixes.length, | |
| q; | |
| while (len--) { | |
| q = vendorPrefixes[len]; | |
| if (context.toString().indexOf('style')) { | |
| q = q.charAt(0).toUpperCase() + q.slice(1); |