Solved

Stop refresh flicker...

Posted on 2004-04-20
16
1,972 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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…
I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:  The Exchange of information …
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
This video discusses moving either the default database or any database to a new volume.

757 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now