-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (119 loc) · 4.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frontend Playground</title>
<meta name="description" content="An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.">
<meta name="author" content="Hakim El Hattab">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="reveal.js/css/reset.css">
<link rel="stylesheet" href="reveal.js/css/main.css">
<link rel="stylesheet" href="reveal.js/lib/zenburn.css">
<link rel="stylesheet" type="text/css" href="css/playground.css">
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
</head>
<body>
<div id="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Playground</h1>
<h3 class="inverted">My JS, CSS and HTML5 Playground</h3>
<script>
// Delicously hacky. Look away.
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
</script>
</section>
<section>
<h2>form</h2>
<p class="formLayout">
<label for="title_small">Title small</label>
<input type="text" id="title_small" class="master" placeholder="Type here"></input>
<br>
<label for="title_medium">Title medium</label>
<input type="text" id="title_medium" class="slave"></input>
<input type="button" id="reset_medium" value="reset"></input>
<br>
<label for="title_long">Title long</label>
<input type="text" id="title_long" class="slave"></input>
<input type="button" id="reset_long" value="reset"></input>
<br>
<input type="button" value="save">
</p>
<script>
YUI().use('node', function (Y) {
var titleSmall = Y.one('#title_small');
Y.all('.formLayout input').on('keyup', function(e){
if(e.target.hasClass('slave')){
e.target.removeClass('slave');
}
});
function reset(button, input){
Y.one(button).on('click', function(e){
var inputNode = Y.one(input);
inputNode.set('value','');
inputNode.set('placeholder',titleSmall.get('value'));
});
}
reset('#reset_medium','#title_medium');
reset('#reset_long','#title_long');
Y.one('.master').on('keyup', function(e){
Y.all('.slave').set('placeholder',e.target.get('value'));
});
/*
titleSmall.on('keyup', function(e){
Y.all('input.slave').set('value', e.target.get('value'));
})
Y.all('input[name="edit"]').on('click', function(e){
var value = e.target.get('value');
var textInput = Y.one('#'+value)
if(textInput.hasAttribute('disabled')){
textInput.removeAttribute('disabled');
} else{
textInput.setAttribute('disabled');
textInput.set('value',titleSmall.get('value'));
}
});*/
});
</script>
</section>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">◄</a>
<a class="right" href="#">►</a>
<a class="up" href="#">▲</a>
<a class="down" href="#">▼</a>
</aside>
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
</div>
<script src="reveal.js/js/reveal.js"></script>
<script src="reveal.js/lib/highlight.js"></script>
<script>
// Parse the query string into a key/value object
var query = {};
location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} );
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,
// Display a presentation progress bar
progress: true,
// If true; each slide will be pushed to the browser history
history: true,
// Flags if mouse wheel navigation should be enabled
mouseWheel: true,
// Apply a 3D roll to links on hover
rollingLinks: true,
// UI style
theme: query.theme || 'default', // default/neon
// Transition style
transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
});
hljs.initHighlightingOnLoad();
</script>
</body>
</html>