added nineties-spacer

zinas · May 11, 2014 · 7c48917 · 7c48917
1 parent 5a589c0
commit 7c48917
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -15,46 +15,55 @@ Exactly because this is not meant to be used in any real website, all elements c
 ### 90s Welcome
 A very simple custom element. Anything you put inside the element, becomes an alert box.
 
-####Things that you can learn by reading the code
+#####Things that you can learn by reading the code
 - How do you register a custom element
 - How do you use html imports
 - How do you cope with unstyled content, while the element is being registered?
 - How do you use the equivalent of the "onload" event.
 
-####Usage
+#####Usage
 ```html
 <nineties-welcome>Hello there, Nikos!</nineties-welcome>
 ```
 
 ### 90s Under Construction
 Show an "Under Construction" animated icon, along with some custom text.
 
-####Things that you can learn by reading the code
+#####Things that you can learn by reading the code
 - Everything included in the 90s Welcome element
 - How to render content from a template
 - How to access elements inside an imported document
 - How to write styles specific for a template's contents
 - How to add nodes in the Shadow DOM
 
-####Usage
+#####Usage
 ```html
 <nineties-under-construction>This page is under construction!</nineties-under-construction>
 ```
 
 ### 90s Blink
 Makes the contents inside this element blink
 
-####Things that you can learn by reading the code
+#####Things that you can learn by reading the code
 - Everything included in the 90s Welcome element
 - How to handle parameters from custom attributes
 - How to handle change of attributes (try changing the value of data-duration from the console)
 
-####Usage
+#####Usage
 ```html
 <nineties-blink data-duration="500">Hello there!</nineties-blink>
 ```
 ### 90s Spacer
-_Not implemented yet_
+The infamous spacer.gif at your disposal
+
+#####Things that you can learn by reading the code
+- Everything included in the 90s Welcome element
+- How to extend an <img> element
+
+#####Usage
+```html
+<img is="nineties-spacer" width="300" height="200">
+```
 
 ### 90s Marquee
 _Not implemented yet_

diff --git a/nineties-spacer/index.html b/nineties-spacer/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>90s Spacer</title>
+
+ <!-- Importing Custom Elements -->
+ <link rel="import" href="nineties-spacer.html">
+
+ <style>
+ :unresolved {
+ display: none !important;
+ }
+ </style>
+</head>
+<body>
+
+ <!-- Using Custom Elements -->
+ <img is="nineties-spacer" width="300" height="200">
+
+</body>
+</html>
diff --git a/nineties-spacer/nineties-spacer.html b/nineties-spacer/nineties-spacer.html
@@ -0,0 +1,9 @@
+ <script>
+ var Spacer = Object.create(HTMLImageElement.prototype);
+
+ Spacer.createdCallback = function () {
+ this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+ }
+
+ document.registerElement('nineties-spacer', {prototype: Spacer, extends: 'img'});
+</script>