Please help me make this script work in Netscape

Please support our JavaScript / DHTML / AJAX advertiser: 50% off 6 Months Dedicated Server Hosting from 1&1!
Reply

•
•
Join Date: Apr 2005
Posts: 2
Reputation: rexian is an unknown quantity at this point 
Solved Threads: 0
rexian rexian is offline Offline
Newbie Poster

Please help me make this script work in Netscape

 
0
  #1
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2005
Posts: 2
Reputation: rexian is an unknown quantity at this point 
Solved Threads: 0
rexian rexian is offline Offline
Newbie Poster

Re: Please help me make this script work in Netscape

 
0
  #2
May 2nd, 2005
bump.....help plz
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Re: Please help me make this script work in Netscape

 
0
  #3
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Document Title</TITLE>
  4. <STYLE>
  5. .conts {visibility:hidden}
  6. .tab { border-top:solid thin #E0E0E0;
  7. border-right:solid thin gray;
  8. border-left:solid thin #E0E0E0;
  9. font-family:Verdana;
  10. font-size:10pt;
  11. text-align:center;
  12. font-weight:normal}
  13.  
  14. .selTab { border-left:solid thin white;
  15. border-top:solid thin white;
  16. border-right:solid thin black;
  17. font-weight:bold;
  18. text-align:center}
  19.  
  20. </STYLE>
  21. <SCRIPT LANGUAGE=JavaScript>
  22.  
  23. //a public function that the container uses to pass in values for the labels
  24. function public_Labels(label1, label2, label3, label4, label5, label6, label7){
  25. 	t1.innerText = label1;
  26. 	t2.innerText = label2;
  27. 	t3.innerText = label3;
  28. 	t4.innerText = label4;
  29. 	t5.innerText = label5;
  30. 	t6.innerText = label6;
  31. 	t7.innerText = label7;
  32. }
  33.  
  34. //a public function that the container uses to pass in values for the card containers
  35. function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){
  36.  
  37. 	t1Contents.innerHTML = contents1;
  38. 	t2Contents.innerHTML = contents2;
  39. 	t3Contents.innerHTML = contents3;
  40. 	t4Contents.innerHTML = contents4;
  41. 	t5Contents.innerHTML = contents5;
  42. 	t6Contents.innerHTML = contents6;
  43. 	t7Contents.innerHTML = contents7;
  44.  
  45. 	init();
  46. }
  47.  
  48. //sets the default display to tab 1
  49. function init(){
  50. 	tabContents.innerHTML = t1Contents.innerHTML;
  51.  
  52. 	// internet explorer 6 ignores this... mozilla firefox uses this to pass the window event.
  53. 	window.onclick = changeTabs;
  54. }
  55.  
  56. //this is the tab switching function
  57. var currentTab;
  58. var tabBase;
  59. var firstFlag = true;
  60.  
  61.  
  62. function changeTabs(e){
  63.  
  64. 	var eSrcElement = null;
  65. 	if(e){
  66. 		eSrcElement = e.target;
  67. 	} else {
  68. 		eSrcElement = window.event.srcElement;
  69. 	} 
  70.  
  71. 	if(firstFlag == true){
  72. 		currentTab = t1;
  73. 		tabBase = t1base;
  74. 		firstFlag = false;
  75. 	}
  76.  
  77. 	if(eSrcElement.className == "tab"){
  78.  
  79. 		currentTab.className = "tab";
  80.  
  81. 		tabBase.style.backgroundColor = "white";
  82.  
  83. 		currentTab = eSrcElement;
  84.  
  85. 		tabBaseID = currentTab.id + "base";
  86.  
  87. 		tabContentID = currentTab.id + "Contents";
  88.  
  89. 		tabBase = document.all(tabBaseID);
  90.  
  91. 		tabContent = document.all(tabContentID);
  92.  
  93. 		currentTab.className = "selTab";
  94.  
  95. 		tabBase.style.backgroundColor = "";
  96.  
  97. 		tabContents.innerHTML = tabContent.innerHTML;
  98.  
  99. 	}
  100. }
  101.  
  102. </SCRIPT>
  103. </HEAD>
  104. <BODY BGCOLOR=#C0C0C0 onclick="changeTabs()" onload="init()">
  105.  
  106.  
  107. <DIV STYLE="position:absolute; top:40; height:350; width:500; left:25; border:none thin gray">
  108.  
  109.  
  110. <TABLE STYLE="width:100%; height:250" CELLPADDING=0 CELLSPACING=0>
  111. <TR>
  112. <TD ID=t1 CLASS=selTab HEIGHT=25>tab 1</TD>
  113. <TD ID=t2 CLASS=tab>tab 2</TD>
  114. <TD ID=t3 CLASS=tab>tab 3</TD>
  115. <TD ID=t4 CLASS=tab>tab 4</TD>
  116. <TD ID=t5 CLASS=tab>tab 5</TD>
  117. <TD ID=t6 CLASS=tab>tab 6</TD>
  118. <TD ID=t7 CLASS=tab>tab 7</TD>
  119. </TR>
  120. <TR>
  121. <TD ID=t1base STYLE="height:2; border-left:solid thin white"></TD>
  122. <TD ID=t2base STYLE="height:2; background-color:white"></TD>
  123. <TD ID=t3base STYLE="height:2; background-color:white"></TD>
  124. <TD ID=t4base STYLE="height:2; background-color:white"></TD>
  125. <TD ID=t5base STYLE="height:2; background-color:white"></TD>
  126. <TD ID=t6base STYLE="height:2; background-color:white"></TD>
  127. <TD ID=t7base STYLE="height:2; background-color:white; border-right:solid thin white"></TD>
  128. </TR>
  129.  
  130.  
  131. <TR>
  132. <TD HEIGHT="*" COLSPAN=7 ID=tabContents
  133. STYLE=" border-left:solid thin white;
  134. border-bottom:solid thin white;
  135. border-right:solid thin white">sample contents</TD>
  136.  
  137. </TR>
  138. </TABLE>
  139. </DIV>
  140.  
  141.  
  142. <DIV CLASS=conts ID=t1Contents>This text is on tab one</DIV>
  143. <DIV CLASS=conts ID=t2Contents>This text is on tab two</DIV>
  144. <DIV CLASS=conts ID=t3Contents>This text is on tab three</DIV>
  145. <DIV CLASS=conts ID=t4Contents>This text is on tab four</DIV>
  146. <DIV CLASS=conts ID=t5Contents>This text is on tab five</DIV>
  147. <DIV CLASS=conts ID=t6Contents>This text is on tab six</DIV>
  148. <DIV CLASS=conts ID=t7Contents>This text is on tab seven</DIV>
  149. </BODY>
  150. </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 With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 4235 | Replies: 2
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxcode ajaxhelp animate array automatically blackjack box bug calendar column content cookies css design detect developer div dom download dynamic element error explorer explosion file firefox flash focus font form function game getelementsbytagname google gwt hangman hide hijack html iframe image images index insertbefore internet internet-explorer java javascript javascripts jquery js list listbox maps marquee match mimic modal mp3 multiple mysql offline onclick onerror onmouseover parameters pass photo php player position post print programming regex resize script scroll scrollbar search select selection show size sorting synchronous text tooltip tweet variables vb.net video web webservice website window xml xspf \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2010 DaniWeb® LLC