Javascript probleem in Firefox

[Keerzijde]

Ik ben bezig met het omzetten van een stuk oud javascript naar
iets wat algemeen geaccepteerd wordt.

Het gaat om een interactief menu script (soort outlook-bar) wat ik ooit
ergens gevonden heb en daarna sterk aangepast voor eigen doeleinden.

Dit script bevatte nog veel "document.all" en ik heb inmiddels alle
referenties omgezet naar getElementById().
De code draait (nog steeds) goed in Internet Explorer, maar in Firefox
werkt het niet omdat die een bepaald ID niet kan vinden.
Dus in IE komt een call naar getElementById gewoon terug met een object,
maar in Firefox komt ie met 'null' terug.

Het script maakt veel gebruik van document.write() en ik vermoed dat er iets
vreemd loopt bij de creatie van objecten via die call.
Iets wat IE onder water (wellicht niet helemaal volgens de DOM spec) wel goed
doet, maar in Firefox (en dergelijke browsers) niet goed gaat.

Anyway, het volgende stuk code komt uit de file outbar.js.
Deze file wordt samen met een ander script (wat de menu-items definieert) geinclude
in mijn html file.

code:

/***************************
*                          *
*    OUTLOOK-LIKE BAR      *
*                          *
****************************/

document.write("<DIV id='OutlookLikeBar' style='position:absolute;top:"+OB_Top+";left:"+OB_Left+";width:"+OB_Width+";height:"+OB_Height+";border:"+OB_BorderWidth+" "+OB_BorderStyle+" "+OB_BorderColor+";background-color:"+OB_BackgroundColor+";z-index:0;visibility:hidden;clip:rect(0,"+OB_Width+","+OB_Height+",0)'>");
document.write("[img]'"+OB_DownArrow+"'[/img]");
document.write("[img]'"+OB_UpArrow+"'[/img]");

j=1;
while(eval("window.OutBarFolder"+j))
{
  j++;
}

i=j-1;
while(i>0)
{
  Folder=eval("OutBarFolder"+i);

  window.status="Outlook-Like Bar is making folder '"+Folder[0]+"'";
  if(i==1)
  {
    document.write("<INPUT position='UP' id='OB_Button1' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='button' value='"+Folder[0]+"' style='background:"+OB_ButtonColor+";position:absolute;top:0;left:0;width:"+OB_ButtonWidth+";height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";font-size:"+OB_ButtonFontSize+"px;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100'>");
    MakeItems(Folder,i,OB_ButtonHeight);        
  } 
  else
  {
    document.write("<INPUT position='DOWN' id='OB_Button"+i+"' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='button' value='"+Folder[0]+"' style='background:"+OB_ButtonColor+";position:absolute;top:"+(OB_Height-(j-i)*OB_ButtonHeight-OB_BorderWidth*2)+";left:0;width:"+OB_ButtonWidth+";height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";font-size:"+OB_ButtonFontSize+"px;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100'>");
    MakeItems(Folder,i,(OB_Height-(j-i)*OB_ButtonHeight-OB_BorderWidth*2)+OB_ButtonHeight);     
  }     
  i--;
}
    
document.write("</DIV>");
var OutlookLikeBar=new OutBar(OB_Width,OB_Height,j-1,OB_ButtonHeight,OB_BorderWidth,OB_SlideSpeed,OB_IconsHeight+OB_ItemsSpacing,OB_ArrowSlideSpeed);
document.getElementById("OutlookLikeBar").style.visibility="visible";

function MakeItems(Folder,zorder,top)
{
  var items=0;
  var folderWidth=(OB_Width-OB_BorderWidth*2);

  while(Folder[items+1])
  {
    items+=4;
  }
  items/=4;

  document.write("<DIV id='OB_Folder"+zorder+"' style='border:black;background:"+OB_ItemBackground+";position:absolute;left:0;top:"+top+";width:"+folderWidth+";height:"+(OB_Margin*2+items*OB_IconsHeight+(items-1)*OB_ItemsSpacing)+";z-index:"+zorder+";clip:rect(0 0 0 0);'>");

  for(var i=1;i<items*4;i+=4)
  {
    document.write("<div align='center' valign='middle' targetFrame='"+Folder[i+3]+"' link='"+Folder[i+2]+"' onMouseDown='OutlookLikeBar.ItemClicked(this)' onMouseUp='OutlookLikeBar.ItemSelected(this)' onMouseOver='OutlookLikeBar.OverItems(this)' onMouseOut='OutlookLikeBar.OutItems(this)' ");
    document.write("style='image-align:left;text-align:left;border:none;position:absolute;left:"+OB_ItemsMargin+";top:"+(OB_Margin+Math.ceil((i-1)/4)*(OB_ItemsSpacing+OB_ItemsHeight))+";width:"+OB_ItemsWidth+";height:"+OB_ItemsHeight+";cursor:hand;font-family:"+OB_LabelFontFamily+";font-size:"+OB_LabelFontSize+"px;color:"+OB_LabelFontColor+"'>");
    document.write("[img]'"+Folder[i]+"'[/img]");
    document.write("&nbsp&nbsp"+Folder[i+1]+"</div>");
  } 
  document.write("</DIV>");
}


.....


function ClipFolder(folder,top,right,bottom,left)
{
    document.getElementById('OB_Folder'+folder).style.clip=clip='rect('+top+' '+right+' '+bottom+' '+left+')';
}

function Start()
{
    if(!this.started)
    {
        this.ClipFolder(1,0,this.visibleAreaWidth,this.visibleAreaHeight,0);
        this.SetArrows();
    }       
}

Ik heb er voor de overzichtelijkheid wat code tussenuit geknipt.
Firefox (javaconsole) klaagt nu over de code in functie Clipfolder (regel 69),
omdat getElementById('OB_Folder'+folder) geen bruikbaar object oplevert

Wat doe ik hier fout?

[Pelle]

Brrrrr... enkele quotes in html tags

Maar als je het toch aan het herschrijven bent, waarom werk je dan niet met document.createElement in plaats van vieze document.write's?

[Keerzijde]

Pelle schreef op vrijdag 11 maart 2005 @ 09:32:
Brrrrr... enkele quotes in html tags

Maar als je het toch aan het herschrijven bent, waarom werk je dan niet met document.createElement in plaats van vieze document.write's?

Euh... omdat ik er geen verstand van heb?
Ik doe dit namelijk niet dagelijks, ik wil alleen dit script weer aan de gang krijgen
in browsers als Firefox die het DOM *wel* correct implementeren.

[Clay]

hmz, in function Start() staat:

code:

this.ClipFolder(1,0,this.visibleAreaWidth,this.visibleAreaHeight,0);

en in ClipFolder:

code:

document.getElementById('OB_Folder'+folder).style...

Dan lijkt mij idd gewoon dat "OB_Folder1" niet gevonden kan worden. Dat zul je dan gewoon ff terug moeten tracken. Die OB_Folder komt uit "MakeITems()", en dat weer via die globale while loops.

[Verwijderd]

...clip=clip='rect(...

dat lijkt me niet correct

verder kunnen al die evals er prima uit. en attributen als valign en align regel je liever met css

[Keerzijde]

Ik dank iedereen voor hun commentaar hoor.
Maar ik ben eigenlijk niet geinteresseerd in het 100% mooi maken van dit script

Ik wil alleen weten waarom dit script op het aangegeven punt die "OB_Folder1"
niet kan vinden.

@Clay:
Ja, dat OB_Folder1 niet gevonden kan worden is duidelijk, maar eerst wordt de
while-loop bovenin doorlopen, die voor alle folders een MakeItem() aanroept.
Pas daarna wordt die clipfolder aangeroepen, dus OB_Folder1 moet bestaan.
(In IE gaat het immers goed)

Over dat document.write... is dat net zo vies/oud als document.all?
En kan ik die 1 op 1 vervangen door document.createElement() ?

Ik vermoed nog steeds dat IE namelijk bij document.write meteen de betreffende IDs
gaat aanmaken, terwijl Firefox dat wellicht pas doet na het verlaten van een functie
of pas aan het einde van het script. Ik weet het niet.

[Clay]

@Clay:
Ja, dat OB_Folder1 niet gevonden kan worden is duidelijk, maar eerst wordt de
while-loop bovenin doorlopen, die voor alle folders een MakeItem() aanroept.
Pas daarna wordt die clipfolder aangeroepen, dus OB_Folder1 moet bestaan.
(In IE gaat het immers goed)

Je hoeft mij de volgorde van het script niet uit te leggen hoor wat ik ook zeg is dat je moet backtracken. De error zegt alleen maar dat er uiteindelijk wat fout gaat, niet precies wat en op welke regel de echte fout zit.