Solved

Stop refresh flicker...

Posted on 2004-04-20
16
1,981 Views
Last Modified: 2012-08-14
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?  
0
Comment
Question by:alorentz
[X]
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
  • 6
  • 5
  • 2
  • +2
16 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 10873427
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
 
LVL 31

Author Comment

by:alorentz
ID: 10873611
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 10873719
I wonder if s/he was talking about this sort of thing?

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

FtB
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 31

Author Comment

by:alorentz
ID: 10873764
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
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 150 total points
ID: 10873879
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 10873891
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 10873909
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
 
LVL 31

Author Comment

by:alorentz
ID: 10873967
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
 
LVL 11

Expert Comment

by:Sven
ID: 10875606
Maybe this thread should be moved where it belongs: to the javascript board!?
0
 
LVL 9

Assisted Solution

by:AlfaNoMore
AlfaNoMore earned 50 total points
ID: 10876542
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
 
LVL 7

Assisted Solution

by:TheKenman
TheKenman earned 50 total points
ID: 10876808
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
 
LVL 9

Expert Comment

by:AlfaNoMore
ID: 10876852
sweet. Oh, and spotted I used the DOMDocument, and not the XMLHTTP object. Doh!
0
 
LVL 31

Author Comment

by:alorentz
ID: 10898838
Appreciate you input, but I guess I'll just have to tolerate the flicker...

Thanks.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 10899048
If I come across anything, I'll be sure to let you know.

Fritz the Blank
0
 
LVL 7

Expert Comment

by:TheKenman
ID: 10900343
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
 
LVL 31

Author Comment

by:alorentz
ID: 10900476
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
This is a high-level webinar that covers the history of enterprise open source database use. It addresses both the advantages companies see in using open source database technologies, as well as the fears and reservations they might have. In this…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

717 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