clipower script not working in ie & netscape PLEASE HELP

[kdorrick]

Can anyone convert this script which is to dynamically create a tab control (http://www.relpaxchallenge.com/patient/jsnet.htm) so that it is netscape7 and ie6 compliant?

Problems - dom comp table creation & attachevent (as well as addEventListener not working) in netscape

[Jona]

The JavaScript code is there, but could you make a page with the HTML and JavaScript code combined so that I may "test" the script?

[J]ona

[kdorrick]

Jona,

Here it is: http://www.relpaxchallenge.com/patient/fortest.htm

Thanks for any help you can offer!

Karen

[Jona]

I was asking for the HTML to be formatted--I don't need the HTML code itself, I'd like to see what it actually does.

[J]ona

[kdorrick]

Duh! Sorry.

http://www.relpaxchallenge.com/patient/pt_attack.htm

[Jona]

Perhaps this will work (untested)...


function Tab_obj()
{
this.Name = '';
this.Height = 0;
this.Width = 0;
this.defaultDisplayTabNo = 1;
this.ContainerDiv;
this.theme;

this.TabArray = new Array();
this.ButtonArray = new Array();

this.SetTabDiv = SetTabDiv;
this.GenerateControl = GenerateControl;
}

function SetTabDiv(tabNo, DivObj, Desc)
{
this.TabArray[tabNo] = new Array();

var theme_class = "display_" + this.theme;
DivObj.className = theme_class;
this.TabArray[tabNo][0] = DivObj;
this.TabArray[tabNo][1] = Desc;
}

function ShowTab(evt)
{
var reqTab = (document.all)?event.srcElement.name:evt.target.name;
var ctrlName = (document.all)?event.srcElement.id:evt.target.id;
var obj = eval(ctrlName);

var theme_class = "display_" + obj.theme;
var theme_buttonSel = "tabButtonSel_" + obj.theme;
var theme_button = "tabButton_" + obj.theme;

for(var i=1; i < obj.TabArray.length; i++)
{
if ( i == reqTab )
{
obj.TabArray[i][0].className = theme_class;
obj.ButtonArray[i].className = theme_buttonSel;
}
else
{
obj.TabArray[i][0].className = "hide";
obj.ButtonArray[i].className = theme_button;
}

}


}

function GenerateControl()
{

var theme_class = "container_" + this.theme;
this.ContainerDiv.className = theme_class;
this.ContainerDiv.style.height = 800;
this.ContainerDiv.style.width = this.Width;

var theme_class = "tabButton_" + this.theme;

var buttonDiv = document.createElement("DIV");

var tabTable = document.createElement("TABLE");
var tabRow = tabTable.insertRow();

for(var i=1; i < this.TabArray.length; i++)
{

var tabCell = tabRow.insertCell();

var tabButton = document.createElement("INPUT");
tabButton.type = 'BUTTON';
tabButton.value = this.TabArray[i][1];
tabButton.name = i;
tabButton.id = this.Name;
tabButton.className = theme_class;
if(document.all){
tabButton.attachEvent('onclick', ShowTab);
} else {
tabButton.onClick="ShowTab(evt);";
}
this.ButtonArray[i] = tabButton;

tabCell.insertBefore(tabButton);

}


buttonDiv.insertBefore(tabTable);
this.ContainerDiv.insertBefore(buttonDiv);

theme_class = "display_" + this.theme;

for(var i=1; i < this.TabArray.length; i++)
{
var divObj = this.TabArray[i][0];
divObj.style.width = this.Width - 0;
divObj.style.height = this.Height - -1000;
divObj.style.position = 'relative';
divObj.style.left = 2+"px";
divObj.style.top = 5+"px";



this.ContainerDiv.insertBefore(this.TabArray[i][0]);
if ( i == this.defaultDisplayTabNo )
this.TabArray[i][0].className = theme_class;
else
this.TabArray[i][0].className = "hide";

}

return true;
}


[J]ona

[kdorrick]

Jona,

At first I got the insertRow is not a function error so I change it to createElement, but now I get these errors in the htm page:

var myTab = new Tab_obj(); //line 38 says "not defined"

myTab.Name = "myTab"; //line 44 says has no properties


Everything still works beautifully in IE though.

Karen

[Jona]

It looks like you're using myTab.Name twice (setting it to '' and then setting it to 'myTab'). Why not just do it once?

[J]ona

[kdorrick]

You mean once in the js file and once in the htm file? I deleted the one from the htm file and put the name "myTab" in the "" for the js file. Now I am getting an error on the js file:

tabCell.insertBefore(tabButton);


line 88 null is null or not an object

[Jona]

Hmm... At this point, I suppose I will bang my head against the wall, download all of the scripts and HTML you have provided me with, and do what I can to get it fixed. I'll reply back when I have the time to assist you more, or when I have found a solution, since this script is very large and complex.

[J]ona

[kdorrick]

Thank you so much, Jona!! I am trying (and have been trying) for the past week. I'm very proficient in asp/vbscript, but now everything we do must be netscape compliant. I have tried contacting the author of clipower with no success and have also looked for other tab control scripts out there that are compliant with both browsers. Mostly, everything now avail is .net which I do not know yet either.

I will post the solution asap if I find it, but it sounds like you know 343243242x more than I do.

[Jona]

Could you post the "new" code, please?

[J]ona

[kdorrick]

Here is the latest js file:


function Tab_obj()
{
this.Name = "myTab";
this.Height = 0;
this.Width = 0;
this.defaultDisplayTabNo = 1;
this.ContainerDiv;
this.theme;

this.TabArray = new Array();
this.ButtonArray = new Array();

this.SetTabDiv = SetTabDiv;
this.GenerateControl = GenerateControl;
}

function SetTabDiv(tabNo, DivObj, Desc)
{
this.TabArray[tabNo] = new Array();

var theme_class = "display_" + this.theme;
DivObj.className = theme_class;
this.TabArray[tabNo][0] = DivObj;
this.TabArray[tabNo][1] = Desc;
}

function ShowTab(evt)
{
var reqTab = (document.all)?event.srcElement.name:evt.target.name;
var ctrlName = (document.all)?event.srcElement.id:evt.target.id;
var obj = eval(ctrlName);

var theme_class = "display_" + obj.theme;
var theme_buttonSel = "tabButtonSel_" + obj.theme;
var theme_button = "tabButton_" + obj.theme;

for(var i=1; i < obj.TabArray.length; i++)
{
if ( i == reqTab )
{
obj.TabArray[i][0].className = theme_class;
obj.ButtonArray[i].className = theme_buttonSel;
}
else
{
obj.TabArray[i][0].className = "hide";
obj.ButtonArray[i].className = theme_button;
}

}


}

function GenerateControl()
{

var theme_class = "container_" + this.theme;
this.ContainerDiv.className = theme_class;
this.ContainerDiv.style.height = 800;
this.ContainerDiv.style.width = this.Width;

var theme_class = "tabButton_" + this.theme;

var buttonDiv = document.createElement("DIV");

var tabTable = document.createElement("TABLE");
var tabRow = document.createElement("TR");

for(var i=1; i < this.TabArray.length; i++)
{

var tabCell = document.createElement("TD");

var tabButton = document.createElement("INPUT");
tabButton.type = 'BUTTON';
tabButton.value = this.TabArray[i][1];
tabButton.name = i;
tabButton.id = this.Name;
tabButton.className = theme_class;
if(document.all){
tabButton.attachEvent('onclick', ShowTab);
} else {
tabButton.onClick="ShowTab(evt);";
}
this.ButtonArray[i] = tabButton;

tabCell.insertBefore(tabButton);

}


buttonDiv.insertBefore(tabTable);
this.ContainerDiv.insertBefore(buttonDiv);

theme_class = "display_" + this.theme;

for(var i=1; i < this.TabArray.length; i++)
{
var divObj = this.TabArray[i][0];
divObj.style.width = this.Width - 0;
divObj.style.height = this.Height - -1000;
divObj.style.position = 'relative';
divObj.style.left = 2+"px";
divObj.style.top = 5+"px";



this.ContainerDiv.insertBefore(this.TabArray[i][0]);
if ( i == this.defaultDisplayTabNo )
this.TabArray[i][0].className = theme_class;
else
this.TabArray[i][0].className = "hide";

}

return true;
}

[Jona]

Would you prefer to use a much more simplified code to simply hide the second and third tabs, and only show the first; then when the second is clicked, hide the first and make sure the third is still hidden, and the same for the third?

I was just thinking, but is there a specific reason for using this code? It seems a great deal of work, since I commonly have some problems dealing with Netscape as well.

Also, the updated code does not work in IE, either.

[J]ona

[kdorrick]

I will happily take whatever works. Yes, I know it stopped working in IE after the last changes. But at least netscape and ie were sporting the same error for once.

Thanks,
Karen

[Jona]

I will work on an alternative solution, and see if you would like to use it.

[J]ona

[kdorrick]

Thanks, Jona!!!

[Jona]

I hope you will like this much simpler solution I've come up with... It is attached as a .txt file. Please save it as a .html file, and run it to see its effect.

[J]ona

[kdorrick]

JONA!!

This is awesome! I have studied your code and am already thinking of ways to apply it elsewhere.

I have been waiting for your response and didn't realize you had already responded with this magnificent code.

I CANNOT thank you enough!

Karen

[Jona]

You're welcome. It's much more simple than the code that you had, but you may want to make all of them visible to start with, and then make the second two invisible onLoad. That way, people without JavaScript but that have CSS enabled will be able to access all three forms.

[J]ona

[kdorrick]

Thanks, that is good to know for the future. For this web site we are "requiring" they have scripting enabled or else a lot of other stuff would not work.

Can I use activex controls now with Netscape 7 or should I just use applets?

Karen

[Jona]

Applets will work in Netscape, but ActiveX controls only work in IE, I believe... I could be wrong.

[J]ona

[kdorrick]

I think in Netscape 6 ax controls weren't working. I guess I'll find out soon enough. Thanks again for all your help!

[Jona]

You're welcome. :)

[J]ona