Skip to content
This repository has been archived by the owner on Apr 3, 2019. It is now read-only.

Commit

Permalink
Styling/packaging of demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@robnyman
robnyman committed Apr 9, 2013
1 parent d0f68a5 commit 2963ed2
Show file tree
Hide file tree
Showing 5 changed files with 524 additions and 417 deletions.
23 changes: 23 additions & 0 deletions touch-events/css/base.css
View file
@@ -0,0 +1,23 @@
#no-archive-api {
color: #f00;
display: none;
}

#error {
color: #f00;
display: none;
}

#drop-files {
height: 80px;
border: 1px dashed #000;
padding: 10px;
text-align: center;
}

#display-files li {
list-style: none;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
266 changes: 133 additions & 133 deletions touch-events/event-listener.html
View file
@@ -1,141 +1,141 @@
<!DOCTYPE html>
<html><head><meta charset=utf-8>
<title>Event listener</title>
<meta name="viewport" content="width=device-width">
<style>
html,body {
background: #eee;
color: #333;
font: 1em/1 Arial, sans; max-width: 45em;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event listener</title>
<link rel="stylesheet" type="text/css" href="../media/css/front.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<style>
output {
display: block;
padding: 1em;
font-size: 0.75em;
background: #ddd;
height: 20em;
overflow:auto;
}

output strong {
color: #f00;
text-decoration: underline;
}

h1 {
font-size: 1.2em;
}
button {
width: 100%;
height: 4rem;
margin: 0 0 1rem;
padding: 0.15rem 1.5rem;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #ddd;
background: -moz-linear-gradient(top, #eee 0%, #bbb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#bbb));
background: -webkit-linear-gradient(top, #eee 0%,#bbb 100%);
background: -o-linear-gradient(top, #eee 0%,#bbb 100%);
background: -ms-linear-gradient(top, #eee 0%,#bbb 100%);
background: linear-gradient(to bottom, #eee 0%,#bbb 100%);
border: 0.1rem solid #a6a6a6;
border-radius: 0.2rem;
font: 1.6rem/3.8rem Arial, Sans-serif;
color: #333;
text-align: center;
text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
text-decoration: none;
outline: none;
}

output {
display: block;
padding: 1em;
font-size: 0.75em;
background: #ddd;
height: 20em;
overflow:auto;
}
button:focus, button:hover {
border: 0.2rem solid #008aaa;
padding: 0 1.5rem;
}

output strong {
color: #f00;
text-decoration: underline;
}
button:active {
border-color: #008aaa;
background: #008aaa;
background: -moz-linear-gradient(top, #008aaa 0%, #00c7ea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008aaa), color-stop(100%,#00c7ea));
background: -webkit-linear-gradient(top, #008aaa 0%,#00c7ea 100%);
background: -o-linear-gradient(top, #008aaa 0%,#00c7ea 100%);
background: -ms-linear-gradient(top, #008aaa 0%,#00c7ea 100%);
background: linear-gradient(to bottom, #008aaa 0%,#00c7ea 100%);
color: #333;
}

button {
width: 100%;
height: 4rem;
margin: 0 0 1rem;
padding: 0.15rem 1.5rem;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #ddd;
background: -moz-linear-gradient(top, #eee 0%, #bbb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#bbb));
background: -webkit-linear-gradient(top, #eee 0%,#bbb 100%);
background: -o-linear-gradient(top, #eee 0%,#bbb 100%);
background: -ms-linear-gradient(top, #eee 0%,#bbb 100%);
background: linear-gradient(to bottom, #eee 0%,#bbb 100%);
border: 0.1rem solid #a6a6a6;
border-radius: 0.2rem;
font: 1.6rem/3.8rem Arial, Sans-serif;
color: #333;
text-align: center;
text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
text-decoration: none;
outline: none;
}
button::-moz-focus-inner {
border: none;
outline: none;
}
</style>
<script>
window.addEventListener('load', function() {
var t = 0;
var events = [
'MSPointerDown',
'MSPointerUp',
'MSPointerCancel',
'MSPointerMove',
'MSPointerOver',
'MSPointerOut',
'MSGotPointerCapture',
'MSLostPointerCapture',
'pointerdown',
'pointerup',
'pointercancel',
'pointermove',
'pointerover',
'pointerout',
'gotpointercapture',
'lostpointercapture',
'touchstart',
'touchmove',
'touchend',
'touchenter',
'touchleave',
'mouseover',
'mousemove',
'mouseout',
'mousedown',
'mouseup',
'focus',
'blur',
'click'
];
var b = document.getElementsByTagName('button')[0];
var o = document.getElementsByTagName('output')[0],
report = function(e) {
o.innerHTML += e.type;
if (t>0) {
if ((e.timeStamp-t)>150) {
o.innerHTML += ' (<strong>' + (e.timeStamp-t) + 'ms</strong>)';
} else {
o.innerHTML += ' (' + (e.timeStamp-t) + 'ms)';
}
}
t=e.timeStamp;
o.innerHTML += '<br>';
if (e.type == 'click') {
t=0;
}
}
for (var i=0; i<events.length; i++) {
b.addEventListener(events[i], report, false);
}
}, false);
</script>
</head>

button:focus, button:hover {
border: 0.2rem solid #008aaa;
padding: 0 1.5rem;
}
<body>

<h1>Event listener</h1>
<button class="button">Touch/hover/focus me!</button>
<output></output>

button:active {
border-color: #008aaa;
background: #008aaa;
background: -moz-linear-gradient(top, #008aaa 0%, #00c7ea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008aaa), color-stop(100%,#00c7ea));
background: -webkit-linear-gradient(top, #008aaa 0%,#00c7ea 100%);
background: -o-linear-gradient(top, #008aaa 0%,#00c7ea 100%);
background: -ms-linear-gradient(top, #008aaa 0%,#00c7ea 100%);
background: linear-gradient(to bottom, #008aaa 0%,#00c7ea 100%);
color: #333;
}

button::-moz-focus-inner {
border: none;
outline: none;
}
</style>
<script>
window.addEventListener('load', function() {
var t = 0;
var events = [
'MSPointerDown',
'MSPointerUp',
'MSPointerCancel',
'MSPointerMove',
'MSPointerOver',
'MSPointerOut',
'MSGotPointerCapture',
'MSLostPointerCapture',
'pointerdown',
'pointerup',
'pointercancel',
'pointermove',
'pointerover',
'pointerout',
'gotpointercapture',
'lostpointercapture',
'touchstart',
'touchmove',
'touchend',
'touchenter',
'touchleave',
'mouseover',
'mousemove',
'mouseout',
'mousedown',
'mouseup',
'focus',
'blur',
'click'
];
var b = document.getElementsByTagName('button')[0];
var o = document.getElementsByTagName('output')[0],
report = function(e) {
o.innerHTML += e.type;
if (t>0) {
if ((e.timeStamp-t)>150) {
o.innerHTML += ' (<strong>' + (e.timeStamp-t) + 'ms</strong>)';
} else {
o.innerHTML += ' (' + (e.timeStamp-t) + 'ms)';
}
}
t=e.timeStamp;
o.innerHTML += '<br>';
if (e.type == 'click') {
t=0;
}
}
for (var i=0; i<events.length; i++) {
b.addEventListener(events[i], report, false);
}
}, false);
</script>
</head><body>
<h1>Event listener</h1>
<button class="button">Touch/hover/focus me!</button>
<output></output>
</body></html>
</body>
</html>

0 comments on commit 2963ed2

Please sign in to comment.