Direct Link
Source code
| <html> |
| <head> |
| <title>teletype menu - Interactive DHTML art-demos</title> |
| <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> |
| <meta http-equiv="imagetoolbar" content="no"> |
| <style type="text/css"> |
| body { |
| background: #222; |
| overflow: hidden; |
| line-height: 18px; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| } |
| .node { |
| margin-left: 30px; |
| height: expression(0); /* IE only */ |
| } |
| .title { |
| position: relative; |
| background: #fff; |
| color: #000; |
| cursor: pointer; |
| } |
| .selected { |
| background: #f00; |
| color: #fff; |
| } |
| .hover { |
| background: #666; |
| color: #fff; |
| } |
| .content { |
| position: relative; |
| background: #000; |
| color: #fff; |
| } |
| .cursor { |
| background: #f00; |
| width: 10; |
| height: 8; |
| font-size: 12px; |
| } |
| #menu { |
| visibility: hidden; |
| position: absolute; |
| left: 1%; |
| top: 1%; |
| width: 98%; |
| height: 98%; |
| background: #000; |
| font-family: 'courier new', typewriter, matrix, monospace; |
| font-size: 12px; |
| overflow: hidden; |
| } |
| #up { |
| position:absolute; |
| right:0; |
| top:0; |
| color:#000; |
| background:#fff; |
| cursor:pointer; |
| font-family: 'courier new', typewriter, matrix, monospace; |
| font-size: 18px; |
| } |
| #down { |
| position:absolute; |
| right:0; |
| bottom:0; |
| color:#000; |
| background:#fff; |
| cursor:pointer; |
| font-family: 'courier new', typewriter, matrix, monospace; |
| font-size: 18px; |
| } |
| a { |
| text-decoration: none; |
| background: #888; |
| color: #000; |
| } |
| img { |
| border: none; |
| } |
| a:hover { |
| text-decoration: none; |
| background: #fff; |
| color: #000; |
| } |
| </style> |
| <script type="text/javascript"><!-- |
| // =========================================================== |
| // ------- old teletype menu ------- |
| // script: Gerard Ferrandez - Ge-1-doot - August 2005 |
| // http://www.dhteumeuleu.com |
| // =========================================================== |
| // |
| var menu, cMenu; |
| var cur = false; |
| var node = []; |
| var disp = []; |
| var toff = []; |
| var sD = false; |
| var sT = false; |
| var lD = "|/-\\"; |
| var cls = false; |
| var clt = false; |
| var dS = 1; |
| var sS = 200; |
| ///////////////////////////////////////////////////////////////////////////////////////// |
| // ---- create node prototype ---- |
| function Cnode(parent, theNode, level) |
| { |
| this.level = level; |
| this.child = []; |
| this.visibility = false; |
| this.N = node.length; |
| if (parent == 0) |
| { |
| // root |
| o = cMenu; |
| } |
| else |
| { |
| // set children |
| o = parent.span; |
| parent.child.push(this); |
| } |
| // create HTML elements |
| this.span = document.createElement("div"); |
| this.span.className = "node"; |
| if (theNode.title != "") |
| { |
| this.spanTitle = document.createElement("span"); |
| this.spanTitle.parent = this; |
| this.spanTitle.className = "title"; |
| this.spanTitle.onclick = new Function("sS=200;dS=1;node[" + this.N + "].click();"); |
| this.spanTitle.onmousedown = new Function("return false;"); |
| this.spanTitle.onmouseover = new Function("if(!this.parent.visibility)this.className='title hover'"); |
| this.spanTitle.onmouseout = new Function("if(!this.parent.visibility)this.className='title'"); |
| this.span.appendChild(this.spanTitle); |
| // split title (no HTML) |
| this.titleT = theNode.title.split(" "); |
| } |
| else |
| { |
| // no title |
| this.spanTitle = false; |
| this.visibility = true; |
| this.titleT = ""; |
| } |
| this.spanText = document.createElement("span"); |
| this.spanText.className = "content"; |
| this.span.appendChild(this.spanText); |
| o.appendChild(this.span); |
| // remove children nodes |
| var temp = theNode.cloneNode(true); |
| var ti = 24; |
| var li = 0; |
| var h = 0; |
| var href = ""; |
| var tg = ""; |
| for (var i = 0; i < temp.childNodes.length; i ++) |
| { |
| theNodeChild = temp.childNodes[i]; |
| if (theNodeChild.className == "node") |
| { |
| temp.removeChild(theNodeChild); |
| i --; |
| } |
| } |
| // split content (don't break HTML tags) |
| this.textT = []; |
| var i = 0; |
| var k = - 1; |
| var txt = temp.innerHTML + " "; |
| if (txt == " ") |
| { |
| this.textT.push(" "); |
| } |
| else |
| { |
| while (i < txt.length - 1 && k < 10) |
| { |
| c = txt.charAt(i); |
| m = i ? "" : this.spanTitle ? " " : ""; |
| if (c != " ") |
| { |
| do |
| { |
| c = txt.charAt(i); |
| if (c == "<") |
| { |
| j = txt.indexOf(">", i); |
| c = txt.substring(i, j + 1); |
| i = j; |
| // ---- hyperlink images |
| if (c.substring(0, 2).toLowerCase() == "<a") |
| { |
| tg = /target="(.*)" /.exec(c); |
| if (tg) tg = tg[1]; else |
| { |
| tg = /target=(.*)>/.exec(c); |
| if (tg) tg = tg[1]; |
| } |
| href = /href="(.*)"/.exec(c)[1]; |
| } |
| // ---- image |
| if (c.substring(0, 4).toLowerCase() == "<img") |
| { |
| var img = document.createElement("img"); |
| s = /src="(.*)"/.exec(c)[1]; |
| img.src = s; |
| var hs = Math.max(0, img.height - (h * 10)) / 16; |
| h = Math.round(img.height / 10); |
| // free space |
| for (var n = 0; n < hs; n ++) |
| { |
| c = "<br>"; |
| this.textT.push(c); |
| } |
| // href |
| var h1 = (href != "") ? "<a href='" + href + "'" + (tg ? " target ='" + tg + "'" : "") +">" : ""; |
| var h2 = (href != "") ? "</a>" : ""; |
| // download image |
| this.textT.push(h1); |
| for (var n = 0; n < 10; n ++) |
| { |
| c = h1 + "<img style='position:absolute;left:" + li + "px;top:" + 24 + "px;clip:rect(" + (n * h) + " auto " + ((n + 1) * h) + " auto)' src='" + s + "'>" + h2; |
| this.textT.push(c); |
| } |
| ti += h * 11; |
| li += img.width + 10; |
| } |
| } |
| m += c; |
| i ++; |
| k = 0; |
| } |
| while (c != " "); |
| href = ""; |
| c = "<br>"; |
| } |
| k ++; |
| if (m != "") |
| { |
| this.textT.push(m); |
| } |
| } |
| } |
| // ---- title click event ---- |
| this.click = function() |
| { |
| // clear node & children |
| function clearNode(theNode, clearTitle) |
| { |
| // recursive call |
| for (var i = theNode.child.length - 1; i >= 0; i --) |
| { |
| clearNode(theNode.child[i], true); |
| } |
| // clear selected style |
| theNode.spanTitle.className = "title"; |
| if (clearTitle) |
| { |
| // clear title |
| toff.push([theNode, 0]); |
| } |
| if (theNode.visibility) |
| { |
| // clear content |
| toff.push([theNode, 1]); |
| theNode.visibility = false; |
| } |
| } |
| // Node not being displayed |
| if (sD == false) |
| { |
| if ( ! this.visibility) |
| { |
| // style selected |
| this.spanTitle.className = "title selected"; |
| // ---- clear node |
| for (var i in node) |
| { |
| if (i != this.N && node[i].level == this.level && node[i].visibility) |
| { |
| clearNode(node[i], false); |
| } |
| } |
| // ---- display node |
| disp.push([this, 1]); // content |
| for (var i = 0, len = this.child.length; i < len; i ++) |
| { |
| disp.push([this.child[i], 0]); // children titles |
| } |
| this.visibility = true; |
| } |
| } |
| else |
| { |
| // waiting loop |
| setTimeout("node[" + this.N + "].click();", 64); |
| } |
| } |
| } |
| ///////////////////////////////////////////////////////////////////////////////////////// |
| // ---- display routine ---- |
| function screenUpdate() |
| { |
| // ---- display node ---- |
| if (sD != false) |
| { |
| // remove cursor |
| if (cur) |
| { |
| sD[0].removeChild(cur); |
| cur = false; |
| } |
| // insert loading sign |
| if (sD[3] && ! sD[2]) |
| { |
| cls = document.createElement("span"); |
| cls.data = "1"; |
| sD[0].appendChild(cls); |
| } |
| // display text |
| txt = document.createElement("span"); |
| txt.innerHTML = sD[1][sD[2] ++]; |
| if (sD[2] < sD[1].length) |
| { |
| txt.innerHTML += " "; |
| } |
| sD[0].appendChild(txt); |
| // cursor |
| cur = document.createElement("span"); |
| cur.className = "cursor"; |
| cur.innerHTML = " "; |
| sD[0].appendChild(cur); |
| // rotate loading sign |
| if (cls) |
| { |
| cls.innerHTML = " " + lD.charAt(sD[2] % 4); |
| } |
| // done |
| if (sD[2] >= sD[1].length) |
| { |
| if (cur) |
| { |
| sD[0].removeChild(cur); |
| cur = false; |
| } |
| if (cls) |
| { |
| cls.innerHTML = " >"; |
| cls = false; |
| } |
| sD = false; |
| } |
| } |
| else |
| { |
| // read buffer |
| if (disp[0] != undefined) |
| { |
| // something to display |
| p = disp.shift(); |
| sD = [ |
| p[1] ? p[0].spanText : p[0].spanTitle, |
| p[1] ? p[0].textT : p[0].titleT, |
| 0, |
| p[1] && p[0].spanTitle ? 1 : 0 |
| ]; |
| } |
| } |
| // ---- clear node ---- |
| if (sT != false) |
| { |
| if (sT.lastChild) |
| { |
| if (clt != false) |
| { |
| clt.innerHTML = (clt.innerHTML == " <") ? "·<" : " <"; |
| } |
| sT.removeChild(sT.lastChild); |
| } |
| else |
| { |
| sT = false; |
| } |
| } |
| else |
| { |
| // read buffer |
| if (toff[0] != undefined) |
| { |
| p = toff.shift(); |
| if ( ! p[0].spanTitle) |
| { |
| // do not clear node w/o title |
| sT = false; |
| } |
| else |
| { |
| // something to clear |
| sT = p[1] ? p[0].spanText: p[0].spanTitle; |
| // init unloading tag |
| clt = false; |
| if (sT.firstChild && sT.firstChild.data == "1") |
| { |
| clt = sT.firstChild; |
| clt.innerHTML = "·<"; |
| } |
| // unless not yet displayed |
| if (sT.innerHTML == "") |
| { |
| sT = false; |
| } |
| } |
| } |
| } |
| // auto-scrolling |
| menu.scrollTop+=dS*Math.round((menu.scrollHeight-menu.scrollTop+menu.offsetHeight)/sS); |
| // 15.625 hertz loop |
| setTimeout("screenUpdate()", 64); |
| } |
| ///////////////////////////////////////////////////////////////////////////////////////// |
| onload = function() |
| { |
| // ---- create node objects ---- |
| function setMenuTree(theNode, level, parent) |
| { |
| if (theNode.className == "node") |
| { |
| parent = new Cnode(parent, theNode, level ++); |
| node.push(parent); |
| } |
| // recursive call |
| for (var i = 0, len = theNode.childNodes.length; i < len; i ++) |
| { |
| setMenuTree(theNode.childNodes[i], level, parent); |
| } |
| } |
| // ---- initialize menu |
| menu = document.getElementById("menu"); |
| cMenu = document.createElement("span"); |
| setMenuTree(menu, 0, 0); |
| menu.innerHTML = ""; |
| menu.appendChild(cMenu); |
| menu.style.visibility = "visible"; |
| // ---- display titles |
| for (i in node) |
| { |
| if (node[i].level == 0) |
| { |
| disp.push([node[i], node[i].titleT != "" ? 0 : 1]); |
| } |
| } |
| screenUpdate(); |
| } |
| ///////////////////////////////////////////////////////////////////////////////////////// |
| //--> |
| </script> |
| </head> |
| <body> |
| <div id="menu"> |
| <span class="node"> |
| **** TELETYPE MENU V1 ****<br> |
| 16K RAM SYSTEM 7892 BASIC BYTES FREE<br> |
| READY.<br><br> |
| Hello. Please select an option: |
| <br><br> |
| </span> |
| <span class="node" title="[E-mail]"> |
| <span class="node" title="[Inbox]"> You have 3 messages waiting. |
| <span class="node" title="[Truman McCollum]"><br>I have always worried about my size. 3 months ago I found The Extender. I could not believe the results of this device. I am back to wearing it again and I'm still getting larger! My girlfriend says it is the best product I've ever bought.<br></span> |
| <span class="node" title="[Encyclopedic L. Rills]"><br>YOU'VE HEARD ABOUT IT<br>YOU'VE READ ABOUT IT<br>YOU'VE SEEN IT ON TV<br>AND NOW IT'S FINALLY HERE!<br>THE MOST EFFECTIVE WEIGHT-LOSS INGREDIENT EVER TO HIT THE MARKET IS NOW AVAILABLE FROM NITHRUTHON!!!!<br></span> |
| <span class="node" title="[Punitive H. Unpolluted]"><br>Get the Finest Rulex Watch Replica!<br>- Replicated to the Smallest Detail<br>- 98% Perfectly Accurate Markings<br>- perfect as a gift for your colleagues and friends<br>- free gift box<br>Make your order before the prices go up!!!!!<br> |
| </span> |
| </span> |
| <span class="node" title="[Outbox]"> |
| There are no items to show in this view. |
| </span> |
| </span> |
| <span class="node" title="[Images]"> |
| <span class="node" title="[My laptop]">Yes I know, I should upgrade... <img src="../images/80552_brd.gif"></span> |
| <span class="node" title="[Me]">404 error... <img src="../images/Foucault.gif"></span> |
| <span class="node" title="[colors]">Color schemes |
| <span class="node" title="[green]"><a target="_blank" href="http://www.dhteumeuleu.com"><img src="../images/03_green.gif"></a></span> |
| <span class="node" title="[olive]"><img src="../images/olive.gif"><img src="../images/olive.gif"></span> |
| <span class="node" title="[october]"><img src="../images/october2.gif"></span> |
| </span> |
| </span> |
| <span class="node" title="[Quotes]"> |
| <span class="node" title="[01]"> |
| And why use a GUI when you can perl -e '$n=1; while ($n++) {print "\n$n" if ("p" x $n) !~ /^((p)\2+)\1+$/ and "$n" eq reverse "$n"}'? |
| <span class="node" title="[run]">[an error occurred while processing this directive]</span> |
| </span> |
| <span class="node" title="[02]"> |
| Cogito cogito ergo cogito sum. I think that I think, therefore I think that I am. |
| </span> |
| <span class="node" title="[03]"> |
| Computer's rule: |
| <span class="node" title="[Rule #1]">My computer is always right, the human is always the problem ..</span> |
| <span class="node" title="[Rule #2]">See Rule #1</span> |
| </span> |
| </span> |
| <span class="node"> |
| --<br>Best viewed on my computer. |
| </span> |
| </div> |
| <div id="up" onclick="return false;" onmousedown="sS=50;dS=-1;return false;" onmouseup="dS=0;return false;">·</div> |
| <div id="down" onclick="return false;" onmousedown="sS=50;dS=1;return false;" onmouseup="dS=0;return false;">·</div> |
| </body> |
| </html> |
Recent Comments
December 29, 2011 (12:55)
November 22, 2011 (2:11)
August 10, 2010 (1:17)