PDA

Click to See Complete Forum and Search --> : node navigate

crs
05-19-2003, 08:23 AM
Hi...

I have a great problem navigating nodes in mozilla and opera browser.

For example
alert(this.parentNode.firstChild.tagName);

works on IE but not in mozilla and opera.

What to do?
What would be replace for "firstChild" and for "childNodes"?

Thank you in advance for any help.
Vladdy
05-19-2003, 08:28 AM
Compliant browsers (IE is not) make every space/new line an empty text node. So if you consider this fragment:

<div id="d1"><p>Some text</p>
<p>More text</p></div>

in IE div will have 2 children and in Moz 3.
This tool I made may help you in sorting out your problem: www.vladdy.net/webdesign/dom_treeviewer.html
In Mozilla you can use DOM inspector to display node hierarchy..
crs
05-19-2003, 08:48 AM
Thank you.

But I still havent found a workaround for fistChild and childNodes.

Where in mozilla can I activate the DOM browser?

Regards
Vladdy
05-19-2003, 08:57 AM
Post some code - it's hard to guess what you are doing wrong. element.firstChild and element.childNodes work just fine in Moz.
crs
05-19-2003, 09:12 AM
Here is sample code...

<html>
<head>
<title>Some title</title>
<SCRIPT>
<!--
document.onselectstart = new Function ("return false");

function myexpand (elm)
{
var x = elm.firstChild.src;
var mp = x.substr(x.length-5,1);
if (mp == 'p')
{
elm.firstChild.src = 'm.gif'
elm.parentNode.childNodes[1].style.display = 'block';
} else
{
elm.firstChild.src = 'p.gif';
elm.parentNode.childNodes[1].style.display = 'none';
}
}
-->
</SCRIPT>
</head>

<body style="cursor: default;">

<div style="margin-top: 10px;">
<div onClick="myexpand(this)" style="cursor:hand; cursor:pointer;">
<IMG src="p.gif" />&nbsp;
<b>Name</b> (nick)
</div>
<div style="display: none; border-right: 1px solid gray; border-bottom: 1px solid gray; margin-left: 16px; padding-bottom: 16px;">
<div style="color: blue; padding-top: 6px;">Data0:</div>Sample text 0
<div style="color: blue; padding-top: 6px;">Data1:</div>Sample text 1
<div style="color: blue; padding-top: 6px;">Data2:</div>Sample text 2
<div style="color: blue; padding-top: 6px;">Data3:</div>Sample text 3
</div>
</div>

</body>
</html>
khalidali63
05-19-2003, 09:30 AM
This should work..

node.childNodes[index].nodeName
Vladdy
05-19-2003, 09:40 AM
As I said, you have new line characters in your HTML code that are treated as nodes. Remove them and see if it works:
<div style="margin-top: 10px;"><div onClick="myexpand(this)" style="cursor:hand; cursorointer;"><IMG src="p.gif" />
crs
05-19-2003, 10:05 AM
Now I get it. :)

As expected, it works in opera and mozilla but not in IE.

Do I need now a browser testing code (IE and non IE) to assing appropriate offset or is there any workaround?

Regards
Vladdy
05-19-2003, 10:40 AM
If you do not use spaces between nodes the node tree should be the same in IE and Moz (at least when you do not use tables) - no work around needed.

One more thing.
In your example it is more logical to do
elm.nextSibling.style.display
than
elm.parentNode.childNodes[1].style.display.
crs
05-20-2003, 02:04 AM
You guys are true wizards. Thank you again.

nextSibling was my first method that I have tried, but I have lost myself between "new line characters" in my HTML code.

After your last tip my sample worked in IE and Mozilla, but not in Opera.

Reason was in function:
document.onselectstart = new function ("return false");
becouse "function" must be "Function" with capital first letter.

Now works everywhere :), except this function onselectstart.
onselectstart I am obviuos using to cancel all text select.

Is there anyway to get this function to work in Mozilla and Opera?

Thank you again
Vladdy
05-20-2003, 07:58 AM
no need to create new function object. Just do this:
document.body.onselectstart = function(){return false;};
Vladdy
05-20-2003, 08:01 AM
Oh, one more general advice:
since Mozilla and for most part Opera 7 are way more compliant than IE, start by making your code work in them and then see what kind of work-arounds you need for IE. That will speed up your development alot. Mozilla has much better debugging tools as well.
crs
05-20-2003, 09:08 AM
Thank you again...

And again you make my day :)