├── README.markdown
├── css
└── style.css
├── favicon.ico
├── images
├── .DS_Store
├── copied.png
└── logo.png
├── index.html
└── js
├── ZeroClipboard.js
├── ZeroClipboard.swf
└── ipsum.js
/README.markdown:
--------------------------------------------------------------------------------
1 | # HTML-Ipsum
2 |
3 | Copy snippets of HTML-Code and paste them into your project.
4 | Visit http://www.html-ipsum.com/.
5 |
6 | Developed by Chris Coyier.
7 | Introduced in December 2008: https://css-tricks.com/new-site-html-ipsum/.
8 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | * { margin: 0; padding: 0; }
2 |
3 | body {
4 | font: 11px sans-serif;
5 | min-width: 910px;
6 | padding: 0 20px;
7 | }
8 |
9 | a { text-decoration: none; }
10 |
11 |
12 |
13 | /* Header */
14 | #header {
15 | height: 125px;
16 | background: #333;
17 | margin: 0 -20px;
18 | }
19 |
20 | #header h1 {
21 | width: 447px; height: 125px;
22 | margin: 0 0 0 15px;
23 | background: url(../images/logo.png) left center no-repeat;
24 | text-indent: -999em;
25 | }
26 |
27 | #extras { position: absolute; right: 0; top: 0; width: 125px; text-align: right; }
28 | #extras div { width: 125px; float: right; }
29 | #extras h2 { color: #f3c99b; }
30 | #extras a { font-family: Georgia, Serif; text-transform: uppercase; color: #fff; }
31 | #extras a:hover,
32 | #extras #bsa a:hover,
33 | #extras #bsa .adblock a:hover { background: #222; }
34 |
35 | #copied-notice {
36 | display: none;
37 | position: fixed; left: 50%; top: 50px; z-index: 9000;
38 | width: 250px; height: 79px;
39 | margin: -40px 0 0 -125px;
40 | background: url(../images/copied.png);
41 | text-indent: -9999px;
42 | }
43 |
44 |
45 |
46 | /* Form */
47 | textarea { width: 96%; border: none; margin: 5px; }
48 | fieldset { border: 1px solid #ccc; margin: 0 0 20px 0; }
49 | legend {
50 | padding: 3px 8px;
51 | border: 1px solid #ccc;
52 | margin: 0 0 10px 10px;
53 | font-weight: bold; letter-spacing: -1px; font-size: 20px;
54 | }
55 |
56 | .col { width: 32%; margin: 20px 2% 0 0; float: left; overflow: hidden; }
57 | .last { margin-right: 0; float: right; }
58 | #footer { background: #d15d00; padding: 30px; color: #fff; font-size: 20px;}
59 | #footer a { color: #fff; font-weight: bold; }
60 | #footer a:hover { text-decoration: underline; }
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chriscoyier/HTML-Ipsum/8fa4963b6326b47b96105f10afd3857e2b9bd4a9/favicon.ico
--------------------------------------------------------------------------------
/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chriscoyier/HTML-Ipsum/8fa4963b6326b47b96105f10afd3857e2b9bd4a9/images/.DS_Store
--------------------------------------------------------------------------------
/images/copied.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chriscoyier/HTML-Ipsum/8fa4963b6326b47b96105f10afd3857e2b9bd4a9/images/copied.png
--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chriscoyier/HTML-Ipsum/8fa4963b6326b47b96105f10afd3857e2b9bd4a9/images/logo.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | HTML-Ipsum
6 |
7 |
8 |
9 |
10 |
11 |
17 |
18 |
19 |
23 |
24 |
28 |
29 |
33 |
34 |
47 |
48 |
49 |
50 |
58 |
59 |
68 |
69 |
77 |
78 |
90 |
91 |
92 |
93 |
123 |
124 |
166 |
167 |
200 |
201 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
--------------------------------------------------------------------------------
/js/ZeroClipboard.js:
--------------------------------------------------------------------------------
1 | // Simple Set Clipboard System
2 | // Author: Joseph Huckaby
3 |
4 | var ZeroClipboard = {
5 |
6 | version: "1.0.4",
7 | clients: {}, // registered upload clients on page, indexed by id
8 | moviePath: 'js/ZeroClipboard.swf', // URL to movie
9 | nextId: 1, // ID of next movie
10 |
11 | $: function(thingy) {
12 | // simple DOM lookup utility function
13 | if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
14 | if (!thingy.addClass) {
15 | // extend element with a few useful methods
16 | thingy.hide = function() { this.style.display = 'none'; };
17 | thingy.show = function() { this.style.display = ''; };
18 | thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; };
19 | thingy.removeClass = function(name) {
20 | this.className = this.className.replace( new RegExp("\\s*" + name + "\\s*"), " ").replace(/^\s+/, '').replace(/\s+$/, '');
21 | };
22 | thingy.hasClass = function(name) {
23 | return !!this.className.match( new RegExp("\\s*" + name + "\\s*") );
24 | }
25 | }
26 | return thingy;
27 | },
28 |
29 | setMoviePath: function(path) {
30 | // set path to ZeroClipboard.swf
31 | this.moviePath = path;
32 | },
33 |
34 | dispatch: function(id, eventName, args) {
35 | // receive event from flash movie, send to client
36 | var client = this.clients[id];
37 | if (client) {
38 | client.receiveEvent(eventName, args);
39 | }
40 | },
41 |
42 | register: function(id, client) {
43 | // register new client to receive events
44 | this.clients[id] = client;
45 | },
46 |
47 | getDOMObjectPosition: function(obj) {
48 | // get absolute coordinates for dom element
49 | var info = {
50 | left: 0,
51 | top: 0,
52 | width: obj.width ? obj.width : obj.offsetWidth,
53 | height: obj.height ? obj.height : obj.offsetHeight
54 | };
55 |
56 | while (obj) {
57 | info.left += obj.offsetLeft;
58 | info.top += obj.offsetTop;
59 | obj = obj.offsetParent;
60 | }
61 |
62 | return info;
63 | },
64 |
65 | Client: function(elem) {
66 | // constructor for new simple upload client
67 | this.handlers = {};
68 |
69 | // unique ID
70 | this.id = ZeroClipboard.nextId++;
71 | this.movieId = 'ZeroClipboardMovie_' + this.id;
72 |
73 | // register client with singleton to receive flash events
74 | ZeroClipboard.register(this.id, this);
75 |
76 | // create movie
77 | if (elem) this.glue(elem);
78 | }
79 | };
80 |
81 | ZeroClipboard.Client.prototype = {
82 |
83 | id: 0, // unique ID for us
84 | ready: false, // whether movie is ready to receive events or not
85 | movie: null, // reference to movie object
86 | clipText: '', // text to copy to clipboard
87 | handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor
88 | cssEffects: true, // enable CSS mouse effects on dom container
89 | handlers: null, // user event handlers
90 |
91 | glue: function(elem) {
92 | // glue to DOM element
93 | // elem can be ID or actual DOM element object
94 | this.domElement = ZeroClipboard.$(elem);
95 |
96 | // float just above object, or zIndex 99 if dom element isn't set
97 | var zIndex = 99;
98 | if (this.domElement.style.zIndex) {
99 | zIndex = parseInt(this.domElement.style.zIndex) + 1;
100 | }
101 |
102 | // find X/Y position of domElement
103 | var box = ZeroClipboard.getDOMObjectPosition(this.domElement);
104 |
105 | // create floating DIV above element
106 | this.div = document.createElement('div');
107 | var style = this.div.style;
108 | style.position = 'absolute';
109 | style.left = '' + box.left + 'px';
110 | style.top = '' + box.top + 'px';
111 | style.width = '' + box.width + 'px';
112 | style.height = '' + box.height + 'px';
113 | style.zIndex = zIndex;
114 |
115 | // style.backgroundColor = '#f00'; // debug
116 |
117 | var body = document.getElementsByTagName('body')[0];
118 | body.appendChild(this.div);
119 |
120 | this.div.innerHTML = this.getHTML( box.width, box.height );
121 | },
122 |
123 | getHTML: function(width, height) {
124 | // return HTML for movie
125 | var html = '';
126 | var flashvars = 'id=' + this.id +
127 | '&width=' + width +
128 | '&height=' + height;
129 |
130 | if (navigator.userAgent.match(/MSIE/)) {
131 | // IE gets an OBJECT tag
132 | var protocol = location.href.match(/^https/i) ? 'https://' : 'http://';
133 | html += '';
134 | }
135 | else {
136 | // all other browsers get an EMBED tag
137 | html += '';
138 | }
139 | return html;
140 | },
141 |
142 | hide: function() {
143 | // temporarily hide floater offscreen
144 | if (this.div) {
145 | this.div.style.left = '-2000px';
146 | }
147 | },
148 |
149 | show: function() {
150 | // show ourselves after a call to hide()
151 | this.reposition();
152 | },
153 |
154 | destroy: function() {
155 | // destroy control and floater
156 | if (this.domElement && this.div) {
157 | this.hide();
158 | this.div.innerHTML = '';
159 |
160 | var body = document.getElementsByTagName('body')[0];
161 | try { body.removeChild( this.div ); } catch(e) {;}
162 |
163 | this.domElement = null;
164 | this.div = null;
165 | }
166 | },
167 |
168 | reposition: function(elem) {
169 | // reposition our floating div, optionally to new container
170 | // warning: container CANNOT change size, only position
171 | if (elem) {
172 | this.domElement = ZeroClipboard.$(elem);
173 | if (!this.domElement) this.hide();
174 | }
175 |
176 | if (this.domElement && this.div) {
177 | var box = ZeroClipboard.getDOMObjectPosition(this.domElement);
178 | var style = this.div.style;
179 | style.left = '' + box.left + 'px';
180 | style.top = '' + box.top + 'px';
181 | }
182 | },
183 |
184 | setText: function(newText) {
185 | // set text to be copied to clipboard
186 | this.clipText = newText;
187 | if (this.ready) this.movie.setText(newText);
188 | },
189 |
190 | addEventListener: function(eventName, func) {
191 | // add user event listener for event
192 | // event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel
193 | eventName = eventName.toString().toLowerCase().replace(/^on/, '');
194 | if (!this.handlers[eventName]) this.handlers[eventName] = [];
195 | this.handlers[eventName].push(func);
196 | },
197 |
198 | setHandCursor: function(enabled) {
199 | // enable hand cursor (true), or default arrow cursor (false)
200 | this.handCursorEnabled = enabled;
201 | if (this.ready) this.movie.setHandCursor(enabled);
202 | },
203 |
204 | setCSSEffects: function(enabled) {
205 | // enable or disable CSS effects on DOM container
206 | this.cssEffects = !!enabled;
207 | },
208 |
209 | receiveEvent: function(eventName, args) {
210 | // receive event from flash
211 | eventName = eventName.toString().toLowerCase().replace(/^on/, '');
212 |
213 | // special behavior for certain events
214 | switch (eventName) {
215 | case 'load':
216 | // movie claims it is ready, but in IE this isn't always the case...
217 | // bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function
218 | this.movie = document.getElementById(this.movieId);
219 | if (!this.movie) {
220 | var self = this;
221 | setTimeout( function() { self.receiveEvent('load', null); }, 1 );
222 | return;
223 | }
224 |
225 | // firefox on pc needs a "kick" in order to set these in certain cases
226 | if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
227 | var self = this;
228 | setTimeout( function() { self.receiveEvent('load', null); }, 100 );
229 | this.ready = true;
230 | return;
231 | }
232 |
233 | this.ready = true;
234 | this.movie.setText( this.clipText );
235 | this.movie.setHandCursor( this.handCursorEnabled );
236 | break;
237 |
238 | case 'mouseover':
239 | if (this.domElement && this.cssEffects) {
240 | this.domElement.addClass('hover');
241 | if (this.recoverActive) this.domElement.addClass('active');
242 | }
243 | break;
244 |
245 | case 'mouseout':
246 | if (this.domElement && this.cssEffects) {
247 | this.recoverActive = false;
248 | if (this.domElement.hasClass('active')) {
249 | this.domElement.removeClass('active');
250 | this.recoverActive = true;
251 | }
252 | this.domElement.removeClass('hover');
253 | }
254 | break;
255 |
256 | case 'mousedown':
257 | if (this.domElement && this.cssEffects) {
258 | this.domElement.addClass('active');
259 | }
260 | break;
261 |
262 | case 'mouseup':
263 | if (this.domElement && this.cssEffects) {
264 | this.domElement.removeClass('active');
265 | this.recoverActive = false;
266 | }
267 | break;
268 | } // switch eventName
269 |
270 | if (this.handlers[eventName]) {
271 | for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) {
272 | var func = this.handlers[eventName][idx];
273 |
274 | if (typeof(func) == 'function') {
275 | // actual function reference
276 | func(this, args);
277 | }
278 | else if ((typeof(func) == 'object') && (func.length == 2)) {
279 | // PHP style object + method, i.e. [myObject, 'myMethod']
280 | func[0][ func[1] ](this, args);
281 | }
282 | else if (typeof(func) == 'string') {
283 | // name of function
284 | window[func](this, args);
285 | }
286 | } // foreach event handler defined
287 | } // user defined handler for event
288 | }
289 |
290 | };
--------------------------------------------------------------------------------
/js/ZeroClipboard.swf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chriscoyier/HTML-Ipsum/8fa4963b6326b47b96105f10afd3857e2b9bd4a9/js/ZeroClipboard.swf
--------------------------------------------------------------------------------
/js/ipsum.js:
--------------------------------------------------------------------------------
1 | $("legend").each(function() {
2 |
3 | var clip = new ZeroClipboard.Client();
4 | var thisObj = $(this);
5 | clip.glue(thisObj[0]);
6 | var txt = $(this).parent().find("textarea").text();
7 | clip.setText(txt);
8 |
9 | clip.addEventListener('complete', function(client, text) {
10 | $("#copied-notice").fadeIn(500, function(){
11 | $(this).fadeOut(500);
12 | });
13 | });
14 |
15 | });
--------------------------------------------------------------------------------