Need help against Darth Internet Explorer

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 455,964 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,609 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 997 | Replies: 0

•

Join Date: Jul 2006

Location: Middle America

Posts: 173

Reputation: tefflox is an unknown quantity at this point

Rep Power: 3

Solved Threads: 1

tefflox

Offline

Junior Poster

Need help against Darth Internet Explorer

Nov 21st, 2007

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 ::

Help with Code Tags

(Toggle Plain Text)

<!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">&nbsp;12</a> &bull; <a class="archives"  href="/11">&nbsp;11</a> &bull; <a class="archives"  href="/10">&nbsp;10</a> &bull; <a class="archives"  href="/09">&nbsp;09</a> &bull; <a class="archives"  href="/08">&nbsp;08</a> &bull; <a class="archives"  href="/07">&nbsp;07</a> &bull; <a class="archives"  href="/06">&nbsp;06</a> &bull; <a class="archives"  href="/05">&nbsp;05</a> &bull; <a class="archives"  href="/04">&nbsp;04</a> &bull; <a class="archives"  href="/03">&nbsp;03</a> &bull; <a class="archives"  href="/02">&nbsp;02</a> &bull; <a class="archives"  href="/01">&nbsp;01</a> &bull; <a class="archives"  href="/00">&nbsp;00</a></big>
  </div>

  <script type="text/javascript">
    setInterval("alterText();", 100);
    setInterval("alter();", 75);
    setInterval("alter();", 75);         
    </script>


</html>

<!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">&nbsp;12</a> &bull; <a class="archives"  href="/11">&nbsp;11</a> &bull; <a class="archives"  href="/10">&nbsp;10</a> &bull; <a class="archives"  href="/09">&nbsp;09</a> &bull; <a class="archives"  href="/08">&nbsp;08</a> &bull; <a class="archives"  href="/07">&nbsp;07</a> &bull; <a class="archives"  href="/06">&nbsp;06</a> &bull; <a class="archives"  href="/05">&nbsp;05</a> &bull; <a class="archives"  href="/04">&nbsp;04</a> &bull; <a class="archives"  href="/03">&nbsp;03</a> &bull; <a class="archives"  href="/02">&nbsp;02</a> &bull; <a class="archives"  href="/01">&nbsp;01</a> &bull; <a class="archives"  href="/00">&nbsp;00</a></big>
  </div>

  <script type="text/javascript">
    setInterval("alterText();", 100);
    setInterval("alter();", 75);
    setInterval("alter();", 75);         
    </script>


</html>