x_tpg.js

[pdub23]

Whenever I use this tab script with firefox I lose the ability to click on a form field and see the cursor blinking in the field. It only works for the last tab in the set. If I start typing I'm in that form element and it get's filled out fine, there's just no cursor indication - which is anoying. Anybody got a clue why? Heres the code (from cross-browser.com)...

function xTabPanelGroupEditor(id, w, h, th, clsTP, clsTG, clsTD, clsTS,initialTab) // object prototype
{
  var panelGrp = xGetElementById(id);
  if (!panelGrp) { return null; }
  var panels = xGetElementsByClassName(clsTP, panelGrp);
  var tabs = xGetElementsByClassName(clsTD, panelGrp);
  var tabGrp = xGetElementsByClassName(clsTG, panelGrp);
  if (!panels || !tabs || !tabGrp || panels.length != tabs.length || tabGrp.length != 1) { return null; }

  var selectedIndex = 0, highZ, x = 0, i;   
  var pgw = xWidth(panelGrp);
  var pgh = xClientHeight() - 120;  
  xHeight(panelGrp,pgh);
  xResizeTo(panelGrp, pgw, pgh);
  xResizeTo(tabGrp[0], w, th);
  xMoveTo(tabGrp[0], 0, 0);
  
  w -= 2; // remove border widths
  var tw = 100;

  for (i = 0; i < tabs.length; ++i) {
    xResizeTo(tabs[i], tw, th); 
    xMoveTo(tabs[i], x, 0);
    x += tw;
    tabs[i].xTabIndex = i;
    tabs[i].onclick = tabOnClick;
    xHeight(panels[i],pgh - th - 2); //new
    xMoveTo(panels[i], 0, th);
  }
  highZ = i;
  tabs[initialTab-1].onclick();
  
  function tabOnClick()
  {
    tabs[selectedIndex].className = clsTD;
    this.className = clsTS;
   xZIndex(this, highZ++);
   xZIndex(panels[this.xTabIndex], highZ++);     
    for (i = 0; i < tabs.length; ++i) {//PW: fix IE window objects ignoring zIndex
     xHide(panels[i]);
    }
    xShow(panels[this.xTabIndex]);
    selectedIndex = this.xTabIndex;
  }

  this.onUnload = function()
  {
    for (var i = 0; i < tabs.length; ++i) {tabs[i].onclick = null;}
  }
}

[pdub23]

yikes, I just removed 'overflow:hidden;' from all the related styles and that fixed the issue, however now things are pretty messed up visually...

[pdub23]

actually it's the overflow:auto; on the tabPanel class that mucks up the focus... no idea why though...

[Maian]

Might be a Firefox bug.

[MikeFoster]

Hi pdub23,

Post a link to your page and I'll have a look.

[pdub23]

Hey Mike, I think it might be a Mozilla bug... dunno... I PM'd you link with my example, don't want it accessed by the public right now...

thanks!

[MikeFoster]

I'm taking a look at it. But run it thru a validator and fix the html errors first.

[pdub23]

thanks,

i whipped up the page pretty quick just as a demo, there is no doctype, do you think that could make a difference?

[MikeFoster]

been experimenting with that demo - I have it working - cleaning up now and still testing...

[pdub23]

nice, looks good! thanks for the support. works good, cept busts up my dynamic tab width code, now xWidth(tabs[i]) always = 0... hmm

[MikeFoster]

I added an alert after one of the lines you added...

    x += xWidth(tabs[i]);
    alert(xWidth(tabs[i]));/////////////////////////////

It works for me in Opera, Firefox, and IE (all on WinXP).
And your online test page works for me too.

Why won't you post that link here so others can see it and join in? I wrote most of the code on your test page - there's nothing there that you should mind anyone else seeing.

[pdub23]

yes sorry, here's the link...
http://peter.yvr.levelcms.com/petertest2

xWidth(tabs[i]) = zero for me in IE only now (XP) ...

[MikeFoster]

Create the xTabPanelGroup object in the window.onload handler. Put it in a script element in the head element - like my demo does. I would not put Javascript in the body. But if you really, really want onload code in the body then put it immediately before the closing body tag. Don't nest it in any other html - especially not a table.

[pdub23]

ah ok... I remember that being a general rule, but I can't remember why... this might fix my other problem with the new tab script, which is some other objects are being 'uninitialized' or something once I tab back and forth...

can you give me the quick 3 line summary as to why script should always be in the head, or know of any good threads or info on the matter, just for general knowledge sake? just the rules, ya?

[MikeFoster]

Opinions on this differ. I just don't like mixing Javascript with HTML. There are a few exceptions, but I just think they should be separate. When someone puts a script element (except for "document.write"s) at the end of their html it is obvious that their intention is for that code to run after the html has been parsed - that's what the window.onload event is for.

[pdub23]

well this seemed to fix the xWidth issue... so I'm happy about that...

for me its a bit harder to always have things in the head, because I'm always working with dynamic content, so it's nice if my logic is more self-contained and not repeated. I think I can get around this by being smart about it and maybe pushing things to a standard onload function, I'm just not quite there yet...