Stop refresh flicker...

I built an ASP chat room that refreshes the content every 5 seconds.  But, of course, the page flashes and flickers every 5 seconds, becoming annoying.   I had seen, Expert glsac said it, that you can get rid of the flicker and flash of the refresh using Javascript.  Anybody familiar with this method?  
LVL 31
alorentzAsked:
Who is Participating?
 
fritz_the_blankConnect With a Mentor Commented:
I think that using DIVs might be the trick. What if you had a very small frame that made the trips to the server and refreshed. You could then take the result from that and pass it to a function that sets the div content. Try this--no flickers:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeMessage(strMessageText){
      document.getElementById('msgContent').innerHTML = strMessageText;
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<input type=button value='Hello to Me!' onClick="changeMessage('Hello to Me!')"><br>
<input type=button value='Hello to You!' onClick="changeMessage('Hello to You!')">
<p>&nbsp;</p>

<div id='msgContent'></div>

</BODY>
</HTML>
0
 
fritz_the_blankCommented:
I am not sure about that. The only way that I know how to do that is to put the content that refreshes in a frame or iframe

FTB


PS--It is really great working with you. You are decent, polite, helpful, and don't barge in on questions that are already in process unless you have something significant to add and etc. (This is very different behavior than some of the active folks in the JavaScript TA).

0
 
alorentzAuthor Commented:
Yes the chat is built with top, content, and bottom frame.  But the content fram always flashes and flickers when refreshing.  glsac said he could suppress it with Javascript a while ago, but never gave the code.  Maybe there's a way, maybe not...

You comments are appreciated...there are several in this forum with other opinions though! ;-)  This board can be frustrating at times...but I try to maintain composure...

Thanks.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
fritz_the_blankCommented:
I wonder if s/he was talking about this sort of thing?

http://forums.devshed.com/t18068/s.html?highlight=Instant+Login

FtB
0
 
alorentzAuthor Commented:
Not sure, here is the question he/she mentioned it:

http://www.experts-exchange.com/Web/Web_Languages/ASP/Q_20943054.html

Thanks for your continued effort...
0
 
fritz_the_blankCommented:
So the idea is that some small textless frame keeps on querying the server to get the content. You then store the content to a client-side variable which you pass to the function to draw the DIV...


FtB
0
 
fritz_the_blankCommented:
To get a sense of what this might look like with longer text, try this instead:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeMessage(strMessageText){
      for(i=0;i<5;i++){
            strMessageText += strMessageText;
      }
      document.getElementById('msgContent').innerHTML = strMessageText;
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<input type=button value='Hello to Me!' onClick="changeMessage('Hello to Me!')"><br>
<input type=button value='Hello to You!' onClick="changeMessage('Hello to You!')">
<p>&nbsp;</p>

<div id='msgContent'></div>

</BODY>
</HTML>
0
 
alorentzAuthor Commented:
Yes, I have been delaying doing that, because the whole things works on Serverside VbScript, and all the parsing in done there.  I was hoping to just suppress the refresh flickering of the text.

Basically sounds like I will need to put all the content in a hidden div or something in a nontext frame, and then use Javascript to populate the visible text frame.

Like
hidden frame:
<input type=hidden value="<%=messagebody%>" name=hiddenstuff>

Content frame:

<script>
function something()
{
window.contentframe.blah.value = childframe.hiddenstuff.value
}

</script>

Or something to that effect...

Was hoping for a magic "Make the flash disappear function"....but maybe not possible.  May be affected by Browser settings too...like if the setting is to refresh on every visit then the content will always flash..
0
 
SvenTech Lead Web-DevelopmentCommented:
Maybe this thread should be moved where it belongs: to the javascript board!?
0
 
AlfaNoMoreConnect With a Mentor Commented:
Is JavaScript capable of retrieving content from an external document? If it is, you could have a function that performs a HTTP call to say an ASP page. This asp page returns the current text from the chat, and then you display this string based variable inside your text area?

window.setTimeOut('getChatContent(\'ID for this Chat\')', 5000); // get new content every 5 seconds.

function getChatContent(ID) {
     var oHTTP = new ActiveXObject('MSXML2.DOMDocument')
     oHTTP.open "GET", "http://yourserver.com/chatContent.asp?chatID=" + ID, false
     oHTTP.send()
     document.textfield.value = oHTTP.responseText();
}
0
 
TheKenmanConnect With a Mentor Commented:
I would use AlfaNoMore's suggestion if possible, it will most likely be the most seamless. Here's an advanced version of the same method:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="JavaScript">
<!--
function xHTTP() {
     var xmlhttp
     /*@cc_on @*/
     /*@if (@_jscript_version >= 5)
            try {
             xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")
            } catch (e) {
              try {
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
              } catch (E) {
               xmlhttp=false
              }
            }
       @else
            xmlhttp=false
       @end @*/
       if (!xmlhttp) {
           try {
            xmlhttp = new XMLHttpRequest();
           } catch (e) {
            xmlhttp=false
           }
       }
      xmlhttp.open("POST", "http://experts-exchange.com",true);
      xmlhttp.onreadystatechange=
           function() {
               if (xmlhttp.readyState==4) {
                    document.all.out.innerHTML = xmlhttp.responseText;
               }
           }
      xmlhttp.send(null);
}
</script>
</head>
<body>
<input type="button" onClick="javascript:xHTTP();" value="xmlHTTP">
<div id="out">Resultant data goes here</div>
</body>
</html>

Of course the relatively linked content (styles, scripts & images) won't be present, but this is a very powerful method. If your site accepts form submissions or querystrings, you can programatically send those with the page.
0
 
AlfaNoMoreCommented:
sweet. Oh, and spotted I used the DOMDocument, and not the XMLHTTP object. Doh!
0
 
alorentzAuthor Commented:
Appreciate you input, but I guess I'll just have to tolerate the flicker...

Thanks.
0
 
fritz_the_blankCommented:
If I come across anything, I'll be sure to let you know.

Fritz the Blank
0
 
TheKenmanCommented:
Hmmm looking at this again, I do see how it might refresh.

Instead of this:

     document.all.out.innerHTML = xmlhttp.responseText;

I would amend that to just create a new <div> and insert the results into that <div>, using:

      chatDiv = document.getElementByID("chatDiv");
      updateDiv = document.createElement("DIV");
      updateTxt = document.createTextNode(xmlhttp.responseText);
      updateDiv.appendChild(updateTxt);
      chatDiv.appendChild(updateDiv);

Not sure how that will work out, but if you need help on it lemme know.

Thanks for the assist :)
0
 
alorentzAuthor Commented:
No help necessary thanks, I think I'll continue doing all server side, but I may throw the chat body in a hidden frame, and then populate the chat content frame with the the text from the hidden frame using setTimeout.  Think that should be seamless, but we'll see.  

Thanks again...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.