ns4,6,ie5,6 and mozilla

**Lasse Reichstein Nielsen** · Jul 20 '05, 11:08 AM

Re: ns4,6,ie5,6 and mozilla

"Daniel" <dvdoord@planet .nl> writes:
[color=blue]
> 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 ?!?[/color]

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!).
[color=blue]
> This is used for making a tree <li><ul>[/color]
[color=blue]
> var ns6 = document.getEle mentById && !document.all;
> var ie4 = document.all && navigator.userA gent.indexOf("O pera") == -1;[/color]

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.
[color=blue]
> function checkcontained( e)
> {
> var iscontained = 0;
> cur = ns6 ? e.target : event.srcElemen t;[/color]

My event handlers usually start out like this:

function checkcontained( event)
{
event = event || window.event; // IE sucks
var cur = event.target || event.srcElemen t; // 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.
[color=blue]
> while (ns6 && cur.parentNode || (ie4 && cur.parentEleme nt))[/color]

while ( cur.parentNode || cur.parentEleme nt )

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.
[color=blue]
> if (cur.id == "foldheader " || cur.id == "foldinglis t")
> {
> iscontained = (cur.id == "foldheader ") ? 1 : 0;[/color]

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 ");
[color=blue]
> cur = ns6 ? cur.parentNode : cur.parentEleme nt;[/color]

cur = cur.parentNode || cur.parentEleme nt;

[color=blue]
> var foldercontent = ns6 ? cur.nextSibling .nextSibling :
> cur.all.tags("U L")[0];[/color]

var foldercontent;
if (cur.nextSiblin g) {
foldercontent = cur.nextSibling .nextSibling;
} else if (cur.getElement sByTagName) {
foldercontent = cur.getElements ByTagName("ul")[0];
} else if (cur.all && cur.all.tags) {
foldercontent = cur.all.tags("U L")[0];
}

Object detection, not browser detection.
[color=blue]
> if (foldercontent. style.display == "none")[/color]

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:hidd en instead.
[color=blue]
> document.onclic k = checkcontained;[/color]

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

if (document.addEv entListener) {
document.addEve ntListener("cli ck",checkcontai ned,false);
} else if (document.attac hEvent) {
document.attach Event("onclick" ,checkcontained );
} else {
document.onclic k = 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
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

**Daniel van den Oord** · Jul 20 '05, 11:09 AM

Re: ns4,6,ie5,6 and mozilla

"Lasse Reichstein Nielsen" <lrn@hotpop.com > schreef in bericht
news:u16ar1r1.f sf@hotpop.com.. .[color=blue]
> "Daniel" <dvdoord@planet .nl> writes:
>[color=green]
> > 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[/color][/color]
in[color=blue][color=green]
> > ie4+ en ns6. can anybody give me some hints ?!?[/color]
>
> Which browsers have you tried it in?[/color]

Currenly I am trying this in Mozilla 1.4 and IE6
[color=blue]
> What error messages did they give?[/color]

IE6 doesn't give any errors..
NS6 gives the error that the foldercontent has no properties
[color=blue]
> 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!).[/color]

I wanna support at least NS6, Mozilla and IE6 and maybe 5 the most common
used once...
[color=blue][color=green]
>> var foldercontent = ns6 ? cur.nextSibling .nextSibling :[/color]
> cur.all.tags("U L")[0];
>
> var foldercontent;
> if (cur.nextSiblin g) {
> foldercontent = cur.nextSibling .nextSibling;
> } else if (cur.getElement sByTagName) {
> foldercontent = cur.getElements ByTagName("ul")[0];
> } else if (cur.all && cur.all.tags) {
> foldercontent = cur.all.tags("U L")[0];
> }[/color]

Unfortunately this didn't work
The menu structure was very disturbed :(
[color=blue][color=green][color=darkred]
>>>>>> stripped the rest.. :)[/color][/color][/color]

new code

//*******
// Still needing the next 2 lines :(
//*******
var ns6 = document.getEle mentById && !document.all;
var ie4 = document.all && navigator.userA gent.indexOf("O pera") == -1;

function checkcontained( variable)
{
if (typeof variable == 'undefined') variable = window.event;
var cur = (typeof variable.target != 'undefined') ? variable.target :
variable.srcEle ment;
var iscontained = 0;
if (cur.id == "foldheader ")
{
iscontained = 1;
}
else
{
while ( cur.parentNode || cur.parentEleme nt )
{
if (cur.id == "foldheader " || cur.id == "foldinglis t")
{
iscontained = (cur.id == "foldheader ");
break;
}
cur = cur.parentNode || cur.parentEleme nt;
}
}
if (iscontained)
{

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

if (document.addEv entListener)
{
document.addEve ntListener("cli ck",checkcontai ned,false);
}
else if (document.attac hEvent)
{
document.attach Event("onclick" ,checkcontained );
}
else
{
document.onclic k = checkcontained;
}

**Lasse Reichstein Nielsen** · Jul 20 '05, 11:09 AM

Re: ns4,6,ie5,6 and mozilla

"Daniel van den Oord" <daniel304@plan et-maps-on.nl> writes:
[color=blue]
> NS6 gives the error that the foldercontent has no properties[/color]

Ok, that probably means that foldercontent is null or undefined.
[color=blue]
> I wanna support at least NS6, Mozilla and IE6 and maybe 5 the most common
> used once...[/color]

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)
[color=blue]
>[color=green][color=darkred]
> >> var foldercontent = ns6 ? cur.nextSibling .nextSibling :[/color]
> > cur.all.tags("U L")[0];
> >
> > var foldercontent;
> > if (cur.nextSiblin g) {
> > foldercontent = cur.nextSibling .nextSibling;
> > } else if (cur.getElement sByTagName) {
> > foldercontent = cur.getElements ByTagName("ul")[0];
> > } else if (cur.all && cur.all.tags) {
> > foldercontent = cur.all.tags("U L")[0];
> > }[/color]
>
> Unfortunately this didn't work
> The menu structure was very disturbed :([/color]

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("U L")[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.getElement sByTagName) {
foldercontent = cur.getElements ByTagName("ul")[0];
} else if (cur.all && cur.all.tags) {
foldercontent = cur.all.tags("U L")[0];
}

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

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

**Daniel van den Oord** · Jul 20 '05, 11:09 AM

Re: ns4,6,ie5,6 and mozilla

"Lasse Reichstein Nielsen" <lrn@hotpop.com > schreef in bericht
news:fzhuqo5b.f sf@hotpop.com.. .[color=blue]
> "Daniel van den Oord" <daniel304@plan et-maps-on.nl> writes:
>[color=green]
> > NS6 gives the error that the foldercontent has no properties[/color]
>
> Ok, that probably means that foldercontent is null or undefined.
>[color=green]
> > I wanna support at least NS6, Mozilla and IE6 and maybe 5 the most[/color][/color]
common[color=blue][color=green]
> > used once...[/color]
>
> 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)[/color]

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 ;)
[color=blue]
>[color=green]
> >[color=darkred]
> > >> var foldercontent = ns6 ? cur.nextSibling .nextSibling :
> > > cur.all.tags("U L")[0];
> > >
> > > var foldercontent;
> > > if (cur.nextSiblin g) {
> > > foldercontent = cur.nextSibling .nextSibling;
> > > } else if (cur.getElement sByTagName) {
> > > foldercontent = cur.getElements ByTagName("ul")[0];
> > > } else if (cur.all && cur.all.tags) {
> > > foldercontent = cur.all.tags("U L")[0];
> > > }[/color]
> >
> > Unfortunately this didn't work
> > The menu structure was very disturbed :([/color]
>
> 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("U L")[0];[/color]

You got that right it never worked here ;)
[color=blue]
>
> 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.getElement sByTagName) {
> foldercontent = cur.getElements ByTagName("ul")[0];
> } else if (cur.all && cur.all.tags) {
> foldercontent = cur.all.tags("U L")[0];
> }
>
> That should at least do the same thing in both Mozilla and IE.[/color]

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="javascrip t:menulinks('ed 801965714921239 3e5bf995c2c9431 ')">
Install</a></li>
</ul>

<li id="foldheader" > Servers</li>
<ul id="foldinglist " style="display: none" style=&{head};>
<li><a
href="javascrip t:menulinks('e4 f2e95c8f850458f 86a264bf792d0e8 ')">
IP-adressen</a></li>
<li><a
href="javascrip t:menulinks('11 066639b238708c8 41da006e1166dda ')">
Locaties</a></li>
<li><a
href="javascrip t:menulinks('3e 8c653b2ee35059f c0a94d568953238 ')">
Servers</a></li>
<li><a
href="javascrip t:menulinks('1c e826ae5f9dbd78c 19cab92da1f3330 ')">
Software</a></li>
<li><a
href="javascrip t:menulinks('e7 d0cc30504eaa9be 0f21e394370c217 ')"> Type
Software</a></li>
</ul>
<li><a
href="javascrip t:menulinks('e1 c31bf61d9937925 173075207517770 ')"> Quick
Links</a></li>
</ul>
</ul>
</div>

**Lasse Reichstein Nielsen** · Jul 20 '05, 11:09 AM

Re: ns4,6,ie5,6 and mozilla

"Daniel van den Oord" <daniel304@plan et-maps-on.nl> writes:
[color=blue]
> Well I wished still nothing in foldercontent.. .[/color]
[color=blue]
> 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};>[/color]

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 getElementsByTa gName/all.tags code should
find the submenu correctly.
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'

**Daniel van den Oord** · Jul 20 '05, 11:09 AM

Re: ns4,6,ie5,6 and mozilla

"Lasse Reichstein Nielsen" <lrn@hotpop.com > schreef in bericht
news:7k36qn55.f sf@hotpop.com.. .[color=blue]
> "Daniel van den Oord" <daniel304@plan et-maps-on.nl> writes:
>[color=green]
> > Well I wished still nothing in foldercontent.. .[/color]
>[color=green]
> > I'm sorry I totally forgot about the html code ;) here it is.. partially[/color][/color]
;)[color=blue][color=green]
> >
> > <div style="position :relative;left:-24">
> > <ul>
> > <li id="foldheader" > Modulen</li>
> > <ul id="foldinglist " style="display: none" style=&{head};>[/color]
>
> 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 getElementsByTa gName/all.tags code should
> find the submenu correctly.[/color]

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

ns4,6,ie5,6 and mozilla

ns4,6,ie5,6 and mozilla

Comment

Comment

Comment

Comment

Comment

Comment