Wierd behavior in Firefox

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(new Word,element,el ementToHide) {

element.innerHT ML = newWord;
element.classNa me = "noSpellErr or";
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.s crollLeft;
posy = e.clientY + document.body.s crollTop;
}
alert(posx + " - " + posy);

//alert(element.i nnerHTML);

element.style.l eft=posx-10;
element.style.t op=posy-10;
element.style.d isplay="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.d isplay="none";
}
}

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

function spellCheck() {
try{
var
url="SpellCheck Servlet?text="+ document.getEle mentById("textA rea").value;
xmlHttp=GetXmlH ttpObject(state Changed);
xmlHttp.open("P OST", url , true);
xmlHttp.send(nu ll);
} catch (e) {
alert(e);
return;
}

document.getEle mentById("messa ge").innerHTML= "Loading ... <img
src=\"anicircle .gif\"/>";

}

function stateChanged() {
if (xmlHttp.readyS tate==4 || xmlHttp.readySt ate=="complete" ) {
document.getEle mentById("messa ge").innerHTML= xmlHttp.respons eText;
//alert(xmlHttp.r esponseText);

}
}

function GetXmlHttpObjec t(handler) {
var objXmlHttp=null ;

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

if (navigator.user Agent.indexOf(" MSIE")>=0) {
var strName="Msxml2 .XMLHTTP";
if (navigator.appV ersion.indexOf( "MSIE 5.5")>=0) {
strName="Micros oft.XMLHTTP";
}

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

if (navigator.user Agent.indexOf(" Mozilla")>=0){
objXmlHttp=new XMLHttpRequest( );
objXmlHttp.onlo ad=handler;
objXmlHttp.oner ror=handler;
return objXmlHttp;
}

}
//End JS

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

<html>
<head>

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

<body>

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

<form id="theForm">

<textarea id="textArea">T eh 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.noSpellErr or {

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

}

div.spellCheck {

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

div.suggestionL ist {
border:1px solid #00aeff;
background-color:#e7f7ff;
display:none;
position:absolu te;
padding:3px 3px 3px 3px;
}
div.suggestion {
cursor:pointer;
}

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

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

<div id="spellCheck " class="spellChe ck"><span class="spellErr or"
id="Teh_span" onClick="showSu ggestions(event ,Teh)">Teh</span> <span
class="spellErr or" id="coloor_span "
onClick="showSu ggestions(event ,coloor)">coloo r</span> <span
class="spellErr or" id="si_span"
onClick="showSu ggestions(event ,si)">si</span> <span class="spellErr or"
id="kewl_span" onClick="showSu ggestions(event ,kewl)">kewl</span></div>

<div class="suggesti onList" id="si"
onMouseOut="hid eSuggestion(eve nt,si)" style="width:50 px">
<div class="suggesti on" id="six"
onClick="fixSpe lling('six',si_ span,si)">six</div>
<div class="suggesti on" id=" psi" onClick="fixSpe lling('
psi',si_span,si )"> psi</div>
<div class="suggesti on" id=" sib" onClick="fixSpe lling('
sib',si_span,si )"> sib</div>
<div class="suggesti on" id=" sic" onClick="fixSpe lling('
sic',si_span,si )"> sic</div>
<div class="suggesti on" id=" sin" onClick="fixSpe lling('
sin',si_span,si )"> sin</div>
<div class="suggesti on" id=" sip" onClick="fixSpe lling('
sip',si_span,si )"> sip</div>
<div class="suggesti on" id=" sir" onClick="fixSpe lling('
sir',si_span,si )"> sir</div>
<div class="suggesti on" id=" sis" onClick="fixSpe lling('
sis',si_span,si )"> sis</div>
<div class="suggesti on" id=" sit" onClick="fixSpe lling('
sit',si_span,si )"> sit</div>
<div class="suggesti on" id=" ski" onClick="fixSpe lling('
ski',si_span,si )"> ski</div>
<div class="suggesti on" id=" Sid" onClick="fixSpe lling('
Sid',si_span,si )"> Sid</div>
<div class="suggesti on" id=" Sir" onClick="fixSpe lling('
Sir',si_span,si )"> Sir</div>
<div class="suggesti on" id=" Sri" onClick="fixSpe lling('
Sri',si_span,si )"> Sri</div>
<div class="suggesti on" id=" SSI" onClick="fixSpe lling('
SSI',si_span,si )"> SSI</div>
<div class="suggesti on" id=" SDI" onClick="fixSpe lling('
SDI',si_span,si )"> SDI</div>
<div class="suggesti on" id=" said" onClick="fixSpe lling('
said',si_span,s i)"> said</div>
</div>
<div class="suggesti onList" id="Teh"
onMouseOut="hid eSuggestion(eve nt,Teh)" style="width:70 px">
<div class="suggesti on" id="T eh" onClick="fixSpe lling('T
eh',Teh_span,Te h)">T eh</div>
<div class="suggesti on" id=" Eh" onClick="fixSpe lling('
Eh',Teh_span,Te h)"> Eh</div>
<div class="suggesti on" id=" Tehran" onClick="fixSpe lling('
Tehran',Teh_spa n,Teh)"> Tehran</div>
<div class="suggesti on" id=" 4th" onClick="fixSpe lling('
4th',Teh_span,T eh)"> 4th</div>
<div class="suggesti on" id=" 5th" onClick="fixSpe lling('
5th',Teh_span,T eh)"> 5th</div>
<div class="suggesti on" id=" 6th" onClick="fixSpe lling('
6th',Teh_span,T eh)"> 6th</div>
<div class="suggesti on" id=" 7th" onClick="fixSpe lling('
7th',Teh_span,T eh)"> 7th</div>
<div class="suggesti on" id=" 8th" onClick="fixSpe lling('
8th',Teh_span,T eh)"> 8th</div>
<div class="suggesti on" id=" 9th" onClick="fixSpe lling('
9th',Teh_span,T eh)"> 9th</div>
<div class="suggesti on" id=" THC" onClick="fixSpe lling('
THC',Teh_span,T eh)"> THC</div>
<div class="suggesti on" id=" Ute" onClick="fixSpe lling('
Ute',Teh_span,T eh)"> Ute</div>
<div class="suggesti on" id=" Ate" onClick="fixSpe lling('
Ate',Teh_span,T eh)"> Ate</div>
<div class="suggesti on" id=" Nth" onClick="fixSpe lling('
Nth',Teh_span,T eh)"> Nth</div>
<div class="suggesti on" id=" Rte" onClick="fixSpe lling('
Rte',Teh_span,T eh)"> Rte</div>
<div class="suggesti on" id=" Tae" onClick="fixSpe lling('
Tae',Teh_span,T eh)"> Tae</div>
<div class="suggesti on" id=" Thy" onClick="fixSpe lling('
Thy',Teh_span,T eh)"> Thy</div>
</div>
<div class="suggesti onList" id="coloor"
onMouseOut="hid eSuggestion(eve nt,coloor)" style="width:10 0px">
<div class="suggesti on" id="colour"
onClick="fixSpe lling('colour', coloor_span,col oor)">colour</div>
<div class="suggesti on" id=" colours" onClick="fixSpe lling('
colours',coloor _span,coloor)"> colours</div>
<div class="suggesti on" id=" Colorado" onClick="fixSpe lling('
Colorado',coloo r_span,coloor)" > Colorado</div>
<div class="suggesti on" id=" colorant" onClick="fixSpe lling('
colorant',coloo r_span,coloor)" > colorant</div>
<div class="suggesti on" id=" colorize" onClick="fixSpe lling('
colorize',coloo r_span,coloor)" > colorize</div>
<div class="suggesti on" id=" colloq" onClick="fixSpe lling('
colloq',coloor_ span,coloor)"> colloq</div>
<div class="suggesti on" id=" choler" onClick="fixSpe lling('
choler',coloor_ span,coloor)"> choler</div>
<div class="suggesti on" id=" coiler" onClick="fixSpe lling('
coiler',coloor_ span,coloor)"> coiler</div>
<div class="suggesti on" id=" colorants" onClick="fixSpe lling('
colorants',colo or_span,coloor) "> colorants</div>
<div class="suggesti on" id=" colorcast" onClick="fixSpe lling('
colorcast',colo or_span,coloor) "> colorcast</div>
<div class="suggesti on" id=" colorings" onClick="fixSpe lling('
colorings',colo or_span,coloor) "> colorings</div>
<div class="suggesti on" id=" colorized" onClick="fixSpe lling('
colorized',colo or_span,coloor) "> colorized</div>
<div class="suggesti on" id=" colorizes" onClick="fixSpe lling('
colorizes',colo or_span,coloor) "> colorizes</div>
<div class="suggesti on" id=" coloured" onClick="fixSpe lling('
coloured',coloo r_span,coloor)" > coloured</div>
<div class="suggesti on" id=" colourer" onClick="fixSpe lling('
colourer',coloo r_span,coloor)" > colourer</div>
<div class="suggesti on" id=" caloric" onClick="fixSpe lling('
caloric',coloor _span,coloor)"> caloric</div>
</div>
<div class="suggesti onList" id="kewl"
onMouseOut="hid eSuggestion(eve nt,kewl)" style="width:70 px">
<div class="suggesti on" id="knew"
onClick="fixSpe lling('knew',ke wl_span,kewl)"> knew</div>
<div class="suggesti on" id=" keel" onClick="fixSpe lling('
keel',kewl_span ,kewl)"> keel</div>
<div class="suggesti on" id=" skew" onClick="fixSpe lling('
skew',kewl_span ,kewl)"> skew</div>
<div class="suggesti on" id=" Kiel" onClick="fixSpe lling('
Kiel',kewl_span ,kewl)"> Kiel</div>
<div class="suggesti on" id=" mewl" onClick="fixSpe lling('
mewl',kewl_span ,kewl)"> mewl</div>
<div class="suggesti on" id=" el" onClick="fixSpe lling('
el',kewl_span,k ewl)"> el</div>
<div class="suggesti on" id=" knell" onClick="fixSpe lling('
knell',kewl_spa n,kewl)"> knell</div>
<div class="suggesti on" id=" knelt" onClick="fixSpe lling('
knelt',kewl_spa n,kewl)"> knelt</div>
<div class="suggesti on" id=" jewel" onClick="fixSpe lling('
jewel',kewl_spa n,kewl)"> jewel</div>
<div class="suggesti on" id=" keels" onClick="fixSpe lling('
keels',kewl_spa n,kewl)"> keels</div>
<div class="suggesti on" id=" kneel" onClick="fixSpe lling('
kneel',kewl_spa n,kewl)"> kneel</div>
<div class="suggesti on" id=" kwela" onClick="fixSpe lling('
kwela',kewl_spa n,kewl)"> kwela</div>
<div class="suggesti on" id=" El" onClick="fixSpe lling('
El',kewl_span,k ewl)"> El</div>
<div class="suggesti on" id=" kW" onClick="fixSpe lling('
kW',kewl_span,k ewl)"> kW</div>
<div class="suggesti on" id=" mewls" onClick="fixSpe lling('
mewls',kewl_spa n,kewl)"> mewls</div>
<div class="suggesti on" id=" knells" onClick="fixSpe lling('
knells',kewl_sp an,kewl)"> knells</div>
</div>

Any suggestions?

Thanks

Rich

Apr 19 '06 #1

Subscribe Reply

1542

Richard Cornford

ri**********@gm ail.com 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.s crollLeft;
posy = e.clientY + document.body.s crollTop;
Adding - document.body.s crollLeft - 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="suggesti on" id=" psi" onClick="fixSpe lling(' <snip> ^ <div class="suggesti on" id=" sib" onClick="fixSpe lling(' <snip> ^ <div class="suggesti on" id="T eh" onClick="fixSpe lling('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.

Apr 23 '06 #2

Similar topics

2862

Wierd offsetTop value with relative positioned Element in table inWin IE 6

by: Markus Fischer | last post by:

Hi, I'm experiencing a wierd problem with IE 6 in Windows with two _slightly_ different Version. Give the following HTMl-Code, ideally the output of offsetTop should be "105"; a few pixel plus minus would still be ok, whyever. I've tested this successfully on 6.0.2800.1106 on a german W2KPro machine, also with 6.0.2800.1106 on a german...

Javascript

1708

wierd threading behavior

by: Qun Cao | last post by:

Hello, I am just starting to play threading in python, here is a really interesting problem I am very curious about: " import thread def main(): thread.start_new(test.()) def test():

Python

6800

Wierd Behavior of __doPostBack

by: paul reed | last post by:

Hello, I am having some weird behavior between two machines...one which is running the 1.1 framework and one which is running 1.0. After opening a child form from a parent...I update the database then call the __doPostBack function of the window.opener. This has been working like a charm for the last several months. Our ISP where we run...

ASP.NET

1173

Wierd issue with listbox and Begin...Endupdate

by: Tom | last post by:

OK, here's a wierd one... I have a listbox, which I fill with strings (in my case, file names). I normally load this via a loop, adding each item to the list box in the loop. I put lb.BeginUpdate before the start of the loop, and lb.EndUpdate at the conclusion of the loop. Here's the wierd part: If there is only ONE line loaded into the list...

Visual Basic .NET

2459

FireFox/IE behavior diff during onload

by: KPS | last post by:

I'm attempting to create a simple treeview-like behavior in JavaScript. The desired behavior happens in IE but I cannot get the same to happen in FireFox. The primary thing I want to accomplish is to set the id and href of some objects dynamically during the onload of the page instead of hard-coding it in the HTML. I want to set the id/href...

Javascript

1539

Wierd .NET Debugging behavior...

by: Tom | last post by:

We are experiencing some wierd debugging behavior. What happens is that, during debugging with VS 2003, the debugger seems to 'skip' statements that are associated with database operations. For instance, I can be single-stepping through a VB.NET program, and once I hit a DB related statement (such as setting command parameters, executing a...

Visual Basic .NET

1512

wierd behavior

by: Muthu Arumugam | last post by:

Tried the following c# code static void Main(string args) { ArrayList list = new ArrayList(); int i = 10;

C# / C Sharp

7553

Frameset look and behavior problem in Firefox... Help Please!

by: Giggle Girl | last post by:

Hello there, :) I need a frameset that will have the same look and behavior in Firefox 1.5+ as it does in IE 6+. Here is a URL for it: http://66.51.164.93/fs/default.htm In IE, the "seam" between the three frames is blue, 4 or 5 pixels wide, and -- most importantly! -- draggable! It is great -- in IE, that is. Is it possible to have...

HTML / CSS

2804

Super wierd FireFox problem/Bug ? Please help

by: davecph | last post by:

I'm constructing a website with a layout created with div-tags. They have a fixed width, float left, and display inline. When one of the div's contain a select-element the right-most div floats down for no apparent reason, but when the select-elements are gone they all align as expected. No css apply to the select-elements. image of prob.:...

HTML / CSS

7923

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7852

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

8216

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

7974

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

8221

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...

General

6629

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...

Career Advice

5395

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

3845

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...

Networking - Hardware / Configuration

1192

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General