•
•
•
•
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 397,859 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,420 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: 2452 | Replies: 21 | Solved
 |
•
•
Join Date: Dec 2007
Posts: 75
Reputation: 
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
>> 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.
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.
•
•
Join Date: Jul 2006
Posts: 155
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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
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
•
•
Join Date: Jul 2006
Posts: 155
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
Okay, I've implemented your corrections. Here is the text engine (excluding the php ascii string which handles the line breaks) ---
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.
var letter = 100;
function alterText() {
underscore = document.getElementById("n" + letter).innerHTML;
if(underscore == "_") {
document.getElementById("n" + letter).innerHTML=" ";
}
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.
Last edited by tefflox : Dec 13th, 2007 at 2:07 am. Reason: clearing up number overrun confusion
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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.
However, the homepage:
http://listenlight.net/
still does.
•
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
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:
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=" ";
}
else
{
document.getElementById("n" + letter).style.visibility="visible";
document.getElementById("n" + letter++).style.color=genHex();
}
return true;
}
return false;
} •
•
Join Date: Jul 2006
Posts: 155
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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:
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:
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.
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() * 25);
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.
•
•
Join Date: Jul 2006
Posts: 155
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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=" ";
else {
document.getElementById("n" + letter).style.visibility="visible";
document.getElementById("n" + letter++).style.color=genHex();
}
return true;
}
return false;
} •
•
Join Date: Dec 2007
Posts: 75
Reputation:
Rep Power: 1
Solved Threads: 10
Junior Poster in Training
•
•
•
•
Originally Posted by tefflox 
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() * 25); 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.
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=" ";
}
else
{
document.getElementById("n" + letter).style.visibility="visible";
document.getElementById("n" + letter++).style.color=genHex();
}
return true;
}
return false;
} Last edited by hielo : Dec 13th, 2007 at 2:03 pm. Reason: Incompleteness
•
•
Join Date: Jul 2006
Posts: 155
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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 :-)
setInterval("alterText();", 110);
as it is making the errors, at about 9 per second :-)
•
•
Join Date: Jul 2006
Posts: 155
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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... :-(
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... :-(
•
•
•
•
Originally Posted by hielo
>>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.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
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
