Please help me make this script work in Netscape

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 373,915 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,615 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 3245 | Replies: 2

•

Join Date: Apr 2005

Posts: 2

Reputation: rexian is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

rexian

Offline

Newbie Poster

Please help me make this script work in Netscape

Apr 29th, 2005

The page below works perfectly as intended in IE 6.0 but, it does not work in Netscape. Can someone shed some light on this and help me make this work in netscape 7.x?

Thanks......

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<STYLE>
.conts {visibility:hidden}
.tab { border-top:solid thin #E0E0E0;
border-right:solid thin gray;
border-left:solid thin #E0E0E0;
font-family:Verdana;
font-size:10pt;
text-align:center;
font-weight:normal}

.selTab { border-left:solid thin white;
border-top:solid thin white;
border-right:solid thin black;
font-weight:bold;
text-align:center}

</STYLE>
<SCRIPT LANGUAGE=JavaScript>

//a public function that the container uses to pass in values for the labels
function public_Labels(label1, label2, label3, label4, label5, label6, label7){

t1.innerText = label1;
t2.innerText = label2;
t3.innerText = label3;
t4.innerText = label4;
t5.innerText = label5;
t6.innerText = label6;
t7.innerText = label7;
}

//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){

t1Contents.innerHTML = contents1;
t2Contents.innerHTML = contents2;
t3Contents.innerHTML = contents3;
t4Contents.innerHTML = contents4;
t5Contents.innerHTML = contents5;
t6Contents.innerHTML = contents6;
t7Contents.innerHTML = contents7;

init();
}

//sets the default display to tab 1
function init(){
tabContents.innerHTML = t1Contents.innerHTML;
}

//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;

function changeTabs(){

if(firstFlag == true){
currentTab = t1;
tabBase = t1base;
firstFlag = false;
}

if(window.event.srcElement.className == "tab"){

currentTab.className = "tab";

tabBase.style.backgroundColor = "white";

currentTab = window.event.srcElement;

tabBaseID = currentTab.id + "base";

tabContentID = currentTab.id + "Contents";

tabBase = document.all(tabBaseID);

tabContent = document.all(tabContentID);

currentTab.className = "selTab";

tabBase.style.backgroundColor = "";

tabContents.innerHTML = tabContent.innerHTML;

}
}

</SCRIPT>
</HEAD>
<BODY BGCOLOR=#C0C0C0 onclick="changeTabs()" onload="init()">

<DIV STYLE="position:absolute; top:40; height:350; width:500; left:25; border:none thin gray">

<TABLE STYLE="width:100%; height:250" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ID=t1 CLASS=selTab HEIGHT=25>tab 1</TD>
<TD ID=t2 CLASS=tab>tab 2</TD>
<TD ID=t3 CLASS=tab>tab 3</TD>
<TD ID=t4 CLASS=tab>tab 4</TD>
<TD ID=t5 CLASS=tab>tab 5</TD>
<TD ID=t6 CLASS=tab>tab 6</TD>
<TD ID=t7 CLASS=tab>tab 7</TD>
</TR>
<TR>
<TD ID=t1base STYLE="height:2; border-left:solid thin white"></TD>
<TD ID=t2base STYLE="height:2; background-color:white"></TD>
<TD ID=t3base STYLE="height:2; background-color:white"></TD>
<TD ID=t4base STYLE="height:2; background-color:white"></TD>
<TD ID=t5base STYLE="height:2; background-color:white"></TD>
<TD ID=t6base STYLE="height:2; background-color:white"></TD>
<TD ID=t7base STYLE="height:2; background-color:white; border-right:solid thin white"></TD>
</TR>

<TR>
<TD HEIGHT="*" COLSPAN=7 ID=tabContents
STYLE=" border-left:solid thin white;
border-bottom:solid thin white;
border-right:solid thin white">sample contents</TD>

</TR>
</TABLE>
</DIV>

<DIV CLASS=conts ID=t1Contents>This text is on tab one</DIV>
<DIV CLASS=conts ID=t2Contents>This text is on tab two</DIV>
<DIV CLASS=conts ID=t3Contents>This text is on tab three</DIV>
<DIV CLASS=conts ID=t4Contents>This text is on tab four</DIV>
<DIV CLASS=conts ID=t5Contents>This text is on tab five</DIV>
<DIV CLASS=conts ID=t6Contents>This text is on tab six</DIV>
<DIV CLASS=conts ID=t7Contents>This text is on tab seven</DIV>
</BODY>
</HTML>

•

Join Date: Apr 2005

Posts: 2

Reputation: rexian is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

rexian

Offline

Newbie Poster

Re: Please help me make this script work in Netscape

May 2nd, 2005

bump.....help plz

•

Join Date: May 2005

Location: Wellington, New Zealand

Posts: 182

Reputation: alpha_foobar is an unknown quantity at this point

Rep Power: 4

Solved Threads: 3

alpha_foobar alpha_foobar is offline

Offline

Junior Poster

Re: Please help me make this script work in Netscape

May 2nd, 2005

I don't have netscape 7.x. But I do have Mozilla Firefox 1.0.3.

These browsers have some similarities in javascript engine design. But I'd expect you will need to make several changes to make the code I am posting work in Netscape 7. From memory, Netscape will not let you refer to references of dom objects in the manner you are currently doing. This causes a warning in Mozilaa Firefox, but I expect it will not work in Netscape (the CORRECT way of refering to DOM objects by ID is to retrieve a reference to the DOM Node using the document.getElementById function). However this is simply a matter of replacing all your inline references with node variables assigned to nodes.

When developing javascript applications for netscape and gecko based web browsers, you can utilise the javascript console, this displays any warning messages or errors that might exist in the javascript on your page. And would be useful in debugging your page.

Here is your ammeded code, for use in mozilla firefox 1.0.3:

Help with Code Tags

(Toggle Plain Text)

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<STYLE>
.conts {visibility:hidden}
.tab { border-top:solid thin #E0E0E0;
border-right:solid thin gray;
border-left:solid thin #E0E0E0;
font-family:Verdana;
font-size:10pt;
text-align:center;
font-weight:normal}

.selTab { border-left:solid thin white;
border-top:solid thin white;
border-right:solid thin black;
font-weight:bold;
text-align:center}

</STYLE>
<SCRIPT LANGUAGE=JavaScript>

//a public function that the container uses to pass in values for the labels
function public_Labels(label1, label2, label3, label4, label5, label6, label7){
	t1.innerText = label1;
	t2.innerText = label2;
	t3.innerText = label3;
	t4.innerText = label4;
	t5.innerText = label5;
	t6.innerText = label6;
	t7.innerText = label7;
}

//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){

	t1Contents.innerHTML = contents1;
	t2Contents.innerHTML = contents2;
	t3Contents.innerHTML = contents3;
	t4Contents.innerHTML = contents4;
	t5Contents.innerHTML = contents5;
	t6Contents.innerHTML = contents6;
	t7Contents.innerHTML = contents7;
	
	init();
}

//sets the default display to tab 1
function init(){
	tabContents.innerHTML = t1Contents.innerHTML;
	
	// internet explorer 6 ignores this... mozilla firefox uses this to pass the window event.
	window.onclick = changeTabs;
}

//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;


function changeTabs(e){

	var eSrcElement = null;
	if(e){
		eSrcElement = e.target;
	} else {
		eSrcElement = window.event.srcElement;
	} 
	
	if(firstFlag == true){
		currentTab = t1;
		tabBase = t1base;
		firstFlag = false;
	}
	
	if(eSrcElement.className == "tab"){
	
		currentTab.className = "tab";
		
		tabBase.style.backgroundColor = "white";
		
		currentTab = eSrcElement;
		
		tabBaseID = currentTab.id + "base";
		
		tabContentID = currentTab.id + "Contents";
		
		tabBase = document.all(tabBaseID);
		
		tabContent = document.all(tabContentID);
		
		currentTab.className = "selTab";
		
		tabBase.style.backgroundColor = "";
		
		tabContents.innerHTML = tabContent.innerHTML;
		
	}
}

</SCRIPT>
</HEAD>
<BODY BGCOLOR=#C0C0C0 onclick="changeTabs()" onload="init()">


<DIV STYLE="position:absolute; top:40; height:350; width:500; left:25; border:none thin gray">


<TABLE STYLE="width:100%; height:250" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ID=t1 CLASS=selTab HEIGHT=25>tab 1</TD>
<TD ID=t2 CLASS=tab>tab 2</TD>
<TD ID=t3 CLASS=tab>tab 3</TD>
<TD ID=t4 CLASS=tab>tab 4</TD>
<TD ID=t5 CLASS=tab>tab 5</TD>
<TD ID=t6 CLASS=tab>tab 6</TD>
<TD ID=t7 CLASS=tab>tab 7</TD>
</TR>
<TR>
<TD ID=t1base STYLE="height:2; border-left:solid thin white"></TD>
<TD ID=t2base STYLE="height:2; background-color:white"></TD>
<TD ID=t3base STYLE="height:2; background-color:white"></TD>
<TD ID=t4base STYLE="height:2; background-color:white"></TD>
<TD ID=t5base STYLE="height:2; background-color:white"></TD>
<TD ID=t6base STYLE="height:2; background-color:white"></TD>
<TD ID=t7base STYLE="height:2; background-color:white; border-right:solid thin white"></TD>
</TR>


<TR>
<TD HEIGHT="*" COLSPAN=7 ID=tabContents
STYLE=" border-left:solid thin white;
border-bottom:solid thin white;
border-right:solid thin white">sample contents</TD>

</TR>
</TABLE>
</DIV>


<DIV CLASS=conts ID=t1Contents>This text is on tab one</DIV>
<DIV CLASS=conts ID=t2Contents>This text is on tab two</DIV>
<DIV CLASS=conts ID=t3Contents>This text is on tab three</DIV>
<DIV CLASS=conts ID=t4Contents>This text is on tab four</DIV>
<DIV CLASS=conts ID=t5Contents>This text is on tab five</DIV>
<DIV CLASS=conts ID=t6Contents>This text is on tab six</DIV>
<DIV CLASS=conts ID=t7Contents>This text is on tab seven</DIV>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<STYLE>
.conts {visibility:hidden}
.tab { border-top:solid thin #E0E0E0;
border-right:solid thin gray;
border-left:solid thin #E0E0E0;
font-family:Verdana;
font-size:10pt;
text-align:center;
font-weight:normal}

.selTab { border-left:solid thin white;
border-top:solid thin white;
border-right:solid thin black;
font-weight:bold;
text-align:center}

</STYLE>
<SCRIPT LANGUAGE=JavaScript>

//a public function that the container uses to pass in values for the labels
function public_Labels(label1, label2, label3, label4, label5, label6, label7){
	t1.innerText = label1;
	t2.innerText = label2;
	t3.innerText = label3;
	t4.innerText = label4;
	t5.innerText = label5;
	t6.innerText = label6;
	t7.innerText = label7;
}

//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){

	t1Contents.innerHTML = contents1;
	t2Contents.innerHTML = contents2;
	t3Contents.innerHTML = contents3;
	t4Contents.innerHTML = contents4;
	t5Contents.innerHTML = contents5;
	t6Contents.innerHTML = contents6;
	t7Contents.innerHTML = contents7;
	
	init();
}

//sets the default display to tab 1
function init(){
	tabContents.innerHTML = t1Contents.innerHTML;
	
	// internet explorer 6 ignores this... mozilla firefox uses this to pass the window event.
	window.onclick = changeTabs;
}

//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;


function changeTabs(e){

	var eSrcElement = null;
	if(e){
		eSrcElement = e.target;
	} else {
		eSrcElement = window.event.srcElement;
	} 
	
	if(firstFlag == true){
		currentTab = t1;
		tabBase = t1base;
		firstFlag = false;
	}
	
	if(eSrcElement.className == "tab"){
	
		currentTab.className = "tab";
		
		tabBase.style.backgroundColor = "white";
		
		currentTab = eSrcElement;
		
		tabBaseID = currentTab.id + "base";
		
		tabContentID = currentTab.id + "Contents";
		
		tabBase = document.all(tabBaseID);
		
		tabContent = document.all(tabContentID);
		
		currentTab.className = "selTab";
		
		tabBase.style.backgroundColor = "";
		
		tabContents.innerHTML = tabContent.innerHTML;
		
	}
}

</SCRIPT>
</HEAD>
<BODY BGCOLOR=#C0C0C0 onclick="changeTabs()" onload="init()">


<DIV STYLE="position:absolute; top:40; height:350; width:500; left:25; border:none thin gray">


<TABLE STYLE="width:100%; height:250" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ID=t1 CLASS=selTab HEIGHT=25>tab 1</TD>
<TD ID=t2 CLASS=tab>tab 2</TD>
<TD ID=t3 CLASS=tab>tab 3</TD>
<TD ID=t4 CLASS=tab>tab 4</TD>
<TD ID=t5 CLASS=tab>tab 5</TD>
<TD ID=t6 CLASS=tab>tab 6</TD>
<TD ID=t7 CLASS=tab>tab 7</TD>
</TR>
<TR>
<TD ID=t1base STYLE="height:2; border-left:solid thin white"></TD>
<TD ID=t2base STYLE="height:2; background-color:white"></TD>
<TD ID=t3base STYLE="height:2; background-color:white"></TD>
<TD ID=t4base STYLE="height:2; background-color:white"></TD>
<TD ID=t5base STYLE="height:2; background-color:white"></TD>
<TD ID=t6base STYLE="height:2; background-color:white"></TD>
<TD ID=t7base STYLE="height:2; background-color:white; border-right:solid thin white"></TD>
</TR>


<TR>
<TD HEIGHT="*" COLSPAN=7 ID=tabContents
STYLE=" border-left:solid thin white;
border-bottom:solid thin white;
border-right:solid thin white">sample contents</TD>

</TR>
</TABLE>
</DIV>


<DIV CLASS=conts ID=t1Contents>This text is on tab one</DIV>
<DIV CLASS=conts ID=t2Contents>This text is on tab two</DIV>
<DIV CLASS=conts ID=t3Contents>This text is on tab three</DIV>
<DIV CLASS=conts ID=t4Contents>This text is on tab four</DIV>
<DIV CLASS=conts ID=t5Contents>This text is on tab five</DIV>
<DIV CLASS=conts ID=t6Contents>This text is on tab six</DIV>
<DIV CLASS=conts ID=t7Contents>This text is on tab seven</DIV>
</BODY>
</HTML>

Now, I have done something I don't like here, I have defined an onclick attribute in the body tag and I have overridden the window.onclick attribute in the init function. It works in both IE and mozilla, obviously because of differences in the window architecture.. but I wouldn't be surprised if it causes problems.

I also think that its silly that your globally 'eating' onclick events, you should instead assign onclick events to each object that you wish to handle onclick events... this would also allow you to skip the check of where the event came from... but it would require a different method of thinking about the events and your function would need to change.

Has anyone got a good method of capturing the event object in mozilla browsers, and also passing arguments to the function that handles events? I often need to do this... its easy in IE because of its global window.event object. But this doesn't seem available in Mozilla browsers.

Cheers.