Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Hey Guys,
I am working on a bug causing a flickering input box. The page is dynamically created, and I noticed when you start typing in the empty box the text will be flickering as you type and when you delete the content of the box then whatever you type won't be displayed unless you go to different box and click back to the box and you will see the text.
 
I noticed when the page is created if I set the content to none empty( I tried <!-- -->) then the problem goes away. Basically, the textbox does not like to be empty!!!
 
Update1:
Browser Type: IE
The input box is part of a table and the content is filled with the following code:
 
function enableDesignMode(rte, html, readOnly)
{
    var frameHtml
 
    if (fnSetContent.html == null)fnSetContent.html = new Array();
    fnSetContent.html[rte] = [html, readOnly];
 
    if(html.length == 0 )
    {
        frameHtml = '&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;';
        frameHtml += "&lt;html id=\"" + rte + "\"&gt;\n";
        frameHtml += "&lt;html&gt;\n&lt;head&gt;\n";
 
        //to reference your stylesheet, set href property below to your stylesheet path and uncomment
        if (cssFile.length &gt; 0)
        {
            frameHtml += "&lt;link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\"&gt;\n";
        }
        else
        {
            frameHtml += "&lt;style&gt;\n";
            frameHtml += "body {\n";
            frameHtml += "  background: #FFFFFF;\n";
            frameHtml += "  margin: 0px;\n";
            frameHtml += "  padding: 0px;\n";
            frameHtml += "  font-family: Tahoma, Verdana, Arial;\n";
            frameHtml += "  font-size: 80%;\n";
            frameHtml += "}\n";
            frameHtml += "&lt;/style&gt;\n";
        }
 
        frameHtml += "&lt;/head&gt;\n";
        frameHtml += "&lt;body&gt;\n";
        frameHtml += html + "\n";
        frameHtml += "&lt;/body&gt;\n";
        frameHtml += "&lt;/html&gt;";
 
    }
    else
        frameHtml = html;
 
if (document.all)
    {
//      if (fnSetContent.html == null)fnSetContent.html = new Array();
//      fnSetContent.html[rte] = [frameHtml, readOnly];
        if (fnSetContent.html != null)
        {
            fnSetContent.html[rte][0] = frameHtml;
            fnSetContent.html[rte][1] = readOnly;
        }
        var oRTE = frames[rte].document;
        if (frames[rte].ready)
        {
            oRTE.open();
            oRTE.write(frameHtml);
            oRTE.close();
        }
        rteCommand(rte, "fontsize", "2");
        oRTE.onselectionchange = new Function("updateFont('" + rte + "');");
        oRTE.onkeyup = new Function("handleFont('" + rte + "');");
        if(frameHtml.indexOf("STYLE") == -1)
        {
        setTimeout("setEditorStyles('" + rte + "');", 10);
        }
    }
    else
    {
 
...
then some other work is done
}
 

...
where the 'html' is the content of the input box...when it is empty the if part get executed which causes the flickering problem!!!
 
update2:
*** I noticed in one of the pages, removing DTD will fix the issue, but then the text box shows undefined.(update)getting undefined was my fault, and not the result of removing DTD, so never mind this...
 
update3:
Removing the url part will fix flickering issue and the text box does not get initialized with undefined
Now, I am wondering what will be consequences if one omits the url field in a doctype tag?
 
original:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
modified:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Posted 6-Jun-12 12:13pm
soby210
Edited 12-Jun-12 9:19am
v11
Comments
Stephen Hewison 2 at 6-Jun-12 17:31pm
   
Can you post a basic example showing this behaviour and explain which browser you are using?
TRK3 at 6-Jun-12 17:34pm
   
It might be help if you posted the relevant code.
Stephen Hewison 2 at 8-Jun-12 19:16pm
   
Question? Have you used the developer tools in the browser and set break points throughout your code? My best guess at this point is that one of the events your code is utilising is creating a loop causing the content to be repeatedly applied.
SAKryukov at 11-Jun-12 15:00pm
   
Please use "Improve question" above and add your new question about doctype; instead of re-posting.
--SA

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

So, I ended up removing Doctype tag which fixed ( or masked Smile | :) ) the issue...but I think the actual problem was call to validation which probably was somehow in loop, so I will investigate that later and post updates.
  Permalink  
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 390
1 Jochen Arndt 150
2 Richard MacCutchan 135
3 DamithSL 95
4 Garth J Lancaster 90
0 OriginalGriff 6,045
1 DamithSL 4,601
2 Maciej Los 4,087
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,260


Advertise | Privacy | Mobile
Web03 | 2.8.141220.1 | Last Updated 12 Jun 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100