By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,794 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

firstNode problems

P: n/a
I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scrip...hildNodes.html

What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

To explain the commented out code... I've observed that using the
childNode at index 1 does the samething that in Firefox that both
firstChild and the childNode at index 0 do in Internet Explorer. As
such, the above webpage can be easily made to work in Firefox, but once
done, it won't work in Internet Explorer, and vice versa. I'd like to
make it work in both browsers. Without giving the img element it's own
id.

Any ideas as to how I can do this would be appreciated. Thanks!

Sep 28 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a

yawnmoth wrote:
I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scrip...hildNodes.html

What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

To explain the commented out code... I've observed that using the
childNode at index 1 does the samething that in Firefox that both
firstChild and the childNode at index 0 do in Internet Explorer. As
such, the above webpage can be easily made to work in Firefox, but once
done, it won't work in Internet Explorer, and vice versa. I'd like to
make it work in both browsers. Without giving the img element it's own
id.

Any ideas as to how I can do this would be appreciated. Thanks!


Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.

Sep 28 '05 #2

P: n/a
yawnmoth schrieb:
I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scrip...hildNodes.html

What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.

To explain the commented out code... I've observed that using the
childNode at index 1 does the samething that in Firefox that both
firstChild and the childNode at index 0 do in Internet Explorer. As
such, the above webpage can be easily made to work in Firefox, but once
done, it won't work in Internet Explorer, and vice versa. I'd like to
make it work in both browsers. Without giving the img element it's own
id.

Any ideas as to how I can do this would be appreciated. Thanks!


The problem here are the spaces between <div id="main"> and the img-Tag. Mozilla
handles these spaces as firstChild, so the img-tag ist childNodes[1]. But IE
seems to ignore these spaces, so the img-Tag is firstChild (childNodes[0]). The
easiest way would be eliminating these spaces, so both are having the img-Tag as
firstChild. If that's not possible, you could step through the childs with
nextSibling till you find the one you're looking for.

Greetings,

martin
Sep 28 '05 #3

P: n/a

web.dev wrote:
yawnmoth wrote:
<snip>

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.


Didn't know that. Thanks, web.dev and Martin Kurz! :)

Sep 28 '05 #4

P: n/a
ASM
yawnmoth a écrit :
I'm having some problems making the following work in both Internet
Explorer and Firefox:

http://www.frostjedi.com/terra/scrip...hildNodes.html
error :
document.getElementById('main').firstChild.style
has no property (IE and FF)

firstChild is not a tag, shown by :
alert(document.getElementById('main').firstChild.t agName)
and can't be styled
What it should do (and indeed, what it does do, in Internet Explorer)
is show a gray box. In Firefox, however, it shows a black box.


Are you realy absolutly sure ?
because :

alert('cN[1] = '+document.getElementById('main').childNodes[1].tagName);
document.getElementById('main').childNodes[1].style.background = '#aaa';

give same results in my FF and IE ... ! ?
if you write your html code this way :
<div id="main"><img
src="blank.gif" width="30" height="30" style="background: #000" />
</div>
(no space or return between <div> and <img )

this time
childNodes[0]
or
firstChild
are correct

--
Stephane Moriaux et son [moins] vieux Mac
Sep 28 '05 #5

P: n/a
ASM
web.dev a écrit :

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.


depends ...
with example given my IE (Mac) works as my FF

--
Stephane Moriaux et son [moins] vieux Mac
Sep 28 '05 #6

P: n/a
yawnmoth wrote:
web.dev wrote:
yawnmoth wrote:
<snip>

Remove all whitespaces / tabs from your div. For example:

<div id = "main"><img src = "blank.gif"></div>

Then you can use index 0 for both. In Firefox, text nodes count as a
child node whereas in IE it doesn't.

Didn't know that. Thanks, web.dev and Martin Kurz! :)


Depending on the removal of whitespace is not very robust - a single
space will break your code in some browsers. Consider either wandering
along the child nodes until you find the one you are after:

var imgImAfter = document.getElementById('main').firstChild;
while ( 'img' != imgImAfter.nodeName.toLowerCase()
&& imgImAfter.nextSibling ){
imgImAfter = imgImAfter.nextSibling;
}

or using getElementsByTagName('img') inside the div and grab the first
element:

var theDiv = document.getElementById('main');
var imgImAfter = theDiv.getElementsByTagName('img')[0];

Of course both examles need a bit of error checking added.

--
Rob
Sep 29 '05 #7

P: n/a
"web.dev" <we********@gmail.com> writes:
In Firefox, text nodes count as a child node whereas in IE it
doesn't.


Text nodes counts as children in IE as well, except *some* cases where
the text node would contain only whitespace.

In the following:

<div> <em> <b>x</b><u> </u></div>

there is no text node between <div> and <em>, nor between <em> an <b>.
There is one between <u> and </u>, it's just not visible.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Sep 29 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.