ns4,6,ie5,6 and mozilla

D

Daniel

I have this script and I want to adapt it to the DOM of most / all well
known browsers like mozilla and netscape.. at the moment it only works in
ie4+ en ns6. can anybody give me some hints ?!?
This is used for making a tree <li><ul>

var ns6 = document.getElementById && !document.all;
var ie4 = document.all && navigator.userAgent.indexOf("Opera") == -1;

function checkcontained(e)
{
var iscontained = 0;
cur = ns6 ? e.target : event.srcElement;
if (cur.id == "foldheader")
{
iscontained = 1;
}
else
{
while (ns6 && cur.parentNode || (ie4 && cur.parentElement))
{
if (cur.id == "foldheader" || cur.id == "foldinglist")
{
iscontained = (cur.id == "foldheader") ? 1 : 0;
break;
}
cur = ns6 ? cur.parentNode : cur.parentElement;
}
}
if (iscontained)
{
var foldercontent = ns6 ? cur.nextSibling.nextSibling :
cur.all.tags("UL")[0];
if (foldercontent.style.display == "none")
{
foldercontent.style.display = "";
cur.style.listStyleImage = "url(images/open.gif)";
}
else
{
foldercontent.style.display = "none";
cur.style.listStyleImage = "url(images/fold.gif)";
}
}
}

if (ie4 || ns6)
{
document.onclick = checkcontained;
}
 
L

Lasse Reichstein Nielsen

Daniel said:
I have this script and I want to adapt it to the DOM of most / all well
known browsers like mozilla and netscape.. at the moment it only works in
ie4+ en ns6. can anybody give me some hints ?!?

Which browsers have you tried it in?
What error messages did they give?

Which browsers are you not supporting? E.g., not dinosaurs like
Netscape 4, where supporting it basically means writing two versions
of everything. It seems you are ignoring NS 4 (smart!).
This is used for making a tree <li><ul>
var ns6 = document.getElementById && !document.all;
var ie4 = document.all && navigator.userAgent.indexOf("Opera") == -1;

The first hint is to *not* try to identify all existing browsers.

Browser detection is best saved for the situations where standards
break down, and where you know that a specific browser has a usable
workaround.
function checkcontained(e)
{
var iscontained = 0;
cur = ns6 ? e.target : event.srcElement;

My event handlers usually start out like this:

function checkcontained(event)
{
event = event || window.event; // IE sucks
var cur = event.target || event.srcElement; // IE sucks

(Yes, I always include the comments :)
There is no mention of "ns6" in this. It uses event.target if it is there,
no matter which, potentially unrecognized, browser is being used.
while (ns6 && cur.parentNode || (ie4 && cur.parentElement))

while ( cur.parentNode || cur.parentElement )

Again, don't detect the browser and assume the browser is the one
you think. Just test for the property you actually need. If it is
there, use it. If not, do something else. No need to know the name
of the browser for that.
if (cur.id == "foldheader" || cur.id == "foldinglist")
{
iscontained = (cur.id == "foldheader") ? 1 : 0;

Don't use "1" and "0" for boolean values. The language has "true" and
"false", and unless you are going to do arithmetic, you are just wasting
bits and processing power converting them to booleans later.

iscontained = (cur.id == "foldheader");
cur = ns6 ? cur.parentNode : cur.parentElement;

cur = cur.parentNode || cur.parentElement;

var foldercontent = ns6 ? cur.nextSibling.nextSibling :
cur.all.tags("UL")[0];

var foldercontent;
if (cur.nextSibling) {
foldercontent = cur.nextSibling.nextSibling;
} else if (cur.getElementsByTagName) {
foldercontent = cur.getElementsByTagName("ul")[0];
} else if (cur.all && cur.all.tags) {
foldercontent = cur.all.tags("UL")[0];
}

Object detection, not browser detection.
if (foldercontent.style.display == "none")

You should be aware that browsers as late as Opera 6 and Konqueror 3
don't allow you to change the display style dynamically. If you
support these, you might want to use visibility:hidden instead.
document.onclick = checkcontained;

If you really want to follow the DOM specification, use:

if (document.addEventListener) {
document.addEventListener("click",checkcontained,false);
} else if (document.attachEvent) {
document.attachEvent("onclick",checkcontained);
} else {
document.onclick = checkcontained;
}

Most of your exceptions are for IE, and most of these even for IE 4
(which is used less than Netscape 4). There are still points where
even IE 6 needs a helping hand, though.

Hope this helps.
/L
 
D

Daniel van den Oord

Lasse Reichstein Nielsen said:
Which browsers have you tried it in?

Currenly I am trying this in Mozilla 1.4 and IE6
What error messages did they give?

IE6 doesn't give any errors..
NS6 gives the error that the foldercontent has no properties
Which browsers are you not supporting? E.g., not dinosaurs like
Netscape 4, where supporting it basically means writing two versions
of everything. It seems you are ignoring NS 4 (smart!).

I wanna support at least NS6, Mozilla and IE6 and maybe 5 the most common
used once...
var foldercontent = ns6 ? cur.nextSibling.nextSibling :
cur.all.tags("UL")[0];

var foldercontent;
if (cur.nextSibling) {
foldercontent = cur.nextSibling.nextSibling;
} else if (cur.getElementsByTagName) {
foldercontent = cur.getElementsByTagName("ul")[0];
} else if (cur.all && cur.all.tags) {
foldercontent = cur.all.tags("UL")[0];
}

Unfortunately this didn't work
The menu structure was very disturbed :(

new code

//*******
// Still needing the next 2 lines :(
//*******
var ns6 = document.getElementById && !document.all;
var ie4 = document.all && navigator.userAgent.indexOf("Opera") == -1;

function checkcontained(variable)
{
if (typeof variable == 'undefined') variable = window.event;
var cur = (typeof variable.target != 'undefined') ? variable.target :
variable.srcElement;
var iscontained = 0;
if (cur.id == "foldheader")
{
iscontained = 1;
}
else
{
while ( cur.parentNode || cur.parentElement )
{
if (cur.id == "foldheader" || cur.id == "foldinglist")
{
iscontained = (cur.id == "foldheader");
break;
}
cur = cur.parentNode || cur.parentElement;
}
}
if (iscontained)
{

//*******
// Here it goes wrong
//*******
var foldercontent = ns6 ? cur.nextSibling.nextSibling :
cur.all.tags("UL")[0];
if (foldercontent.style.display == "none")
{
foldercontent.style.display = "";
cur.style.listStyleImage = "url(images/open.gif)";
}
else
{
foldercontent.style.display = "none";
cur.style.listStyleImage = "url(images/fold.gif)";
}
}
}

if (document.addEventListener)
{
document.addEventListener("click",checkcontained,false);
}
else if (document.attachEvent)
{
document.attachEvent("onclick",checkcontained);
}
else
{
document.onclick = checkcontained;
}
 
L

Lasse Reichstein Nielsen

Daniel van den Oord said:
NS6 gives the error that the foldercontent has no properties

Ok, that probably means that foldercontent is null or undefined.
I wanna support at least NS6, Mozilla and IE6 and maybe 5 the most common
used once...

Aiming for standards should give you Mozilla and Netscape 7 (and
Netscape 6 if you avoid the bugs ... it is based on a pre-1.0
version of Mozilla and has some bugs)
var foldercontent = ns6 ? cur.nextSibling.nextSibling :
cur.all.tags("UL")[0];

var foldercontent;
if (cur.nextSibling) {
foldercontent = cur.nextSibling.nextSibling;
} else if (cur.getElementsByTagName) {
foldercontent = cur.getElementsByTagName("ul")[0];
} else if (cur.all && cur.all.tags) {
foldercontent = cur.all.tags("UL")[0];
}

Unfortunately this didn't work
The menu structure was very disturbed :(

Thinking about it, it is not that supricing. The oringinal expression
didn't make much sense either:

var foldercontent = ns6 ? cur.nextSibling.nextSibling :
cur.all.tags("UL")[0];

If it is NS6, you let foldercontent be a sibling of the cur node. That
is, they are nodes on the same level, having the same parent node.
If it is not NS6, you find a child node of the cur node.

So, which is it? Without knowing the structure of the HTML it is hard
to guess which it should be, but since it works in IE, the problem is
probably the nextSibling part. I would just skip it and use:

var foldercontent;
if (cur.getElementsByTagName) {
foldercontent = cur.getElementsByTagName("ul")[0];
} else if (cur.all && cur.all.tags) {
foldercontent = cur.all.tags("UL")[0];
}

That should at least do the same thing in both Mozilla and IE.

/L
 
D

Daniel van den Oord

Lasse Reichstein Nielsen said:
Ok, that probably means that foldercontent is null or undefined.


Aiming for standards should give you Mozilla and Netscape 7 (and
Netscape 6 if you avoid the bugs ... it is based on a pre-1.0
version of Mozilla and has some bugs)

I know I'm trying to keep things save... I allready made a lot of
workarounds in other scripts
most of them to ugly to show though ;)
var foldercontent = ns6 ? cur.nextSibling.nextSibling :
cur.all.tags("UL")[0];

var foldercontent;
if (cur.nextSibling) {
foldercontent = cur.nextSibling.nextSibling;
} else if (cur.getElementsByTagName) {
foldercontent = cur.getElementsByTagName("ul")[0];
} else if (cur.all && cur.all.tags) {
foldercontent = cur.all.tags("UL")[0];
}

Unfortunately this didn't work
The menu structure was very disturbed :(

Thinking about it, it is not that supricing. The oringinal expression
didn't make much sense either:

var foldercontent = ns6 ? cur.nextSibling.nextSibling :
cur.all.tags("UL")[0];

You got that right it never worked here ;)
If it is NS6, you let foldercontent be a sibling of the cur node. That
is, they are nodes on the same level, having the same parent node.
If it is not NS6, you find a child node of the cur node.

So, which is it? Without knowing the structure of the HTML it is hard
to guess which it should be, but since it works in IE, the problem is
probably the nextSibling part. I would just skip it and use:

var foldercontent;
if (cur.getElementsByTagName) {
foldercontent = cur.getElementsByTagName("ul")[0];
} else if (cur.all && cur.all.tags) {
foldercontent = cur.all.tags("UL")[0];
}

That should at least do the same thing in both Mozilla and IE.

Well I wished still nothing in foldercontent...

I'm sorry I totally forgot about the html code ;) here it is.. partially ;)

<div style="position:relative;left:-24">
<ul>
<li id="foldheader"> Modulen</li>
<ul id="foldinglist" style="display:none" style=&{head};>

<li id="foldheader"> Gebruikers</li>
<ul id="foldinglist" style="display:none" style=&{head};></ul>

<li id="foldheader"> Modulen</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a
href="javascript:menulinks('ed8019657149212393e5bf995c2c9431')">
Install</a></li>
</ul>

<li id="foldheader"> Servers</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a
href="javascript:menulinks('e4f2e95c8f850458f86a264bf792d0e8')">
IP-adressen</a></li>
<li><a
href="javascript:menulinks('11066639b238708c841da006e1166dda')">
Locaties</a></li>
<li><a
href="javascript:menulinks('3e8c653b2ee35059fc0a94d568953238')">
Servers</a></li>
<li><a
href="javascript:menulinks('1ce826ae5f9dbd78c19cab92da1f3330')">
Software</a></li>
<li><a
href="javascript:menulinks('e7d0cc30504eaa9be0f21e394370c217')"> Type
Software</a></li>
</ul>
<li><a
href="javascript:menulinks('e1c31bf61d9937925173075207517770')"> Quick
Links</a></li>
</ul>
</ul>
</div>
 
L

Lasse Reichstein Nielsen

Daniel van den Oord said:
Well I wished still nothing in foldercontent...
I'm sorry I totally forgot about the html code ;) here it is.. partially ;)

<div style="position:relative;left:-24">
<ul>
<li id="foldheader"> Modulen</li>
<ul id="foldinglist" style="display:none" style=&{head};>

Ok, have you ever validated this code? (Hint: it won't)

You are not allowed to have ul elements as direct children of other ul
elements. They must be inside an li element.
That is, a menu item is something like

<li>Modulen
<ul>
...
</ul>
<li>

The submenu of Modulen is inside the same li element as the title.

If written like that, the getElementsByTagName/all.tags code should
find the submenu correctly.
/L
 
D

Daniel van den Oord

Lasse Reichstein Nielsen said:
Ok, have you ever validated this code? (Hint: it won't)

You are not allowed to have ul elements as direct children of other ul
elements. They must be inside an li element.
That is, a menu item is something like

<li>Modulen
<ul>
...
</ul>
<li>

The submenu of Modulen is inside the same li element as the title.

If written like that, the getElementsByTagName/all.tags code should
find the submenu correctly.

HEhe I allready was very confused with the code.... Now I know why....
Thanks a lot men... thanks a bunch
 

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

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top