Please take a look at Listenlight.net. It works perfectly in Firefox 2 (at least on my computer), but I get very discouraging reports that it breaks IE -- but what doesn't?
Anyhow, I would like the flashy "live text" effects to work in IE, but I am only ankle-deep in javascript at the moment, have never toiled for Darth Internet Explorer. But, here I am :-(
I run linux exclusively, and I'm not happy to research installing any microsoft warez on my computer, but if I must, I must. Listenlight.net is a sort of developing portfolio, so it needs to work for all viewers.
Also, I suspect a memory leak (whatever that means), so if you spot a bomb in my code, please help me out.
In case of confusion, there is a video on my blog of how it should work -- http://denacht.blogspot.com.
The inner pages employ this function :: setTimeout("setInterval('fx()', t)", t2); ... which I am told is bad practice. Tho it works in firefox 2. Should I do that a better way?
Thanks.
I love you people :-)
Page source ::
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="listenlight poetry journal" />
<meta name="keywords" content="poetry" />
<title>listenlight poetry journal</title>
<style type="text/css">
body {
background-image: url('/13/default.png');
background-repeat: repeat; font-size: x-large;
font-weight: bold;font-family: Tahoma, Geneva, Sans-Serif;
letter-spacing: 3px;
line-height: 1.2;
}
#banner {
position: absolute; bottom: 55%; left: 1%; right: 1%;
text-align: center;
font-family: Tahoma, Geneva, Sans-Serif;
letter-spacing: 10px;
}
a.archives:link {
color: pink; text-decoration: none; outline: none; opacity: 0.3;
font-size: 80%; font-weight: bold; font-family: Tahoma, Geneva, sans-serif;
}
a.archives:visited {
color: pink; text-decoration: none; outline: none; opacity: 0.3;
font-size: 80%; font-weight: bold; font-family: Tahoma, Geneva, sans-serif;
}
a.archives:active {
color: pink; text-decoration: none; outline: none; opacity: 0.3;
font-size: 80%; font-weight: bold; font-family: Tahoma, Geneva, sans-serif;
}
a.archives:hover {
color: black; text-decoration: none; outline: none; opacity: 0.3; font-variant: small-caps;
font-size: 70%; letter-spacing: 15px; background-color: pink; font-weight: bold; font-family: Tahoma, Geneva, sans-serif;
}
</style>
<script type="text/javascript">
colors = new Array(14)
colors[0]="0"
colors[1]="1"
colors[2]="2"
colors[3]="3"
colors[4]="4"
colors[5]="5"
colors[5]="6"
colors[6]="7"
colors[7]="8"
colors[8]="9"
colors[9]="a"
colors[10]="b"
colors[11]="c"
colors[12]="d"
colors[13]="e"
colors[14]="f"
function genTextHex(){
digit = new Array(5)
colorStart="#"
for (j = 0; j < 1; j++){
color = colors[6 + Math.round(Math.random() * 7)]
+ colors[6 + Math.round(Math.random() * 7)]
+ colors[6 + Math.round(Math.random() * 7)]
+ ";";
}
return colorStart + color;
}
function genHex(){
colorStart="#"
var r = colors[6 + Math.round(Math.random() * 8)]
var g = colors[6 + Math.round(Math.random() * 8)]
var b = colors[6 + Math.round(Math.random() * 8)]
return colorStart + r + g + b + ";";
}
function alter() {
i = Math.round(Math.random() * 23);
document.getElementById(i).style.color=genHex();
}
var letter = 0;
function alterText() {
document.getElementById(letter).style.visibility="visible";
document.getElementById(letter).style.fontSize=Math.round(140 + Math.random() * 100) + "%";
document.getElementById(letter++).style.color=genHex();
}
</script>
<?php
function line($str) {
for($i = 0, $n = 0; $str[$i] != ""; $i++, $n++) {
if($str[$i] == "|") {
echo "<br/>";
continue;
}
echo ("<span id=\"".$n."\">".$str[$i]."</span>");
}
}
function text($str) {
for($i = 0, $n = 100; $str[$i] != ""; $i++, $n++) {
if($str[$i] == "|") {
echo "<br/>";
$i++;
}
echo ("<span id=\"".$n."\">".$str[$i]."</span>");
}
}
?>
</head>
<body>
<div id="banner">
<a style="text-decoration:none; outline: none" href="/13/iijima">
<?php
function color() {
// $clr = array( 0 => 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f');
// $c = "#" . $clr[rand(8, 12)].$clr[rand(8, 12)].$clr[rand(8, 12)] . ";";
// return $c;
return "black";
}
$i = 0; $n = 0;
$str = "listenlightpoetryjournal";
while($str[$i] != "") {
echo("<span id=\"".$n++."\" style=\"position:relative; visibility: hidden; font-size: normal; top:".(rand(-20, 20))."px; color:".color()."\">".$str[$i]."</span>");
$i++;
}
?>
</a>
</div>
<div style="position:absolute; bottom: 15%; left: 10%; right: 10%; text-align:left; color: darkkhaki; font-size: small; letter-spacing: 2px; border: 1px solid cornflowerblue; padding: 1.5em;">
<br/>Issue 13 for December 2007
<br/>Editors Jesse Crockett and Guillermo Parra
<br/>Address query or submitted work to jesse -at listenlight.net
<br/>
<br/>Archive Issues <big><a class="archives" href="/12"> 12</a> • <a class="archives" href="/11"> 11</a> • <a class="archives" href="/10"> 10</a> • <a class="archives" href="/09"> 09</a> • <a class="archives" href="/08"> 08</a> • <a class="archives" href="/07"> 07</a> • <a class="archives" href="/06"> 06</a> • <a class="archives" href="/05"> 05</a> • <a class="archives" href="/04"> 04</a> • <a class="archives" href="/03"> 03</a> • <a class="archives" href="/02"> 02</a> • <a class="archives" href="/01"> 01</a> • <a class="archives" href="/00"> 00</a></big>
</div>
<script type="text/javascript">
setInterval("alterText();", 100);
setInterval("alter();", 75);
setInterval("alter();", 75);
</script>
</html>