Wierd behavior in Firefox

Discussion in 'Javascript' started by richardsayre@gmail.com, Apr 19, 2006.

  1. Guest

    I am making a spell checker. The reqest sends out the text and gets
    back HTML of the suggestions and misspelled words. When you click on a
    misspelled word the suggestion list pops up and you can select a
    suggestion and the word will change. All of the functionality works
    fine. My problema is in Firefox, if I click on a word to show
    sugggestions, and then run the spell check again, and then click on
    that same word, the suggestion list does not pop up. For example, I
    click 'Check Spelling' then I click 'si' the sugggestion pop up, I can
    fix it or mouse out and leave it alone. If I click 'Check Spelling'
    again and click 'si' the list will not appear, but the function does
    execute. If I click a word I didnt click last time, the list will
    appear. the function showSuggestions(e,element) function executes
    bacuse I put an alert to make sure it was running.

    I have included my code.


    *********Here is the javascript:

    //Begin JS
    var xmlHttp;

    function fixSpelling(newWord,element,elementToHide) {

    element.innerHTML = newWord;
    element.className = "noSpellError";
    hideSuggestion2(elementToHide);
    }

    function showSuggestions(e,element) {

    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {


    posx = e.pageX;
    posy = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {

    posx = e.clientX + document.body.scrollLeft;
    posy = e.clientY + document.body.scrollTop;
    }
    alert(posx + " - " + posy);

    //alert(element.innerHTML);

    element.style.left=posx-10;
    element.style.top=posy-10;
    element.style.display="block";


    }



    function hiLight() {

    }

    function hideSuggestion(e,element) {

    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;

    if(tg.id == element.id) {
    element.style.display="none";
    }
    }

    function hideSuggestion2(element) {
    element.style.display="none";
    }

    function spellCheck() {
    try{
    var
    url="SpellCheckServlet?text="+document.getElementById("textArea").value;
    xmlHttp=GetXmlHttpObject(stateChanged);
    xmlHttp.open("POST", url , true);
    xmlHttp.send(null);
    } catch (e) {
    alert(e);
    return;
    }

    document.getElementById("message").innerHTML="Loading ... <img
    src=\"anicircle.gif\"/>";

    }

    function stateChanged() {


    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
    document.getElementById("message").innerHTML=xmlHttp.responseText;
    //alert(xmlHttp.responseText);

    }
    }

    function GetXmlHttpObject(handler) {
    var objXmlHttp=null;

    if (navigator.userAgent.indexOf("Opera")>=0) {
    alert("This example doesn't work in Opera");
    return;
    }

    if (navigator.userAgent.indexOf("MSIE")>=0) {
    var strName="Msxml2.XMLHTTP";
    if (navigator.appVersion.indexOf("MSIE 5.5")>=0) {
    strName="Microsoft.XMLHTTP";
    }

    try
    {
    objXmlHttp=new ActiveXObject(strName);
    objXmlHttp.onreadystatechange=handler;
    return objXmlHttp;
    }
    catch(e)
    {
    alert("Error. Scripting for ActiveX might be disabled");
    return;
    }
    }

    if (navigator.userAgent.indexOf("Mozilla")>=0){
    objXmlHttp=new XMLHttpRequest();
    objXmlHttp.onload=handler;
    objXmlHttp.onerror=handler;
    return objXmlHttp;
    }

    }
    //End JS



    ******************Here is the HTML:

    <html>
    <head>

    <script src="altest.js"></script>
    <link rel="stylesheet" type="text/css" href="spellcheck.css" />
    </head>

    <body>

    <a href="javascript:spellCheck()">SpellCheck!</a><br/>



    <form id="theForm">

    <textarea id="textArea">Teh coloor si kewl</textarea>


    </form>

    <div id="message">

    </div>


    </body>

    </html>

    Here is the CSS:

    span.spellError {

    border-bottom:1px dashed red;
    cursor:pointer;

    }

    span.noSpellError {

    border-bottom:0px none;
    cursor:defualt;

    }

    div.spellCheck {

    border:1px solid black;
    padding:3px 3px 3px 3px;
    }

    div.suggestionList {
    border:1px solid #00aeff;
    background-color:#e7f7ff;
    display:none;
    position:absolute;
    padding:3px 3px 3px 3px;
    }


    div.suggestion {
    cursor:pointer;
    }

    div.suggestion:hover {
    background-color:rgb(210,234,251);

    }


    *****************And here is the data returned by the SpellCheck
    servlet:

    <div id="spellCheck" class="spellCheck"><span class="spellError"
    id="Teh_span" onClick="showSuggestions(event,Teh)">Teh</span> <span
    class="spellError" id="coloor_span"
    onClick="showSuggestions(event,coloor)">coloor</span> <span
    class="spellError" id="si_span"
    onClick="showSuggestions(event,si)">si</span> <span class="spellError"
    id="kewl_span" onClick="showSuggestions(event,kewl)">kewl</span></div>

    <div class="suggestionList" id="si"
    onMouseOut="hideSuggestion(event,si)" style="width:50px">
    <div class="suggestion" id="six"
    onClick="fixSpelling('six',si_span,si)">six</div>
    <div class="suggestion" id=" psi" onClick="fixSpelling('
    psi',si_span,si)"> psi</div>
    <div class="suggestion" id=" sib" onClick="fixSpelling('
    sib',si_span,si)"> sib</div>
    <div class="suggestion" id=" sic" onClick="fixSpelling('
    sic',si_span,si)"> sic</div>
    <div class="suggestion" id=" sin" onClick="fixSpelling('
    sin',si_span,si)"> sin</div>
    <div class="suggestion" id=" sip" onClick="fixSpelling('
    sip',si_span,si)"> sip</div>
    <div class="suggestion" id=" sir" onClick="fixSpelling('
    sir',si_span,si)"> sir</div>
    <div class="suggestion" id=" sis" onClick="fixSpelling('
    sis',si_span,si)"> sis</div>
    <div class="suggestion" id=" sit" onClick="fixSpelling('
    sit',si_span,si)"> sit</div>
    <div class="suggestion" id=" ski" onClick="fixSpelling('
    ski',si_span,si)"> ski</div>
    <div class="suggestion" id=" Sid" onClick="fixSpelling('
    Sid',si_span,si)"> Sid</div>
    <div class="suggestion" id=" Sir" onClick="fixSpelling('
    Sir',si_span,si)"> Sir</div>
    <div class="suggestion" id=" Sri" onClick="fixSpelling('
    Sri',si_span,si)"> Sri</div>
    <div class="suggestion" id=" SSI" onClick="fixSpelling('
    SSI',si_span,si)"> SSI</div>
    <div class="suggestion" id=" SDI" onClick="fixSpelling('
    SDI',si_span,si)"> SDI</div>
    <div class="suggestion" id=" said" onClick="fixSpelling('
    said',si_span,si)"> said</div>
    </div>
    <div class="suggestionList" id="Teh"
    onMouseOut="hideSuggestion(event,Teh)" style="width:70px">
    <div class="suggestion" id="T eh" onClick="fixSpelling('T
    eh',Teh_span,Teh)">T eh</div>
    <div class="suggestion" id=" Eh" onClick="fixSpelling('
    Eh',Teh_span,Teh)"> Eh</div>
    <div class="suggestion" id=" Tehran" onClick="fixSpelling('
    Tehran',Teh_span,Teh)"> Tehran</div>
    <div class="suggestion" id=" 4th" onClick="fixSpelling('
    4th',Teh_span,Teh)"> 4th</div>
    <div class="suggestion" id=" 5th" onClick="fixSpelling('
    5th',Teh_span,Teh)"> 5th</div>
    <div class="suggestion" id=" 6th" onClick="fixSpelling('
    6th',Teh_span,Teh)"> 6th</div>
    <div class="suggestion" id=" 7th" onClick="fixSpelling('
    7th',Teh_span,Teh)"> 7th</div>
    <div class="suggestion" id=" 8th" onClick="fixSpelling('
    8th',Teh_span,Teh)"> 8th</div>
    <div class="suggestion" id=" 9th" onClick="fixSpelling('
    9th',Teh_span,Teh)"> 9th</div>
    <div class="suggestion" id=" THC" onClick="fixSpelling('
    THC',Teh_span,Teh)"> THC</div>
    <div class="suggestion" id=" Ute" onClick="fixSpelling('
    Ute',Teh_span,Teh)"> Ute</div>
    <div class="suggestion" id=" Ate" onClick="fixSpelling('
    Ate',Teh_span,Teh)"> Ate</div>
    <div class="suggestion" id=" Nth" onClick="fixSpelling('
    Nth',Teh_span,Teh)"> Nth</div>
    <div class="suggestion" id=" Rte" onClick="fixSpelling('
    Rte',Teh_span,Teh)"> Rte</div>
    <div class="suggestion" id=" Tae" onClick="fixSpelling('
    Tae',Teh_span,Teh)"> Tae</div>
    <div class="suggestion" id=" Thy" onClick="fixSpelling('
    Thy',Teh_span,Teh)"> Thy</div>
    </div>
    <div class="suggestionList" id="coloor"
    onMouseOut="hideSuggestion(event,coloor)" style="width:100px">
    <div class="suggestion" id="colour"
    onClick="fixSpelling('colour',coloor_span,coloor)">colour</div>
    <div class="suggestion" id=" colours" onClick="fixSpelling('
    colours',coloor_span,coloor)"> colours</div>
    <div class="suggestion" id=" Colorado" onClick="fixSpelling('
    Colorado',coloor_span,coloor)"> Colorado</div>
    <div class="suggestion" id=" colorant" onClick="fixSpelling('
    colorant',coloor_span,coloor)"> colorant</div>
    <div class="suggestion" id=" colorize" onClick="fixSpelling('
    colorize',coloor_span,coloor)"> colorize</div>
    <div class="suggestion" id=" colloq" onClick="fixSpelling('
    colloq',coloor_span,coloor)"> colloq</div>
    <div class="suggestion" id=" choler" onClick="fixSpelling('
    choler',coloor_span,coloor)"> choler</div>
    <div class="suggestion" id=" coiler" onClick="fixSpelling('
    coiler',coloor_span,coloor)"> coiler</div>
    <div class="suggestion" id=" colorants" onClick="fixSpelling('
    colorants',coloor_span,coloor)"> colorants</div>
    <div class="suggestion" id=" colorcast" onClick="fixSpelling('
    colorcast',coloor_span,coloor)"> colorcast</div>
    <div class="suggestion" id=" colorings" onClick="fixSpelling('
    colorings',coloor_span,coloor)"> colorings</div>
    <div class="suggestion" id=" colorized" onClick="fixSpelling('
    colorized',coloor_span,coloor)"> colorized</div>
    <div class="suggestion" id=" colorizes" onClick="fixSpelling('
    colorizes',coloor_span,coloor)"> colorizes</div>
    <div class="suggestion" id=" coloured" onClick="fixSpelling('
    coloured',coloor_span,coloor)"> coloured</div>
    <div class="suggestion" id=" colourer" onClick="fixSpelling('
    colourer',coloor_span,coloor)"> colourer</div>
    <div class="suggestion" id=" caloric" onClick="fixSpelling('
    caloric',coloor_span,coloor)"> caloric</div>
    </div>
    <div class="suggestionList" id="kewl"
    onMouseOut="hideSuggestion(event,kewl)" style="width:70px">
    <div class="suggestion" id="knew"
    onClick="fixSpelling('knew',kewl_span,kewl)">knew</div>
    <div class="suggestion" id=" keel" onClick="fixSpelling('
    keel',kewl_span,kewl)"> keel</div>
    <div class="suggestion" id=" skew" onClick="fixSpelling('
    skew',kewl_span,kewl)"> skew</div>
    <div class="suggestion" id=" Kiel" onClick="fixSpelling('
    Kiel',kewl_span,kewl)"> Kiel</div>
    <div class="suggestion" id=" mewl" onClick="fixSpelling('
    mewl',kewl_span,kewl)"> mewl</div>
    <div class="suggestion" id=" el" onClick="fixSpelling('
    el',kewl_span,kewl)"> el</div>
    <div class="suggestion" id=" knell" onClick="fixSpelling('
    knell',kewl_span,kewl)"> knell</div>
    <div class="suggestion" id=" knelt" onClick="fixSpelling('
    knelt',kewl_span,kewl)"> knelt</div>
    <div class="suggestion" id=" jewel" onClick="fixSpelling('
    jewel',kewl_span,kewl)"> jewel</div>
    <div class="suggestion" id=" keels" onClick="fixSpelling('
    keels',kewl_span,kewl)"> keels</div>
    <div class="suggestion" id=" kneel" onClick="fixSpelling('
    kneel',kewl_span,kewl)"> kneel</div>
    <div class="suggestion" id=" kwela" onClick="fixSpelling('
    kwela',kewl_span,kewl)"> kwela</div>
    <div class="suggestion" id=" El" onClick="fixSpelling('
    El',kewl_span,kewl)"> El</div>
    <div class="suggestion" id=" kW" onClick="fixSpelling('
    kW',kewl_span,kewl)"> kW</div>
    <div class="suggestion" id=" mewls" onClick="fixSpelling('
    mewls',kewl_span,kewl)"> mewls</div>
    <div class="suggestion" id=" knells" onClick="fixSpelling('
    knells',kewl_span,kewl)"> knells</div>
    </div>

    Any suggestions?

    Thanks

    Rich
    , Apr 19, 2006
    #1
    1. Advertising

  2. wrote:
    <snip>
    > ... . My problema is in Firefox, if I click on a word to show
    > sugggestions, and then run the spell check again, and then click on
    > that same word, the suggestion list does not pop up. ...

    <snip>
    > I have included my code.

    <snip>
    > function showSuggestions(e,element) {
    >
    > var posx = 0;
    > var posy = 0;
    > if (!e) var e = window.event;


    It is superfluous the attempt to declare an - e - local variable with
    the - var - keyword as this function already has an - e - formal
    parameter. Declaring - e - will not modify the Variable object as it
    already has an - e - property.

    > if (e.pageX || e.pageY)
    > {


    The logic above is not considering the possibility that pageX/Y are
    defined on the event object but currently have zero values. Although
    that is unlikely in this context it is indicative of a failure to fully
    join up the thought process that resulted in the design of this code.

    > posx = e.pageX;
    > posy = e.pageY;
    > }
    > else if (e.clientX || e.clientY)
    > {
    >
    > posx = e.clientX + document.body.scrollLeft;
    > posy = e.clientY + document.body.scrollTop;


    Adding - document.body.scrollLeft - without verifying browser support
    for the property also demonstrates an incomplete thought process. It
    also supposes that IE 6 will be operating in quirks mode, as otherwise
    the applicable scroll values are represented on the - documentElement -.
    If IE6 is operating in quirks mode the odds are good that, for example,
    Mozilla and Opera will also be, with subsequent implications for the DOM
    being scripted.

    <snip>
    > <div class="suggestion" id=" psi" onClick="fixSpelling('

    <snip> ^
    > <div class="suggestion" id=" sib" onClick="fixSpelling('

    <snip> ^
    > <div class="suggestion" id="T eh" onClick="fixSpelling('T

    <snip> ^

    The HTML ID attribute is restricted in terms of the characters that may
    be used and the character sequence used. IDs may not start with space
    characters, or decimal digits. The browser's decision to correct this
    error, or go with it, is probably significant to your particular issue.

    Richard.
    Richard Cornford, Apr 23, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. paul reed

    Wierd Behavior of __doPostBack

    paul reed, Jul 8, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    549
    Bassel Tabbara [MSFT]
    Jul 8, 2003
  2. Steve

    Wierd datalist behavior

    Steve, Jul 8, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    324
    Steve
    Jul 8, 2003
  3. =?Utf-8?B?TWljaGFlbCBMb3VnaHJ5?=

    Wierd behavior with text box postback

    =?Utf-8?B?TWljaGFlbCBMb3VnaHJ5?=, Jun 21, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    557
    =?Utf-8?B?TWljaGFlbCBMb3VnaHJ5?=
    Jun 22, 2005
  4. Qun Cao

    wierd threading behavior

    Qun Cao, Oct 15, 2005, in forum: Python
    Replies:
    6
    Views:
    289
    dcrespo
    Oct 18, 2005
  5. subaruwrx88011

    Wierd Map Behavior

    subaruwrx88011, Feb 20, 2006, in forum: C++
    Replies:
    5
    Views:
    368
    subaruwrx88011
    Feb 20, 2006
Loading...

Share This Page