?
Solved

Stop refresh flicker...

Posted on 2004-04-20
16
Medium Priority
?
1,987 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
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 600 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 200 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 200 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

Industry Leaders: 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

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…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
Is your data getting by on basic protection measures? In today’s climate of debilitating malware and ransomware—like WannaCry—that may not be enough. You need to establish more than basics, like a recovery plan that protects both data and endpoints.…
Suggested Courses

850 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