Wierd behavior in Firefox

R

richardsayre

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
 
R

Richard Cornford

... . 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. ...
Click to expand...
I have included my code.
Click to expand...
function showSuggestions(e,element) {

var posx = 0;
var posy = 0;
if (!e) var e = window.event;
Click to expand...

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)
{
Click to expand...

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;
Click to expand...

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.

<div class="suggestion" id=" psi" onClick="fixSpelling('
Click to expand...
<div class="suggestion" id=" sib" onClick="fixSpelling('
Click to expand...
<div class="suggestion" id="T eh" onClick="fixSpelling('T
Click to expand...
<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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Set value after clicking in field 11
Help with code 0
Survey details won't go through using php, ajax, Mysql 3
Google sheets song request 3
Script working in Firefox but not Chrome and Safari 3
Help with my responsive home page 2
I Need Help with making a function that draws in a canvas using location data. 1
Bootstrap Tree View doesnt search properly. I am searching for 954116679 (FSP) but it returns 0 matches found 2

Members online

Total: 146 (members: 2, guests: 144)
Robots: 221

Forum statistics

Threads
474,262
Messages
2,571,056
Members
48,769
Latest member
Clifft

Latest Threads

Top