177878 - sparda.de - JavaScript Menu on the left doesn´t work ...

Status: RESOLVED WORKSFORME

(Tech Evangelism Graveyard :: German, defect, P1)

Description

[Steffen]

(Works on IE ..)

The homepage is just on example

WIN NT - Mozilla 1.1 Gecko/20020826

reproducable ...

Comment 1

[Frederic Bezies]

Tech evangelism bug. Again, a bad browser sniffing. Page is calling a very
compacted js file (div_basics) where we can find document.layers and document.all.

COnfirming bug and moving it to right component.

Comment 2

[Frederic Bezies]

adding contacts :

[e-mail] / mailto:[e-mail]

As it is a bank, setting P1 for priority.

Comment 3

[Boris Zbarsky [:bzbarsky]]

As a note, they sniff for "Netscape6/"; they should just sniff for "Gecko/"
instead.

Comment 4

[Phil Schwartau]

Here is a sample from http://www.sparda.de/data/div_basics.js


var is=new BrowserCheck();

function BrowserCheck()
{
  this.agent=navigator.userAgent;
  this.browser=navigator.appName;
  this.DOM=document.getElementById?true:false;

               etc.


  if(this.version.indexOf("Netscape6")>-1)
  {
    this.v=parseInt(this.version.substring(
                    this.version.indexOf("Netscape6/")+10,
                    this.version.length));
  }


  this.layers=(this.v>=4)?true:false;
 
         etc.

  this.ns  = (this.b=="ns" && this.v>=4);
  this.ns3 = (this.b=="ns" && this.v==3);
  this.ns4 = (this.b=="ns" && this.v==4);
  this.ns5 = (this.b=="ns" && this.v==5);
  this.ns6 = (this.b=="ns" && this.v==6);
  this.ie  = (this.b=="ie" && this.v>=4);
  this.ie3 = (this.version.indexOf("MSIE 3")!=-1);
  this.ie4 = (this.version.indexOf("MSIE4") !=-1);
  this.ie5 = (this.version.indexOf("MSIE 5")!=-1);
  this.ie55= (this.version.indexOf("MSIE 5.5") !=-1);
  
  this.swapper=((this.ie && this.v>=4)||this.ns && this.v>=3)?true:false;
}



function Layer(id,nestref,frame)
{
  if(!LayerExist(id,nestref,frame))
  {
    this.exist=false;
    return false;
  }

  this.exist=true;
  this.frame=frame||self;

  if(is.DOM)
  {
    this.elm=this.event=(frame)?
                        parent.frames[frame].document.getElementById(id):
                        document.getElementById(id);

    this.css=this.elm.style;

    this.img=this.event=(frame)?
                         parent.frames[frame].document.images:
                         document.images;

    this.doc=(frame)?
              parent.frames[frame].document:
              document;

    this.x=this.elm.offsetLeft;
    this.y=this.elm.offsetTop;
    this.w=this.elm.offsetWidth;
    this.h=this.elm.offsetHeight;

  }
  else
  {
    if(is.ns4)
    {
      if(!frame)
      {
        if(!nestref) 
          var nestref=Layer.nestRefArray[id]
          this.css=(nestref)?
                    document.layers[nestref].document.layers[id]:
                    document.layers[id];

     
                etc.

}

Comment 5

[Phil Schwartau]

Notice from the above, the site seems to be careful NOT to use
|document.layers| unless the browser is NN4.x

They do define a |layers| property of the |is| object, but this
is just a flag they use on their own, which has a custom-defined
meaning. Notice in fact that |is.layers| evaluates to |true| in IE.
Just load the site in IE6 or Mozilla, and try these javascript:URLs

  javascript: alert(is.v);       ---->  '5' in Moz, '6' in IE6
  javascript: alert(is.layers);  ---->  'true' in Moz and in IE


So it doesn't look like a |document.layers| problem. I haven't looked
through all their code, but one problem is apparent: the menu items
are getting positioned on top of each other in Mozilla. Notice they
are all there in the upper-left corner when you load the site.


You can move the menu items around by using javascript:URLs like these:

javascript: var obj=document.getElementById('Serv1Div'); 
void(obj.style.left='200px'); void(obj.style.top='30px');

javascript: var obj=document.getElementById('menu1DIV'); 
void(obj.style.left='0px'); void(obj.style.top='100px');


The site is properly creating the menu with <divs> in Mozilla,
not <layers>. Just look at the content tree in the DOM Inspector.
(available in Mozilla as Tools > Web Development > DOM Inspector)


The reason the <divs> are misplaced in Mozilla seems to be the use
of the properties |offsetLeft|, |offsetTop| inside their Layer()
constructor above:
 
                  this.x=this.elm.offsetLeft;
                  this.y=this.elm.offsetTop;


After July 2001, Mozilla started to emulate IE on these properties,
and as a result site authors using them in Mozilla may be surprised
to receive a value of 0. That is why all the menu items are on top
of each other at this site: their |x| and |y| values are set via
|offsetLeft|, |offsetTop|, which are evaluating to 0.


See these other Evangelism bugs for comparison:

                    bug 90617  Comment #4
                    bug 90617  Comment #6
                    bug 110287 Comment #5

Comment 6

[Phil Schwartau]

In http://www.sparda.de/data/div_basics.js, I notice this reference 
at the top of the file: 

              "generated by InfoOffice 2000-1"


Does anyone know what "InfoOffice" is? If it is a menu template
generator, this problem will affect any site that uses it -

Comment 7

[Sven C. Berger]

Seems to work for me now using

Mozilla/5.0 (Windows; U; Windows NT 5.1; de-AT; rv:1.3) Gecko/20030312

Comment 8

[Kai Lahmann (is there, where MNG is)]

move...

Comment 9

[Marek Stępień [:marcoos, inactive]]

Seems to work for me, too (1.4, Linux).

Comment 10

[Marek Stępień [:marcoos, inactive]]

Resolving this bug as worksforme.

If the problems appear again, reopen.