innerHTML causes flashing

Posted on 2005-03-07
Medium Priority
Last Modified: 2008-03-03
I am using document.getElementById("chat_dump").innerHTML = content   in a timeout loop to continually update a div area:

<div id="chat_dump"></div>

The problem is on FireFox there is an annoying flash even when the content hasn't changed.

Question by:drew22
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 32

Accepted Solution

Batalf earned 2000 total points
ID: 13479179
You should check if the new content is equal to the existing content before you update it.

if(document.getElementById("chat_dump").innerHTML != content){
    document.getElementById("chat_dump").innerHTML = content;

I guess it's not much to do with the flashing in Firefox.


Author Comment

ID: 13479385
but the content will likely be changing often (it's a chat).

Expert Comment

ID: 13480185
But if the content doesn't change, and the timer timesout, you are getting a flash, so you should check to see if the content has changed before try to update it.
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users


Author Comment

ID: 13480635
it flashes when the content changes, too.   And even when content doesn't changed, what's returned by getElementById().innerHTML isn't character-for-character exactly the same as what's read from storage.
LVL 32

Expert Comment

ID: 13480786
Maybe you could just append the new data to the existing div


if(cWindow.document) //Moz 0.9+, Konq, Safari, IE, Opera
      cDocument = cWindow.document;
    else //Moz < 0.9 (Netscape 6.0)
      cDocument = cWindow.contentDocument;
var newMessage = cDocument.createElement('DIV');
newMessage.innerHTML = newContent; // The new content to the chat

Look at the example at http://code.jenseng.com/jenChat/  for more info.

Author Comment

ID: 13481101
I think I'll try a pure DOM approach like:
document.getElementById("chat_dump").firstChild.data      = new_data;

...but using the doc fragment (or whatever its called) which can handle html

LVL 11

Expert Comment

ID: 15614021
No comment has been added to this question in more than 21 days, so it is now classified as abandoned..
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: Batalf

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

EE Cleanup Volunteer

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question