Please help me make this script work in Netscape

Question

rexian 0 Newbie Poster

19 Years Ago

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>

javascript

Edited 11 Years Ago by TrustyTony because: fixed formating

2 Contributors
2 Replies
115 Views
3 Days Discussion Span
Latest Post 19 Years Ago Latest Post by alpha_foobar

alpha_foobar 5 Junior Poster

19 Years Ago

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:

<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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rexian 0 Newbie Poster · Answer 1 · 2005-05-03T00:52:25+00:00

rexian 0 Newbie Poster

19 Years Ago

bump.....help plz