node.innerHTML = '...' not working in IE

J

Joel Byrd

I am having this ridiculous problem of trying to set the innerHTML of a
div node. It works in all other browsers, but internet explorer is
giving me an "Unknown runtime error". This is actually in the context
of developing an auto-suggest (basically reverse-engineering Google
Suggest), but I don't see how any of the other code has anything to do
with it. I *pretty sure* that I've narrowed it down to 1 line (the
line on which the javascript error is being thrown. The following is
the line that's throwing the javascript error:

[-----------------------------------------------------

document.getElementById('suggest_box').innerHTML = listings;

-----------------------------------------------------]

where "listings" is html code gotten using the XmlHttpRequest object on
a remote PHP file. I do an "alert(listings)" and a
"alert(document.getElementById('suggest_box').innerHTML)" right before
the error line and sure enough, the listings is showing that it is
indeed set, and the suggest_box node indeed exists. My brain is fried
from trying to figure this thing out. I would love any
suggestions/comments anybody has about this. Thanks!
 
E

Evertjan.

Joel Byrd wrote on 17 nov 2005 in comp.lang.javascript:
I am having this ridiculous problem of trying to set the innerHTML of a
div node. It works in all other browsers, but internet explorer is
giving me an "Unknown runtime error". This is actually in the context
of developing an auto-suggest (basically reverse-engineering Google
Suggest), but I don't see how any of the other code has anything to do
with it. I *pretty sure* that I've narrowed it down to 1 line (the
line on which the javascript error is being thrown. The following is
the line that's throwing the javascript error:

[-----------------------------------------------------

document.getElementById('suggest_box').innerHTML = listings;

-----------------------------------------------------]

where "listings" is html code gotten using the XmlHttpRequest object on
a remote PHP file. I do an "alert(listings)" and a
"alert(document.getElementById('suggest_box').innerHTML)" right before
the error line and sure enough, the listings is showing that it is
indeed set, and the suggest_box node indeed exists. My brain is fried
from trying to figure this thing out. I would love any
suggestions/comments anybody has about this. Thanks!

perhaps "listings" is not a string but an object?

Could you try:

document.getElementById('suggest_box').innerHTML = '' + listings;
 
J

Joel Byrd

No, I've actually tried that.

Evertjan. said:
Joel Byrd wrote on 17 nov 2005 in comp.lang.javascript:
I am having this ridiculous problem of trying to set the innerHTML of a
div node. It works in all other browsers, but internet explorer is
giving me an "Unknown runtime error". This is actually in the context
of developing an auto-suggest (basically reverse-engineering Google
Suggest), but I don't see how any of the other code has anything to do
with it. I *pretty sure* that I've narrowed it down to 1 line (the
line on which the javascript error is being thrown. The following is
the line that's throwing the javascript error:

[-----------------------------------------------------

document.getElementById('suggest_box').innerHTML = listings;

-----------------------------------------------------]

where "listings" is html code gotten using the XmlHttpRequest object on
a remote PHP file. I do an "alert(listings)" and a
"alert(document.getElementById('suggest_box').innerHTML)" right before
the error line and sure enough, the listings is showing that it is
indeed set, and the suggest_box node indeed exists. My brain is fried
from trying to figure this thing out. I would love any
suggestions/comments anybody has about this. Thanks!

perhaps "listings" is not a string but an object?

Could you try:

document.getElementById('suggest_box').innerHTML = '' + listings;
 
V

VK

Joel said:
I am having this ridiculous problem of trying to set the innerHTML of a
div node. It works in all other browsers, but internet explorer is
giving me an "Unknown runtime error". This is actually in the context
of developing an auto-suggest (basically reverse-engineering Google
Suggest), but I don't see how any of the other code has anything to do
with it. I *pretty sure* that I've narrowed it down to 1 line (the
line on which the javascript error is being thrown. The following is
the line that's throwing the javascript error:

[-----------------------------------------------------

document.getElementById('suggest_box').innerHTML = listings;

-----------------------------------------------------]

where "listings" is html code gotten using the XmlHttpRequest object on
a remote PHP file. I do an "alert(listings)" and a
"alert(document.getElementById('suggest_box').innerHTML)" right before
the error line and sure enough, the listings is showing that it is
indeed set, and the suggest_box node indeed exists. My brain is fried
from trying to figure this thing out. I would love any
suggestions/comments anybody has about this. Thanks!

By any chance - maybe your "listings" contains HTML code for a table?
 
J

Julian Turner

Joel said:
I am having this ridiculous problem of trying to set the innerHTML of a
div node. It works in all other browsers, but internet explorer is
giving me an "Unknown runtime error". [snip]

where "listings" is html code gotten using the XmlHttpRequest object on
a remote PHP file. I do an "alert(listings)" and a
"alert(document.getElementById('suggest_box').innerHTML)" right before
the error line and sure enough, the listings is showing that it is
indeed set, and the suggest_box node indeed exists.

Could you post the actual HTML contained within "listings" so we can
see what you are trying to put into the innerHTML.

Julian
 
J

Joel Byrd

Hey, guys - I've actually gotten even closer to solving the problem,
and I found out it has nothing to do with the contents of "listings"
(in fact, the same javascript error is thrown when I try to set the
suggest_box div to some hard-coded text, e.g.
"document.getElementById('suggest_box').innerHTML = 'text'; "). I
traced the problem back to where I am defining the parent node of the
textbox for which I want to use the suggest box on. Basically, here's
what I'm trying to do. I want to place the suggest_box div node right
next to the textbox so that it will display in the right spot. So
first, I create the suggest_box div:

[------------------------------------------
var suggest_div = document.createElement('div');
suggest_div.id = 'suggest_box';
--------------------------------------------]

Next, I want to place this right next to the textbox - so basically I
need to make the suggest_box div a sibling of the textbox and use the
insertBefore() method to insert the suggest_box div right before the
textbox. Before I do that, I must first find the parent of the
textbox, so that I can do a "parent.insertBefore(suggest_div,
textBox)". Now, apparently, something is happening at the line where I
do the insertBefore, because before that line, I can successfully set
the innerHTML of the suggest_box div, but after that line, it throws
the error when I try to. Ok, so the code (with some testing lines)
looks like the following:

[------------------------------------------------------------------------
CODE SAMPLE 1

1 var suggest_div = document.createElement('div');
2 suggest_div.id = 'suggest_box';
3
4 var textBox = document.getElementById(input_box_id);
5 var parent = textBox.parentNode;
6
7 suggest_div.innerHTML = 'test before'; //this line works.
8 alert(parent.innerHTML);
9 parent.insertBefore(suggest_div, textBox); //apparently something
happens here so that...
10 suggest_div.innerHTML = 'test after'; //this line does *not* work
(throws "Unknown runtime error").
-------------------------------------------------------------------------]

Another clue I can give you is that if I change the actual page html a
little bit, then it does work. I'll give you a case in which it does
not work and a case in which it does. Using the following html, the
code does NOT work ("Unknown runtime error" thrown on line 10 in CODE
SAMPLE 1):

[-------------------------------------------------------------------------
CODE SAMPLE 2

1 <body>
2 some text.

3 <p>
4 <input name="q" type="text" id="q" size="50">
5 </p>
6
7 aaa
8
9 </body>
--------------------------------------------------------------------------]

But, using the following html (adding a paragraph within the paragraph
that the textbox is in), it DOES work:

[--------------------------------------------------------------------------
CODE SAMPLE 3

1 <body>
2 some text.
3
4 <p>
5 <p>asdf</p>
6 <input name="q" type="text" id="q" size="50">
7 </p>
8
9 aaa
10
11 </body>
---------------------------------------------------------------------------]

But note also that while this works, the alert(parent.innerHTML) on
line 8 in CODE SAMPLE 1 shows that the innerHTML of the textbox's
parent node is:

[-------------------------------------
some text.
<P>
<P>asdf</P><INPUT id=q size=50 name=q autocomplete="off">
<P></P>aaa
-----------------------------------------]

This would mean that the parent node is, in fact, the body tag node,
but that's not true (the parent node of the textbox should be its
surrounding paragraph). In fact, it's technically improper to nest a
paragraph within a paragraph anyway, but apparently, this works in IE
(by the way, it still works in the other browsers, too). One final
note is that the code also works in IE if I surround the textbox in a
div. Sorry for the long post, and thanks for the help so far -
hopefully someone has some insight into this javascript stuff and IE's
quirkiness (or my bad programming). Thanks!

Joel
 
V

VK

(please look at the previous post for code samples)

You mistake was to consider parent/child relationships as a refraction
of the page layout, but they are not.

For example

<form>
<formset>
<input>

are in parent<>child relationship as sub/sup elements of one big
structure

but:
<form>
<div>
<input>

<div> is not a child of <form> and it is not the parent of <input>. It
is totally alien buddy just happened to stay between parent and child.

In 5 min thinking I can tell that what you're trying to do is not
possible at all exept maybe on IE using its proprietary
insertAdjacentElement() method:

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function test() {
var d = document.createElement('DIV');
d.id = 'suggestBox';
d.innerHTML = '<i>Search suggestions...</i>';
var q = document.getElementById('q');
q.insertAdjacentElement('afterEnd',d);
}
</script>
</head>

<body onload="test()">

<p>Lorem ipsum 1</p>

<form name="form01" method="post" action="">
<input type="text" name="q" size="50" autocomplete="off">
</form>

<p>Lorem ipsum 2</p>

</body>
</html>

After 20-30 mins of thinking I may possibly come to some hacking
solution for other browsers. But why? Why don't you place an empty
<span> element after your textbox? That would solve the problem in a
very easy and universal way:

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function test() {
document.getElementById('suggestBox').innerHTML =
'Why not like this?';
}
</script>
</head>

<body onload="test()">

<p>Lorem ipsum 1</p>

<form name="form01" method="post" action="">
<input type="text" name="q" size="50" autocomplete="off">
<span id="suggestBox">&nbsp;</span>
</form>

<p>Lorem ipsum 2</p>

</body>
</html>
 
J

Joel Byrd

VK,

Thank you for your commnents. In response, I have a question for you
and a comment. First, if the parent/child relationships are not a
refraction of the page layout (I assume this means like a direct
reflection of), then what are they, exactly - how are they defined?
And if the relationship is defined in a fickle way, then it seems that
using the "parentNode" property of a node would never really be useful
since you can't know exactly what the parentNode is referring to.

And to comment on your suggestion, I *can* simply add the suggestBox
span element after the inputbox. In fact, I have done it and it works
with no problems. But what I'm trying to do is make this code portable
and easy to use (idiot-proof), so that someone can just make one
function call, passing the id of the textbox as one of the parameters;
and all the rest of the work (like adding the suggestBox span [or div])
is automatically done for them so that everytime someone wants to use
this, they don't have to manually insert the span themselves.

Joel
 
T

Thomas 'PointedEars' Lahn

VK said:
(please look at the previous post for code samples)

You mistake was to consider parent/child relationships as a refraction
of the page layout, but they are not.

For example

<form>
<formset>
<input>

are in parent<>child relationship as sub/sup elements of one big
structure

but:
<form>
<div>
<input>

<div> is not a child of <form> and it is not the parent of <input>. It
is totally alien buddy just happened to stay between parent and child.

I back your pardon? You must have a very strange definition of parent and
child because the `div' element (considering the respective end tags and
required content is added) _is_ a child element node of the `form' element
and the `input' element _is_ its child node, while the `div' element _is_
the parent element node of the `input' element and the `form' element _is_
its parent element node.


PointedEars
 
J

Joel Byrd

Ok, I just had a breakthrough. In your comments, VK, you said to use a
span tag for the suggestBox. I had been using a div. Well, I just
tried creating a suggestBox *span* instead of div, and guess what? It
works! (well, in Opera I'm having a little XmlHttpRequest compatability
problem [even using Sarissa - maybe I need a different version], but
that's niether here nor there...). Now, I'm still curious as to why
this would be the case. Apparently, there's more of a difference
between span and div than just a line break.

Joel
 
R

Richard Cornford

VK wrote:
You mistake was to consider parent/child relationships as a
refraction of the page layout, but they are not.

"Page layout"?
For example

<form>
<formset>

You mean 'fieldset'?
<input>

are in parent<>child relationship as sub/sup elements
of one big structure

but:
<form>
<div>
<input>

<div> is not a child of <form>

Yes it is.
and it is not the parent of <input>.

Yes it is.
It is totally alien buddy just happened to stay
between parent and child.

More utter nonsense from the confused mind of VK.
In 5 min thinking I can tell that what you're trying to do
is not possible at all exept maybe on IE using its proprietary
insertAdjacentElement() method:

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function test() {
var d = document.createElement('DIV');
d.id = 'suggestBox';
d.innerHTML = '<i>Search suggestions...</i>';
var q = document.getElementById('q');
q.insertAdjacentElement('afterEnd',d);
}
</script>
</head>

<body onload="test()">

<p>Lorem ipsum 1</p>

<form name="form01" method="post" action="">
<input type="text" name="q" size="50" autocomplete="off">
</form>

<p>Lorem ipsum 2</p>

</body>
</html>

After 20-30 mins of thinking I may possibly come to
some hacking solution for other browsers.
<snip>

I realise that thinking is not your strong suite but you don't have to
be that familiar with the DOM to see:-

q.parentNode.insertBefore(d, q.nextSibling);

- as the obvious DOM standard (and so much wider supported) alternative
to the IE only:-

q.insertAdjacentElement('afterEnd',d);

(so that is an extra 6 characters to support every dynamic DOM standard
browser including IE 5+)

And the simpler:-

q.parentNode.appendChild(d);

- as sufficient in the context of your original.

Richard.
 
R

Richard Cornford

Joel said:
Hey, guys - I've actually gotten even closer to solving
the problem,

And you would get closer still if you posted a working test case that
demonstrated the problem instead of incomplete fragments of code without
any indication of how the javascript is interacting with the HTML.
.... Basically, here's what I'm trying to do. I want to
place the suggest_box div node right next to the textbox so
that it will display in the right spot. So first, I create
the suggest_box div:

[------------------------------------------
var suggest_div = document.createElement('div');
suggest_div.id = 'suggest_box';
--------------------------------------------]

Next, I want to place this right next to the textbox - so
basically I need to make the suggest_box div a sibling of
the textbox and use the insertBefore() method to insert the
suggest_box div right before the textbox. Before I do that,
I must first find the parent of the textbox, so that I can
do a "parent.insertBefore(suggest_div, textBox)". Now,
apparently, something is happening at the line where I do
the insertBefore, because before that line, I can successfully
set the innerHTML of the suggest_box div, but after that line,
it throws the error when I try to.

So why not set the inner HTML before you insert the node (or use W3C DOM
node creation/manipulation methods to create the contents of the DIV)?
Ok, so the code (with some testing
lines) looks like the following:

[-----------------------------------------------------------
CODE SAMPLE 1

1 var suggest_div = document.createElement('div');
2 suggest_div.id = 'suggest_box';
3
4 var textBox = document.getElementById(input_box_id);
5 var parent = textBox.parentNode;
6
7 suggest_div.innerHTML = 'test before'; //this line works.
8 alert(parent.innerHTML);
9 parent.insertBefore(suggest_div, textBox); //apparently
something happens here so that...
10 suggest_div.innerHTML = 'test after'; //this line does *not*
work (throws "Unknown runtime error").
-------------------------------------------------------------]

Another clue I can give you is that if I change the actual page
html a little bit, then it does work. I'll give you a case in
which it does not work and a case in which it does. Using the
following html, the code does NOT work ("Unknown runtime error"
thrown on line 10 in CODE SAMPLE 1):

[-------------------------------------------------------------
CODE SAMPLE 2

1 <body>
2 some text.
3 <p>
4 <input name="q" type="text" id="q" size="50">
5 </p>

The HTML P element is not allowed to contain block level elements, and
DIV is a block level element. As a browser should not let you insert a
DIV as a child of a P element it is not that surprising if things stop
working properly when you attempt to do so.
6
7 aaa
8
9 </body>
-------------------------------------------------------------]

But, using the following html (adding a paragraph within the
paragraph that the textbox is in), it DOES work:

[------------------------------------------------------------
CODE SAMPLE 3

1 <body>
2 some text.
4 <p>
5 <p>asdf</p>
6 <input name="q" type="text" id="q" size="50">
7 </p>

The HTML P element is not allowed to contain block level elements, and
it is a block level element itself so it cannot contain a P element. The
P element also has an optional closing tag, which may be implied by the
context of its use. As a P element may not contain a P element an
opening P tag encountered within a P element will imply that P element's
(optional) closing tag.

Thus the HTML rules imply a closing P tag just following the first
opening P tag above. The INPUT is the child of the BODY element and the
two P elements are its preceding siblings.
8
9 aaa
10
11 </body>
---------------------------------------------------------------------- -----]

But note also that while this works, the alert(parent.innerHTML)
on line 8 in CODE SAMPLE 1 shows that the innerHTML of the
textbox's parent node is:

[-------------------------------------
some text.
<P>
<P>asdf</P><INPUT id=q size=50 name=q autocomplete="off">
<P></P>aaa

Yes, that is what you would expect, except for the P element after the
INPUT, but that is just a manifestation of error-correction in response
to encountering an unopened P closing tag.
-----------------------------------------]

This would mean that the parent node is, in fact, the
body tag node, but that's not true (the parent node of
the textbox should be its surrounding paragraph).

No, that is true and the mark-up you wrote is asking for the INPUT to be
outside of any P elements and a child of the BODY (and it is).

In fact, it's technically improper to nest a
paragraph within a paragraph anyway,

Yes it is, and since the closing P tag is optional it is actually
impossible in HTML as any opening P tag implies the closing of the
already open one.
but apparently, this works in IE

Isn't your entire problem that IE doesn't work here?
(by the way, it still works in the other browsers, too).
One final note is that the code also works in IE if I
surround the textbox in a div.

DIV elements are allowed to contain block level elements (including DIV
and P).

Sorry for the long post, and thanks for the help so far -
hopefully someone has some insight into this javascript
stuff and IE's quirkiness (or my bad programming). Thanks!

I think you would find the task more productive if you only attempted to
create validly structured DOMs, then the browsers don't have an excuse
for complaining.

Richard.
 
R

Richard Cornford

Joel Byrd wrote:
... . Well, I just tried creating a suggestBox *span*
instead of div, and guess what? It works! ... Now, I'm
still curious as to why this would be the case. Apparently,
there's more of a difference between span and div than just
a line break.

Virtually the only difference between the semantically neutral DIV and
SPAN elements is that DIV is a block level element and SPAN is an inline
element. P elements may not contain DIV elements in valid HTML, but they
may contain all inline elements.

Apart form the BR element there is not really any such thing as a line
break, just different laying-out rules applying to block and inline
elements.

Incidentally INPUT is an inline element, and generally wherever you can
have one inline element you can place another. So if you want to create
a sibling for the INPUT it would be much safer to create a SPAN (or some
other appropriate inline element (the I, BOLD, STRONG, etc elements are
also inline).

Incidentally, treat anything that VK says on technical subjects (when
you can actually deduce meaning from it at all) with more than a large
pinch of salt. It will save you much trouble in the long run.

Richard.
 
J

Joel Byrd

Richard,

Your comments were extremely helpful and in fact got at the core of my
problem. I did not realize that a p element was not allowed to contain
a block level element (but it is somewhat intuitive). Now, my problem
is solved and I've definately learned some things from it - thanks a
lot!

Joel



Richard said:
Joel said:
Hey, guys - I've actually gotten even closer to solving
the problem,

And you would get closer still if you posted a working test case that
demonstrated the problem instead of incomplete fragments of code without
any indication of how the javascript is interacting with the HTML.
.... Basically, here's what I'm trying to do. I want to
place the suggest_box div node right next to the textbox so
that it will display in the right spot. So first, I create
the suggest_box div:

[------------------------------------------
var suggest_div = document.createElement('div');
suggest_div.id = 'suggest_box';
--------------------------------------------]

Next, I want to place this right next to the textbox - so
basically I need to make the suggest_box div a sibling of
the textbox and use the insertBefore() method to insert the
suggest_box div right before the textbox. Before I do that,
I must first find the parent of the textbox, so that I can
do a "parent.insertBefore(suggest_div, textBox)". Now,
apparently, something is happening at the line where I do
the insertBefore, because before that line, I can successfully
set the innerHTML of the suggest_box div, but after that line,
it throws the error when I try to.

So why not set the inner HTML before you insert the node (or use W3C DOM
node creation/manipulation methods to create the contents of the DIV)?
Ok, so the code (with some testing
lines) looks like the following:

[-----------------------------------------------------------
CODE SAMPLE 1

1 var suggest_div = document.createElement('div');
2 suggest_div.id = 'suggest_box';
3
4 var textBox = document.getElementById(input_box_id);
5 var parent = textBox.parentNode;
6
7 suggest_div.innerHTML = 'test before'; //this line works.
8 alert(parent.innerHTML);
9 parent.insertBefore(suggest_div, textBox); //apparently
something happens here so that...
10 suggest_div.innerHTML = 'test after'; //this line does *not*
work (throws "Unknown runtime error").
-------------------------------------------------------------]

Another clue I can give you is that if I change the actual page
html a little bit, then it does work. I'll give you a case in
which it does not work and a case in which it does. Using the
following html, the code does NOT work ("Unknown runtime error"
thrown on line 10 in CODE SAMPLE 1):

[-------------------------------------------------------------
CODE SAMPLE 2

1 <body>
2 some text.
3 <p>
4 <input name="q" type="text" id="q" size="50">
5 </p>

The HTML P element is not allowed to contain block level elements, and
DIV is a block level element. As a browser should not let you insert a
DIV as a child of a P element it is not that surprising if things stop
working properly when you attempt to do so.
6
7 aaa
8
9 </body>
-------------------------------------------------------------]

But, using the following html (adding a paragraph within the
paragraph that the textbox is in), it DOES work:

[------------------------------------------------------------
CODE SAMPLE 3

1 <body>
2 some text.
4 <p>
5 <p>asdf</p>
6 <input name="q" type="text" id="q" size="50">
7 </p>

The HTML P element is not allowed to contain block level elements, and
it is a block level element itself so it cannot contain a P element. The
P element also has an optional closing tag, which may be implied by the
context of its use. As a P element may not contain a P element an
opening P tag encountered within a P element will imply that P element's
(optional) closing tag.

Thus the HTML rules imply a closing P tag just following the first
opening P tag above. The INPUT is the child of the BODY element and the
two P elements are its preceding siblings.
8
9 aaa
10
11 </body>
---------------------------------------------------------------------- -----]

But note also that while this works, the alert(parent.innerHTML)
on line 8 in CODE SAMPLE 1 shows that the innerHTML of the
textbox's parent node is:

[-------------------------------------
some text.
<P>
<P>asdf</P><INPUT id=q size=50 name=q autocomplete="off">
<P></P>aaa

Yes, that is what you would expect, except for the P element after the
INPUT, but that is just a manifestation of error-correction in response
to encountering an unopened P closing tag.
-----------------------------------------]

This would mean that the parent node is, in fact, the
body tag node, but that's not true (the parent node of
the textbox should be its surrounding paragraph).

No, that is true and the mark-up you wrote is asking for the INPUT to be
outside of any P elements and a child of the BODY (and it is).

In fact, it's technically improper to nest a
paragraph within a paragraph anyway,

Yes it is, and since the closing P tag is optional it is actually
impossible in HTML as any opening P tag implies the closing of the
already open one.
but apparently, this works in IE

Isn't your entire problem that IE doesn't work here?
(by the way, it still works in the other browsers, too).
One final note is that the code also works in IE if I
surround the textbox in a div.

DIV elements are allowed to contain block level elements (including DIV
and P).

Sorry for the long post, and thanks for the help so far -
hopefully someone has some insight into this javascript
stuff and IE's quirkiness (or my bad programming). Thanks!

I think you would find the task more productive if you only attempted to
create validly structured DOMs, then the browsers don't have an excuse
for complaining.

Richard.
 
J

Joel Byrd

Alright, alright, one last thing. I am using javascript to determine
the placement of the suggest box in relation to the input box so that
it ends up right below it. The code worked perfectly until I put the
input box inside a table cell. Any ideas why? The following is the
code I'm using:

[the style defined for the suggest box]:

#suggest_box {
border: 1px solid #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
position: absolute;
background-color: #FFFFFF;
display: none;
}

[and the code that sets the size and placement]:

function addSuggestBoxDiv() {
var suggest_div = document.createElement('span');
suggest_div.id = 'suggest_box';

var textBox = document.getElementById(input_box_id);
var parent = textBox.parentNode;

parent.insertBefore(suggest_div, textBox);

var l, t, w, h;

with (textBox) {
l = offsetLeft;
t = offsetTop;
w = offsetWidth;
h = offsetHeight;

//Tweek position and size according to browser.
if (isIE) { //Internet Explorer
l += 10;
t += 15;
w -= 5;
} else if (isOpera) { //Opera
l += 3;
t -= 3;
w -= 8;
} else { //Gecko-based (like Netscape and Firefox)
w -= 2;
}
}

with (element('suggest_box').style) {
top = (t + h + top_offset) + "px";
left = (l + left_offset) + "px";
width = (w + extra_width) + "px";
}
}//end function addSuggestBoxDiv

I know that absolute positioning means that it's positioned relative
(yeah, kinda contradictory) to its "containing block". First, what
exactly defines a containing block (I know at least that a div would be
one)? Second, are the offsetLeft, offsetTop, offsetWidth and
offsetHeight properties of a node defined by the same rules? If not, I
know this is my problem. And if this is the problem, are there any
solutions for finding the correct positioning of the suggest box in all
cases? Again, I know that I can just set these manually for a given
page, but I'm trying to make this portable so that it can be used in
any page (and maybe to some degree this is just not realistic).
Thanks, guys!
 
V

VK

Joel said:
Alright, alright, one last thing. I am using javascript to determine
the placement of the suggest box in relation to the input box so that
it ends up right below it. The code worked perfectly until I put the
input box inside a table cell. Any ideas why? The following is the
code I'm using:

<http://www.mattkruse.com/javascript/anchorposition/> and similar can
give you a source code you may include in your solution.

Briefly: what you are doing is one of most difficult tasks on a fully
DOM-compliant browser. Namely you need a method with the behavior like:
"Shut up for a sec about your stupid DOM, take what I gave you and put
where I told you! Quickly!"

IE has full set of such methods because Big Brother loves you :)
It has the above mentioned insertAdjacentElement. If you want to make
your code pseudo-standard looking you can hack the situation by using
(again IE only):
q.replaceNode(d);
The code above is totally DOM-wise wrong and meaningless but it works
(on IE) and it mimics the "standard compliance".
From the other side you cannot expect such methods from W3C, as you
cannot expect and old nane dancing jig.

All this ornithology- and reproduction-related stuff (nodes, parents,
children) is not intended at all to be used on a rather chaotic HTML
page. (And nearly any nice design-targeted page is rather chaotic in
reference to its internal structure).

These properties/methods are made for strict *XML* structures, not
HTML. And you do not have official methods (at least I 'm not aware of
any) to "add more chaos to the chaos".

I said what I think (it does not mean that it is all true) and I
suggest you to visit the provided link as well as to look for Matt Kruz
postings here - once he was doing an universal element position
locator, I just lost the link.
 
T

Thomas 'PointedEars' Lahn

VK said:
<http://www.mattkruse.com/javascript/anchorposition/> and similar can
give you a source code you may include in your solution.

Briefly: what you are doing is one of most difficult tasks on a fully
DOM-compliant browser. Namely you need a method with the behavior like:
"Shut up for a sec about your stupid DOM, take what I gave you and put
where I told you! Quickly!"

Not true. Thanks to positioning via CSS, the textual arrangement of
elements in the source code does not need to reflect (or be reflected
by) the graphical arrangement of rendered elements in the document.
IE has full set of such methods because Big Brother loves you :)
It has the above mentioned insertAdjacentElement.

IE's insertAdjacentElement() can only insert elements before or after
other elements in the DOM tree which is what interface methods of the
W3C DOM also can. It definitely cannot insert elements graphically
below other elements as the OP requested and as you pretend here.

If you want to make
your code pseudo-standard looking you can hack the situation by using
(again IE only):
q.replaceNode(d);
The code above is totally DOM-wise

FYI: The term "DOM" (Document Object Model) is not and has never been
restricted to the W3C DOM.
wrong and meaningless

It is error-prone.
but it works (on IE)
^^^^^
Of course, it is IE proprietary.
and it mimics the "standard compliance".

This statement of yours has exactly nothing to do with the OPs request.
From the other side you cannot expect such methods from W3C, as you
cannot expect and old nane dancing jig.

If you explained what you expect q.replaceNode(d) to do,
one would have at least the opportunity to prove you wrong.
All this ornithology- and reproduction-related stuff
LOL

(nodes, parents, children) is not intended at all to be used on a rather
chaotic HTML page. [...]
These properties/methods are made for strict *XML* structures, not
HTML.

Not true. There is the W3C DOM Level 2 HTML Specification explicitely
for HTML 4.01 and XHTML 1.0 documents. That Specification defines
interfaces that implement interfaces defined in the W3C DOM Level 2
Core Specification.
[...] (And nearly any nice design-targeted page is rather chaotic in
reference to its internal structure).

That may be so in documents of incompetent authors. Generally, that is not
true either. Well-designed documents are created in a way that they are
usable both with and without CSS (that goes for other techniques as well).
And you do not have official methods (at least I 'm not aware of
any) to "add more chaos to the chaos".

I said what I think

You mean: what you understood of what you know which, _sadly_, is not much.


PointedEars
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top