•
•
•
•
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 330,339 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 2,721 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.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1881 | Replies: 21 | Solved
 |
•
•
Join Date: Jul 2006
Posts: 132
Reputation: 
Rep Power: 2
Solved Threads: 0
Junior Poster
Javascript breaks IE - please help. The site: listenlight.net, 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 :-\
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 :-\
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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"> 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>
<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"> www.mozilla.org </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> •
•
Join Date: Jul 2006
Posts: 132
Reputation:
Rep Power: 2
Solved Threads: 0
Junior Poster
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? ---
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.
•
•
•
•
Originally Posted by hielo 
<script type="text/javascript"> var timer=[]; . . . var letter = 0; function alterText() { // lateral to var letter, the changes seem to be stylistic (?) 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> . . . <script type="text/javascript"> window.onload=function(){ timer[0]=setInterval("alterText();", 110); timer[1]=setInterval("alter();", 100); timer[3]=setInterval("alter();", 100); } . . .
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
/*
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); •
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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"> 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>
<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"> www.mozilla.org </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>
•
•
Join Date: Jul 2006
Posts: 132
Reputation:
Rep Power: 2
Solved Threads: 0
Junior Poster
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.
I will get to work on it. Kudos.
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
>>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;
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;
•
•
Join Date: Jul 2006
Posts: 132
Reputation:
Rep Power: 2
Solved Threads: 0
Junior Poster
Can you explain a bit farther on the following? I don't quite understand.
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.
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 ---
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.
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);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.
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
>>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/vi...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.
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/vi...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.
•
•
Join Date: Jul 2006
Posts: 132
Reputation:
Rep Power: 2
Solved Threads: 0
Junior Poster
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 ;-)
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 ;-)
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
DaniWeb Marketplace (Sponsored Links)
Linear Mode
•
•
•
•
ajax asp cross-browser javascript menu with few lines of code developer development firefox home html internet javascript javascript smooth scrolling scroll smoothly window document position javascript tab menu with rounded corners generator microsoft msdn office prevent javascript menu from getting hidden under flash movies site software sql vista web
- Mouse Over ToolTip Help (JavaScript / DHTML / AJAX)
- PHP/AJAX/Javascript/Mysql - Master - NO FREELANCE (Los Angeles) (Software Development Job Offers)
- Move Javascript Variable to PHP (JavaScript / DHTML / AJAX)
- java to javascript (JavaScript / DHTML / AJAX)
- Generating dynamic text sizes us JS (Java)
- Fly-over menu ??? (Site Layout and Usability)
- expected error on homepage (HTML and CSS)
- Design for A4 printing HTML report - Pg Break? (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Action by pressing a key
- Next Thread: Ajax selecting from MySQL
