Javascript breaks IE - please help.

Question

tefflox 2 Junior Poster

16 Years Ago

The site: , does not work in IE. The javascript is really pretty simple, I think, so I will appreciate any and all help to get it accommodated for IE. The page views are way down, when they should be way up, given the design.

Thanks.

Also, as an off chance, I'm having no luck on programmer meets designer. So, if you like what you see on listenlight, take a look at gravityway.com (or my blog, denacht.blogspot.com), and decide if you'll want to team up and try to break a bank on facebook :-)

Apparently they offer a course on it in Stanford :-\

javascript

2 Contributors
21 Replies
176 Views
2 Days Discussion Span
Latest Post 16 Years Ago Latest Post by tefflox

All 21 Replies

hielo 65 Veteran Poster

16 Years Ago

No, it does not really work on FF either. There are tons of errors getting triggered and never stopping. These are all because you are not clearing the timeouts you are setting. Since the phrase contains 23 letters, you are not supposed to stop calling the timeout functions after letter 23. These should work across browsers.

<!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.firefox:link      {color: skyblue; text-decoration: none; outline: none; cursor: default;}
  a.firefox:visited   {color: skyblue; text-decoration: none; outline: none; cursor: default;}
  a.firefox:active    {color: skyblue; text-decoration: none; outline: none; cursor: default;}
  a.firefox:hover     {color: darkblue; background-color: skyblue; text-decoration: none; outline: none; cursor: default;}
  
  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;
   } 
   .letter{position:relative; visibility: hidden; font-size: normal;  color:black;}
    </style>     
  
  <script type="text/javascript">
  var timer=[];
  	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(){
  
  	colorStart="#"
  	for (j = 0; j == 0; j++){
      color = colors[6 + Math.floor(Math.random() * 7)] 
            + colors[6 + Math.floor(Math.random() * 7)]
            + colors[6 + Math.floor(Math.random() * 7)]
            + ";";
  	}
  	return colorStart + color;
  }

  function genHex() {

  	colorStart="#"
  	var r = colors[6 + Math.floor(Math.random() * 8)] 
  	var g = colors[6 + Math.floor(Math.random() * 8)] 
  	var b = colors[6 + Math.floor(Math.random() * 8)] 

  	return colorStart + r + g + b + "";
  }


  function alter() {
   	i = Math.floor(Math.random() * 24);
	
  	document.getElementById("L"+i).style.color=genHex();	
   }

  var letter = 0;
  
  function alterText() {

    document.getElementById("L"+letter).style.visibility="visible";
    document.getElementById("L"+letter).style.fontSize=Math.floor(140 + Math.random() * 100) + "%";  	  	   
    document.getElementById("L"+letter).style.color=genHex();
    letter++; 
     if(letter>23)
	{
		clearTimeout(timer[0]);
		clearTimeout(timer[1]);
		clearTimeout(timer[2]);
	}  
   }


  </script>


</head>
<body>

<div id="banner">
  <a style="text-decoration:none; outline: none" href="/13/iijima">

<span id="L0" class="letter" style="top:16px;">l</span><span id="L1" class="letter" style="top:-5px;">i</span><span id="L2" class="letter" style="top:7px; ">s</span><span id="L3" class="letter" style="top:-11px;">t</span><span id="L4" class="letter" style="top:10px;">e</span><span id="L5" class="letter" style="top:-3px;">n</span><span id="L6" class="letter" style="top:4px;">l</span><span id="L7" class="letter" style="top:-8px;">i</span><span id="L8" class="letter" style="top:15px;">g</span><span id="L9" class="letter" style="top:11px;">h</span><span id="L10" class="letter" style="top:-12px;">t</span><span id="L11" class="letter" style="top:8px;">p</span><span id="L12" class="letter" style="top:14px;">o</span><span id="L13" class="letter" style="top:6px;">e</span><span id="L14" class="letter" style="top:1px;">t</span><span id="L15" class="letter" style="top:-16px;">r</span><span id="L16" class="letter" style="top:0px;">y</span><span id="L17" class="letter" style="top:-9px;">j</span><span id="L18" class="letter" style="top:-10px;">o</span><span id="L19" class="letter" style="top:-2px;">u</span><span id="L20" class="letter" style="top:-18px;">r</span><span id="L21" class="letter" style="top:17px;">n</span><span id="L22" class="letter" style="top:3px;">a</span><span id="L23" class="letter" style="top:11px;">l</span>  </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>

<div style="position:absolute; top: 88%; left: 12%; right: 12%; opacity: 0.5; line-height: 1.3em; text-align: left; color: darkkhaki; font-size: x-small; font-variant: bold; letter-spacing: 2px; border: 1px solid darkkhaki; padding: 1.2em; font-family: Tahoma, Geneva, Sans-Serif;">
       Listenlight 13 has not been optimized for the Internet Explorer web browser.
  <br/>To obtain a Web Standards Compliant browser, please visit <big><a class="firefox" style="opacity: 0.7; border-bottom: 2px solid cornflowerblue;" href="http://www.mozilla.org">&nbsp;www.mozilla.org&nbsp;</a></big>
  </div>

  <script type="text/javascript">
  window.onload=function(){
    		timer[0]=setInterval("alterText();", 110);
    		timer[1]=setInterval("alter();", 100);
	   	timer[3]=setInterval("alter();", 100);         
	}
    </script>

  	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  			</script>

  			
  		<script type="text/javascript">
  			_uacct = "UA-493923-1";
  			urchinTracker();
  			</script>
</body>
</html>

hielo 65 Veteran Poster

16 Years Ago

/*
colors is just a list of the possible hexadecimal representation of the color values.
Basically all you have here is a look-up table.
*/
  	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"

/*
after this comment, you just encountered your first function definition. It has not been called
yet, but when it does:

this function will generate a random color code. Any single "digit" will be at least 6 and 
at most d.
For example:
#7689da;

The only error here is that trailing semicolon. Why? because later on you are assigning
 that color to a particular letter, but when you assign these css values via javascript,
they may not contain the ending semicolon. The semicolon is required only in css stylesheets
or <style type="text/css">...</style> blocks to delimit one property from the other. Since in
javascript you can only set/specify one property at a time, there is no need for the trailing
semicolon. As a result, you will get runtime errors because it is an unexpected character on the
property value.
*/
  function genTextHex(){
  
  	colorStart="#"
  	for (j = 0; j == 0; j++){
      color = colors[6 + Math.floor(Math.random() * 7)] 
            + colors[6 + Math.floor(Math.random() * 7)]
            + colors[6 + Math.floor(Math.random() * 7)]
            + ";";
  	}
  	return colorStart + color;
  }

/*
after this comment, you encounter your second function definition. It has not been called yet
either, but when it does:
Like the previous function this also generates a hex color string.
The range of colors is slightly different. Starts out at 6 and ends at e
#86e9ed;
again, the trailing semicolon would be problematic if assigning the result to a css property 
via javascript.
*/
  function genHex() {

  	colorStart="#"
  	var r = colors[6 + Math.floor(Math.random() * 8)] 
  	var g = colors[6 + Math.floor(Math.random() * 8)] 
  	var b = colors[6 + Math.floor(Math.random() * 8)] 

  	return colorStart + r + g + b + ";";
  }

/*
like before, here is another function definition which has not been called yet.
this function is simply altering/setting the color for one random letter at a time.
"i" is a random integer which is at least 0 and at most 23. It represents one
of your 23 letters.
*/
  function alter() {
   	i = Math.floor(Math.random() * 24);
  	document.getElementById(i).style.color=genHex();	
   }


//here you are just defining/specifying the default letter
  var letter = 0;

/*
like before, here is another function definition which has not been called yet.
this funtion changes the following css properties for the specified letter:
visibility,fontSize,color
if you notice, the last line here calls genHex() which returns a string similar to "#86e9ed;"
That trailing semicolon would be a problem here. That's why you need to get rid of it.
*/  
  function alterText() {
    document.getElementById(letter).style.visibility="visible";
    document.getElementById(letter).style.fontSize=Math.floor(140 + Math.random() * 100) + "%";  	  	   
    document.getElementById(letter++).style.color=genHex(); 	  
   }


  


/*
this is the point where the above functions get  called for the first time. So your analysis
should start here.

First of all, setInterval() takes at least two arguments, the first one is a function that it will
call repeatedly. The second argument is the number of milliseconds between each call.
So, if you wanted to call alterText every 5 seconds, the second argument shoud be 5000!

With this in mind, this is what your first setInterval is doing every .110 seconds:
call alterText();
	initially letter was 0 and alterText actually does this:
	document.getElementById(letter).style.visibility="visible";
	which translates to:
	document.getElementById(0).style.visibility="visible";

	This is where you might run into problems on some browsers because the id attribute of an element 
	should start with an alphabetic character. That's why on my post I prefixed all your letters with an "L".
	and adjusted the javascript code where appropriate. So, the updated line of code would be:
	document.getElementById("L" +0).style.visibility="visible";

	The same logic applies to the other two lines. On the last line, however, you are calling genHex()
	which is contains that problematic trailing semicolon. Get rid of it. Lastly, it also increments letter.
	This single statement:
	document.getElementById(letter++).style.color=genHex(); 	  

	is equivalent to these two statements:
	document.getElementById(letter).style.color=genHex();
	letter++;

This concludes the logic flow for alterText() on one call. A similar analysis on alter() would reveal its logic flow.

However, the real problem with these setInterval() calls is that they keep calling alterText() and alter() 
forever every .110 and .100 seconds respectively!

if you go back to alterText, you would realize that there are at most 23 letters. Hence you should not call alterText more than 23 times
because there is no letter with id 24. The largest you have is "L23".

The question, how do you cancel that repeated call after the 23rd time? It turns out that setInterval returns an object.
(think of it as a value) that represents that "repeating process". So, you need to capture that value as in:
var process1 = setInterval("alterText();", 110);

not that you know that process1 refers to the repeated call to alterText(), if you want to cancel that repeated call to alterText,
then you would need to execute the following statement:
clearTimeout(process1);

With this in mind, at the end of alter text you need to check if the last letter updated is 23 and if so,
clear the timeout for that process.

This is what I did, but mostlikely what you are after is a continuous, never-ending color-changing effect on the letters.
If so, you do not need to worry about the timeouts. If this is in fact what you are after and can't get it to work, let me know so that I 
update the post.
*/
    setInterval("alterText();", 110);
    setInterval("alter();", 100);
    setInterval("alter();", 100);

hielo 65 Veteran Poster

16 Years Ago

Here is your updated ORIGINAL code, if you are interested in the infinite color-changing effect:

<!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.firefox:link      {color: skyblue; text-decoration: none; outline: none; cursor: default;}
  a.firefox:visited   {color: skyblue; text-decoration: none; outline: none; cursor: default;}
  a.firefox:active    {color: skyblue; text-decoration: none; outline: none; cursor: default;}
  a.firefox:hover     {color: darkblue; background-color: skyblue; text-decoration: none; outline: none; cursor: default;}
  
  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(){
  
  	colorStart="#"
  	for (j = 0; j == 0; j++){
      color = colors[6 + Math.floor(Math.random() * 7)] 
            + colors[6 + Math.floor(Math.random() * 7)]
            + colors[6 + Math.floor(Math.random() * 7)]
            + "";
  	}
  	return colorStart + color;
  }

  function genHex() {

  	colorStart="#"
  	var r = colors[6 + Math.floor(Math.random() * 8)] 
  	var g = colors[6 + Math.floor(Math.random() * 8)] 
  	var b = colors[6 + Math.floor(Math.random() * 8)] 

  	return colorStart + r + g + b + "";
  }


  function alter() {
   	i = Math.floor(Math.random() * 24);
  	document.getElementById(i).style.color=genHex();	
   }

  var letter = 0;
  
  function alterText() {
    document.getElementById(letter).style.visibility="visible";
    document.getElementById(letter).style.fontSize=Math.floor(140 + Math.random() * 100) + "%";  	  	   
    document.getElementById(letter).style.color=genHex();
    letter=++letter%24; 	  
   }


  </script>


</head>
<body>

<div id="banner">
  <a style="text-decoration:none; outline: none" href="/13/iijima">

<span id="0" style="position:relative; visibility: hidden; font-size: normal; top:9px; color:black">l</span><span id="1" style="position:relative; visibility: hidden; font-size: normal; top:14px; color:black">i</span><span id="2" style="position:relative; visibility: hidden; font-size: normal; top:-17px; color:black">s</span><span id="3" style="position:relative; visibility: hidden; font-size: normal; top:11px; color:black">t</span><span id="4" style="position:relative; visibility: hidden; font-size: normal; top:17px; color:black">e</span><span id="5" style="position:relative; visibility: hidden; font-size: normal; top:3px; color:black">n</span><span id="6" style="position:relative; visibility: hidden; font-size: normal; top:9px; color:black">l</span><span id="7" style="position:relative; visibility: hidden; font-size: normal; top:-3px; color:black">i</span><span id="8" style="position:relative; visibility: hidden; font-size: normal; top:2px; color:black">g</span><span id="9" style="position:relative; visibility: hidden; font-size: normal; top:-2px; color:black">h</span><span id="10" style="position:relative; visibility: hidden; font-size: normal; top:-18px; color:black">t</span><span id="11" style="position:relative; visibility: hidden; font-size: normal; top:-17px; color:black">p</span><span id="12" style="position:relative; visibility: hidden; font-size: normal; top:-4px; color:black">o</span><span id="13" style="position:relative; visibility: hidden; font-size: normal; top:3px; color:black">e</span><span id="14" style="position:relative; visibility: hidden; font-size: normal; top:6px; color:black">t</span><span id="15" style="position:relative; visibility: hidden; font-size: normal; top:2px; color:black">r</span><span id="16" style="position:relative; visibility: hidden; font-size: normal; top:-12px; color:black">y</span><span id="17" style="position:relative; visibility: hidden; font-size: normal; top:-6px; color:black">j</span><span id="18" style="position:relative; visibility: hidden; font-size: normal; top:-4px; color:black">o</span><span id="19" style="position:relative; visibility: hidden; font-size: normal; top:-5px; color:black">u</span><span id="20" style="position:relative; visibility: hidden; font-size: normal; top:-5px; color:black">r</span><span id="21" style="position:relative; visibility: hidden; font-size: normal; top:7px; color:black">n</span><span id="22" style="position:relative; visibility: hidden; font-size: normal; top:8px; color:black">a</span><span id="23" style="position:relative; visibility: hidden; font-size: normal; top:-4px; color:black">l</span>  </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>

<div style="position:absolute; top: 88%; left: 12%; right: 12%; opacity: 0.5; line-height: 1.3em; text-align: left; color: darkkhaki; font-size: x-small; font-variant: bold; letter-spacing: 2px; border: 1px solid darkkhaki; padding: 1.2em; font-family: Tahoma, Geneva, Sans-Serif;">
       Listenlight 13 has not been optimized for the Internet Explorer web browser.
  <br/>To obtain a Web Standards Compliant browser, please visit <big><a class="firefox" style="opacity: 0.7; border-bottom: 2px solid cornflowerblue;" href="http://www.mozilla.org">&nbsp;www.mozilla.org&nbsp;</a></big>
  </div>

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

  	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  			</script>
  			
  		<script type="text/javascript">
  			_uacct = "UA-493923-1";
  			urchinTracker();
  			</script>
</body>
</html>

hielo 65 Veteran Poster

16 Years Ago

>>However, you make various assumptions that I don't appreciate.

My apologies if I offended you. I was just trying be be as thorough as possible just for the sake of clarity. It was not my intention to sound condescending.

>>To my knowledge, also, var++ employs the current value of var, and then increments it before moving on.

This is exactly right. However on your original code you need to reset the "letter" variable after it reaches 23. That's why on my last post, I removed the letter++ from within the parenthesis and then added the following:
letter = ++letter%24;

hielo 65 Veteran Poster

16 Years Ago

>> all I need to do for IE at this point is limit the calls to defined id attributes?
Yes

>> I should look at the source of each page, and stop the text engine after it renders the final character on the page?
Not necessarily. I don't know what is your desired effect. If you just want changing colors while loading then the answer is YES.
[This is what I did on post #2 above]

Otherwise, once the 23 character is loaded you just need to reset the variable letter to 0. This will cause the page to continuously re-render the entire string with changing colors.
[This is what I did on post #5 above.]

Both of those posts are complete code that you can simply copy from the posts, save them to your system, and then just run them. Both worked fine for me on FF and IE.

BTW: Try installing the Firebug extenstion for FireFox. Then open your page current page and you will see how the errors just keep accummulating.

tefflox commented: good help +2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tefflox 2 Junior Poster · Answer 1 · 2007-12-12T12:20:13+00:00

Well, friend, let's avert the question of "what works" for something better. First, thank you kindly for helping out. I'm only getting to this now; have not implemented your programming corrections. If you will, can you please slow down over the detail regarding the errors? I just learn enough programming to do what I need it to do, not unlike an "amateur" photographer (which I am :-)

So, before I go about this half-blinded, not really knowing why it works (as you see, I did sweat for what I've got), can you explain a bit slower, precisely why I must take to account the larger context of these corrections? I'm just trying to learn.

Also, is the following code (for the text engine (~/iijima . . .) ok? ---

setTimeout("setInterval('alterText();', 90);", 2500);

I've heard complaints about similar usage, but not as how to fix it.

<script type="text/javascript">
[B]  var timer=[];[/B]

.
.
.

  var letter = 0;
  
  function alterText() { [B]// lateral to var [U]letter[/U], the changes seem to be stylistic (?)[/B]

    document.getElementById("L"+letter).style.visibility="visible";
    document.getElementById("L"+letter).style.fontSize=Math.floor(140 + Math.random() * 100) + "%";  	  	   
    document.getElementById("L"+letter).style.color=genHex();
    letter++; 
     if(letter>23)
	{
[B]	        clearTimeout(timer[0]);
		clearTimeout(timer[1]);
		clearTimeout(timer[2]);[/B]
	}  
   }


  </script>
.
.
.
  <script type="text/javascript">
[B]  window.onload=function(){
    		timer[0]=setInterval("alterText();", 110);
    		timer[1]=setInterval("alter();", 100);
	   	timer[3]=setInterval("alter();", 100);         
	}[/B]
.
.
.

tefflox 2 Junior Poster · Answer 2 · 2007-12-13T06:18:05+00:00

Hey, thanks. This makes Big Help via DaniWeb numero dos. However, you make various assumptions that I don't appreciate. But everyone does, and not leastly myself, even here. To my knowledge, also, var++ employs the current value of var, and then increments it before moving on. Of course, I may be wrong.

I will get to work on it. Kudos.

tefflox 2 Junior Poster · Answer 3 · 2007-12-13T07:57:28+00:00

Can you explain a bit farther on the following? I don't quite understand.

if you go back to alterText, you would realize that there are at most 23 letters. Hence you should not call alterText more than 23 times
because there is no letter with id 24. The largest you have is "L23".

The question, how do you cancel that repeated call after the 23rd time? It turns out that setInterval returns an object.
(think of it as a value) that represents that "repeating process". So, you need to capture that value as in:
[B]var process1 = setInterval("alterText();", 110);[/B]

not that you know that process1 refers to the repeated call to alterText(), if you want to cancel that repeated call to alterText,
then you would need to execute the following statement:
[B]clearTimeout(process1);[/B]

And the following is equally vague to me. The pages work in my browser (FF2 i686 linux (swiftox)) --- but I'm told they don't work at all in IE7.

window.onload=function(){
    		timer[0]=setInterval("alterText();", 110);
    		timer[1]=setInterval("alter();", 100);
	   	timer[3]=setInterval("alter();", 100);         
	}

And lastly, there is the problem with the following code, which sparks the text engine. I'm told it's bad practice, but not how or where to fix it ---

setTimeout("setInterval('alterText();', 90);", 2500);

I did make the changes to clean up the code and insert an alphabetical character into the id attributes for each letter. They are live now: listenlight.net

If you've access to IE7, please offer a status report.

hielo 65 Veteran Poster · Answer 4 · 2007-12-13T10:21:02+00:00

>>if you go back to alterText, you would realize that there are at most 23 letters. Hence you should not call alterText more than 23 times
because there is no letter with id 24. The largest you have is "L23".

Actually there are 24 letters on "listenlightpoetryjournal", but since you enclosed each of them in a span and the id's were enumerated starting with 0, the last letter has id="n23"

From your original code:
document.getElementById(letter++).style.color=genHex();
this would be problematic when letter increases beyond 23 because there is no (for example):
<span id="n24">?</span> where "?" could be any letter. letter is increased only once when the function alterText() is called, but the real problem is that your code never stopped calling alterText(). This is because setInterval() acts like an alarm clock. The first argument would be sort of the beep/tune that the clock will play, and the second argument would be time between beeps. If you don't shut off the alarm button, the alarm will go on forever [ assuming an atomic powered clock :) ]. This same principle is taking place here. The other two paragraps following the one I just explain basically describe how to shut-off the alarm clock

>>window.onload=function(){
timer[0]=setInterval("alterText();", 110);
timer[1]=setInterval("alter();", 100);
timer[3]=setInterval("alter();", 100);
}

In HTML you could do something like:
<body onload="beginProcess()">

You can avoid adding that to your HTML markup by doing the following:
function beginProcess()
{
...
}

window.onload=beginProcess;

Notice the missing parenthesis at the end of the last statement. That is because we are not calling the function. We are simply assigning it to the window object and will be invoked once the document finishes loading on the browser window.

If you notice, on my example, I just defined the function first, then I assigned it to window.onload.

On the code that I pasted on my previous code, it did both at once and didn't bother to give that function a name because I was only going to use once. At the time the page finished loading.

>>setTimeout("setInterval('alterText();', 90);", 2500);

Not sure what is meant by "bad practice".

This page explains both setTimeout and setInterval:
http://www.siteexperts.com/forums/viewConverse.asp?dir=-1&d_id=11270&Sort=1&t=all&area=0

Just to clarify, as soon as the Javascript interpreter gets to that line, due to setTimeout, it will makes a "note" to itself, that in 2500 milliseconds later it needs to execute the following code:
setInterval('alterText();', 90)

Basically it delays its execution. Then when 2500 milliseconds have elapsed it executes setInterval once and that's it. In turn, setInterval executes, alterText() every 90 milliseconds repeatedly, forever.

If anything, that is the "bad practice". Basically you are consuming resources "forever" [ actually as long as the person is viewing your page].

>>The pages work in my browser (FF2 i686 linux (swiftox))

The original code you posted did not truly work on FF. You thought it was working because it was not halting browser execution every time it threw an error. IE was halting execution altogether. I know for a fact that FF was throwing errors because I have a built in debugger installed that is contantly monitoring any page that loads and clearly indicates any errors on the page. They were all related to the variable letter being incremented beyond 23.

tefflox 2 Junior Poster · Answer 5 · 2007-12-13T11:22:01+00:00

I'm going over your post, but first, a note: there are two text engines that may have confused you. The first function (one of either alter() or alterText()) changes an rgb value within the name banner above the body of work, which is, yes, meant to run twice, concurrently. Second, is alterText(), which assigns a grayscale color to each letter immediately after it becomes visible.

I'm told by a systems analyst that I use "negative logic" - but he doesn't discourage my practice, as it becomes rather different from other small journals. Anyhow, yes, I can see how alter() < genTextHex() > genHex() > alterText() can be troublesome. In a business environment, surely that would yield a sharp correction..

Anyhow, I am reading your comment about the issue of number overrun. In fact, I think that I overran the letters as a hacked way to slow things down. Plus, there is a web hacker who knows me thru railsspace who may be the one making little changes here and there to my site. Nothing malevolent, but I guess he's telling me to bone up on security (?)

So, are you saying that all I need to do for IE at this point is limit the calls to defined id attributes? And also you are saying that, after fixing the id calls, I should look at the source of each page, and stop the text engine after it renders the final character on the page? --- then it won't break IE?-- because let's face it. Mozilla has armored up for this, and is rubbing down IE. Let's not waste time believing Microsoft is doing less than breaking our asses to accommodate a terribly inferior piece of software, so that we may answer to the emperor.

I see Google and Mozilla as the Rebels, at this point. Microsoft is lucky at all to have Vader ;-)

tefflox 2 Junior Poster · Answer 6 · 2007-12-13T11:49:43+00:00

I've got firebug installed, but haven't come to establish myself with it, as you see, I'm just a hobbyist, tho the folks at mootools.net were convincing that it is needed.

Okay, I'm taking your word that you cannot see the desired effect, for which case I have made a video. It's not the hi-qual wide version I made thru dreamhost, but here's how it looks rendered thru facebook's video system:

http://www.facebook.com/group.php?gid=7259257222

The video makes it very clear how it should perform.

So, I'll make a few more changes, and we can mark it solved, once the IE tech report comes out positive.

Cheers --
Jess

tefflox 2 Junior Poster · Answer 7 · 2007-12-13T13:00:05+00:00

Okay, I've implemented your corrections. Here is the text engine (excluding the php ascii string which handles the line breaks) ---

var letter = 100;
  
  function alterText() {
      underscore = document.getElementById("n" + letter).innerHTML;
      
      if(underscore == "_") {
  	     document.getElementById("n" + letter).innerHTML="&nbsp;";
       } 
      else if(letter < 3450) {    
        document.getElementById("n" + letter).style.visibility="visible";
  	    document.getElementById("n" + letter++).style.color=genHex();	   
  	   }
  	  else
  	    return false;
  }

I guess this function is still getting called each 80ms or so, but if it's returning false, it should be okay? Please tell me it's working in IE. Thanks so much for your diligence in helping me out.

Edit: I think that I've got to use an extra number for the string length when using Math.floor(). I've tested it as such; otherwise it doesn't work.

hielo 65 Veteran Poster · Answer 8 · 2007-12-14T00:04:29+00:00

I looked at http://listenlight.net/13/iijima/ with FF and IE and they behave as shown on the video. Furthermore, my FF debugger is not triggerring any errors.

However, the homepage:
http://listenlight.net/

still does.

hielo 65 Veteran Poster · Answer 9 · 2007-12-14T00:21:58+00:00

Wait a minute, I take that back. I left IE open long enough for the letter to reach the limit (3450), and then I got a pop-up error. The same with FF.

The reason for that is that when letter = 3449,
else if( letter < 3450 ){...}

is true and the content inside {...} is executed. That contents increments letter to 3450. So the next time that timeout calls alterText(), it attempts to execute this first:
underscore = document.getElementById("n" + letter).innerHTML;

since letter is now 3450 an such id does not exist, it throws a runtime error! You must check for the limit first.

Here's the revised code:

function alterText()
{
	if(letter < 3450)
	{
		underscore = document.getElementById("n" + letter).innerHTML;
      
		if(underscore == "_")
		{
			document.getElementById("n" + letter).innerHTML="&nbsp;";
		}
		else
		{
			document.getElementById("n" + letter).style.visibility="visible";
			document.getElementById("n" + letter++).style.color=genHex();
		}
	return true;
  	}
return false;
}

tefflox 2 Junior Poster · Answer 10 · 2007-12-14T00:28:09+00:00

Thanks, Hielo.. I did tinker with firebug last night, after fixing a few things, but could not find where the errors would be displayed. I'm kind of in the dark as to the cover (URI) page, tho I suspect it may be something to do with running these functions concurrently:

setInterval("alterText();", 110);
    setInterval("alter();", 100);
    setInterval("alter();", 100);

Actually, I counted 24 letters in liste v nligh v tpoet v ryjou v rnal iv

-- & since, to my knowledge, employing Math.floor() requires it, I changed the delimiting constant herewith from 24 to 25:

function alter() {  
   	i = "n" + Math.floor(Math.random() * [B][U]25[/U][/B]);
  	document.getElementById(i).style.color=genHex();	
   }

These changes are live: http://listenlight.net. I am marking the problem solved. If you will, please confirm that it functions in IE without errors.

tefflox 2 Junior Poster · Answer 11 · 2007-12-14T00:51:30+00:00

These changes are implemented thruout. Please validate them. In return, I will look into using firebug. It's installed, so next time we can hopefully solve it in two or three entries.

function alterText() {

   if(letter < 3450) {
     
     if(underscore = document.getElementById("n" + letter).innerHTML == "_")
       document.getElementById("n" + letter).innerHTML="&nbsp;";
 
     else {
       document.getElementById("n" + letter).style.visibility="visible";
       document.getElementById("n" + letter++).style.color=genHex();
      }
 
     return true;
    }
 return false;
}

hielo 65 Veteran Poster · Answer 12 · 2007-12-14T00:54:35+00:00

Thanks, Hielo.. I did tinker with firebug last night, after fixing a few things, but could not find where the errors would be displayed.

Once firebug is installed, you will see a little icon on the lower right-hand side of your browser. The icon will be a small check mark on a green background if there are no reported errors on the page, or an x on a red background if errors exist. However, you still need to configure it for it to show the "x" icon upon javascript errors. To do so, click on the icon > options > Show Javascript Errors

I'm kind of in the dark as to the cover (URI) page, tho I suspect it may be something to do with running these functions concurrently:
setInterval("alterText();", 110);
    setInterval("alter();", 100);
    setInterval("alter();", 100);

When I looked at this page, nothing had changed. You were not checking for the limit (23).

Actually, I counted 24 letters in liste v nligh v tpoet v ryjou v rnal iv

Yes, this is correct. But you began numbering the letters at 0. So, the 24th letter will have id "n23". So, when you add a limit check to it, you cannot exceed 23. Refer to my previous post to see how I addressed this issue on the other page.

-- & since, to my knowledge, employing Math.floor() requires it, I changed the delimiting constant herewith from 24 to 25:

Math.random() by itself will give you a floating number that will be at least 0 and a number that is "almost 1". When you multiply that number by 24, you end up with a number that is at least 0 and "almost 24" (perhaps 23.99999999999999999999999999999999). Then Math.floor() basically just keeps the integer part, and hence, your number range will be [0, 23]. That's why alter will never trigger any errors on that page, since your letters are labeled from id="n0" ... id="n23".

function alter() {  
   	i = "n" + Math.floor(Math.random() * [B][U]25[/U][/B]);
  	document.getElementById(i).style.color=genHex();	
   }

Again, that 25 should be changed back to 24. Otherwise you will start getting errors triggered by alter() as well, since 25 changes the possible ids to [0,24], but there is no id="n24".

These changes are live: http://listenlight.net. I am marking the problem solved. If you will, please confirm that it functions in IE without errors.

The errors are still there. Your functions should be changed to:

function alter() {  
   	i = "n" + Math.floor(Math.random() * 24);
  	document.getElementById(i).style.color=genHex();	
   }
  
  var letter = 0;
  
function alterText()
{
	if(letter < 24)
	{
		underscore = document.getElementById("n" + letter).innerHTML;
      
		if(underscore == "_")
		{
			document.getElementById("n" + letter).innerHTML="&nbsp;";
		}
		else
		{
			document.getElementById("n" + letter).style.visibility="visible";
			document.getElementById("n" + letter++).style.color=genHex();
		}
	return true;
  	}
return false;
}

tefflox 2 Junior Poster · Answer 13 · 2007-12-14T01:05:09+00:00

Okay, I got firebug to show the errors, which don't start until the banner is fully displayed (and it is already running the shimmer effect), so it seems we need to revisit the following:

setInterval("alterText();", 110);

as it is making the errors, at about 9 per second :-)

tefflox 2 Junior Poster · Answer 14 · 2007-12-14T01:24:11+00:00

Now I'm really confused. The uri is throwing errors like fireworks, and the inner pages do the same (just somewhat slower) after the text engine makes the final character visible.

I'm hoping the solution is in the following lead. I can appreciate your impatience, earlier, because I had no idea that you were seeing what I am only now getting to... :-(

>>if you go back to alterText, you would realize that there are at most 23 letters. Hence you should not call alterText more than 23 times
because there is no letter with id 24. The largest you have is "L23".
Actually there are 24 letters on "listenlightpoetryjournal", but since you enclosed each of them in a span and the id's were enumerated starting with 0, the last letter has id="n23"
From your original code:
document.getElementById(letter++).style.color=genHex();
this would be problematic when letter increases beyond 23 because there is no (for example):
<span id="n24">?</span> where "?" could be any letter. letter is increased only once when the function alterText() is called, but the real problem is that your code never stopped calling alterText(). This is because setInterval() acts like an alarm clock. The first argument would be sort of the beep/tune that the clock will play, and the second argument would be time between beeps. If you don't shut off the alarm button, the alarm will go on forever [ assuming an atomic powered clock :) ]. This same principle is taking place here. The other two paragraps following the one I just explain basically describe how to shut-off the alarm clock
>>window.onload=function(){
timer[0]=setInterval("alterText();", 110);
timer[1]=setInterval("alter();", 100);
timer[3]=setInterval("alter();", 100);
}
In HTML you could do something like:
<body onload="beginProcess()">
You can avoid adding that to your HTML markup by doing the following:
function beginProcess()
{
...
}
window.onload=beginProcess;
Notice the missing parenthesis at the end of the last statement. That is because we are not calling the function. We are simply assigning it to the window object and will be invoked once the document finishes loading on the browser window.
If you notice, on my example, I just defined the function first, then I assigned it to window.onload.
On the code that I pasted on my previous code, it did both at once and didn't bother to give that function a name because I was only going to use once. At the time the page finished loading.
>>setTimeout("setInterval('alterText();', 90);", 2500);
Not sure what is meant by "bad practice".
This page explains both setTimeout and setInterval:
http://www.siteexperts.com/forums/viewConverse.asp?dir=-1&d_id=11270&Sort=1&t=all&area=0
Just to clarify, as soon as the Javascript interpreter gets to that line, due to setTimeout, it will makes a "note" to itself, that in 2500 milliseconds later it needs to execute the following code:
setInterval('alterText();', 90)
Basically it delays its execution. Then when 2500 milliseconds have elapsed it executes setInterval once and that's it. In turn, setInterval executes, alterText() every 90 milliseconds repeatedly, forever.
If anything, that is the "bad practice". Basically you are consuming resources "forever" [ actually as long as the person is viewing your page].
>>The pages work in my browser (FF2 i686 linux (swiftox))
The original code you posted did not truly work on FF. You thought it was working because it was not halting browser execution every time it threw an error. IE was halting execution altogether. I know for a fact that FF was throwing errors because I have a built in debugger installed that is contantly monitoring any page that loads and clearly indicates any errors on the page. They were all related to the variable letter being incremented beyond 23.

hielo 65 Veteran Poster · Answer 15 · 2007-12-14T01:31:24+00:00

Read post #18 here. That is the solution to these problems.

>>so it seems we need to revisit the following:
setInterval("alterText();", 110);

The problem is NOT how often you call alterText(). The problem is that at some point, alterText executes:
document.getElementById("n"+letter).style.visibility="visible";

where
document.getElementById("n"+letter) is evaluated first. For a value of letter whereby there is a non-existent id, null is returned. So basically at the end, you are trying to set the style property on a null object. Hence the error.

Again, post #18 on this thread addresses this issue.

tefflox 2 Junior Poster · Answer 16 · 2007-12-14T16:02:19+00:00

Hielo, thanks verily!

At farther interest, please visit any of the following ---

http://digg.com/programming/The_Listenlight_Text_Engine

http://listenlight.net/listenlight-textengine-0_1.txt

http://listenlight.net/13/

Javascript breaks IE - please help.

Recommended Answers Collapse Answers

All 21 Replies

Recommended Answers