Solved

Stop refresh flicker...

Posted on 2004-04-20
16
1,980 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
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

Suggested Solutions

Title # Comments Views Activity
ASP/VB email question 4 62
ASP server side get value 15 47
Writing comments on <p></P> or paragraph 2 23
MS SQL + date 6 42
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 demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

726 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