Mini-Tabbed Window section in FF not working

@hlj71Aug 13.2009

Hi there! I hope someone can help me out with this. I am trying to include a small section on my webpage that has 4 different tabs. When the user clicks on tab 1, they get the information related to tab 1. When they click on tab 2, the informaiton changes to that related to tab 2, and so on. I am using a combination of CSS and Javascript. It is working as I need it in IE, but I can’t get it to work in FireFox. I am not very familiar with JS, so I’m not sure if I am missing something in the JS file or the CSS file.

Here is a link to the testing page: ~~[URL=”http://www.aahahealthypet.com/tab_testing.html”]~~http://www.aahahealthypet.com/tab_testing.html[/URL]. Try it in both IE and FF and you will see what I mean. In this case (which is rare!) it works in IE, but I can’t get it to change tabs in FF.

Could someone please take a look and help me figure out what I am missing to get this to work in FireFox? I am totally stumped and it’s probably something that is staring me right in the face!

Thank you!!!!!

to post a comment

JavaScript

11 Comments(s) _↴

@TheBearMayAug 13.2009 — #Try changing

<i>
 </i>function init(){
 tabContents.innerHTML = t1Contents.innerHTML;
 }

<i>
 </i>function init(){
 document.getElementById("tabContents").innerHTML =document.getElementById("t1Contents").innerHTML;
 }

Note: There are several other instances in your code that will need similar treatment as FF requires use of the DOM to access elements.

@hlj71authorAug 13.2009 — #Thanks BearMay, for the quick response. I changed the code to the following, however, I'm sure I did something wrong as it now doesn't work in IE. The new code is below or online at the link in my orginal post.

[CODE]
 //a public function that the container uses to pass in values for the labels
 function public_Labels(label1, label2, label3, label4){
 
  document.getElementById("t1").innerText = label1;
 //	t1.innerText = label1;
 document.getElementById("t2").innerText = label2;
 //	t2.innerText = label2;
 document.getElementById("t3").innerText = label3;
 //	t3.innerText = label3;
 document.getElementById("t4").innerText = label4;
 //	t4.innerText = label4;
 }
 
 //a public function that the container uses to pass in values for the card containers
 function public_Contents(contents1, contents2, contents3, contents4){
 
  document.getElementById("t1Contents").innerHTML = contents1;
 //	t1Contents.innerHTML = contents1;
 document.getElementById("t2Contents").innerHTML = contents2;
 //	t2Contents.innerHTML = contents2;
 document.getElementById("t3Contents").innerHTML = contents3;
 //	t3Contents.innerHTML = contents3;
 document.getElementById("t3Contents").innerHTML = contents3;
 //	t4Contents.innerHTML = contents4;
 
  init();
 }
 
 //sets the default display to tab 1
 //function init(){
 //	tabContents.innerHTML = t1Contents.innerHTML;
 //} 
 function init(){
 document.getElementById("tabContents").innerHTML =document.getElementById("t1Contents").innerHTML;
 }
 
 //this is the tab switching function
 var currentTab;
 var tabBase;
 var firstFlag = true;
 
 
 function changeTabs(){
 
  if(firstFlag == true){
   document.getElementById("currentTab") = document.getElementById("t1");
   document.getElementById("tabBase") = document.getElementById("t1base");
   firstFlag = false;
  }
 
  if(window.event.srcElement.className == "tab"){
 
   document.getElementById("currentTab").className = "tab";
 //		currentTab.className = "tab";
 
   document.getElementById("tabBase").style.backgroundColor = "white";
 //		tabBase.style.backgroundColor = "white";
 
   document.getElementById("currentTab") = window.event.srcElement;
 //		currentTab = window.event.srcElement;
 
   document.getElementById("tabBaseID") = currentTab.id + "base";
 //		tabBaseID = currentTab.id + "base";
 
   document.getElementById("tabContentID") = currentTab.id + "Contents";
 //		tabContentID = currentTab.id + "Contents";
 
   document.getElementById("tabBase") = document.all(tabBaseID);
 //		tabBase = document.all(tabBaseID);
 
   document.getElementById("tabContent") = document.all(tabContentID);
 //		tabContent = document.all(tabContentID);
 
   document.getElementById("currentTab.className") = "selTab";
 //		currentTab.className = "selTab";
 
   document.getElementById("tabBase").style.backgroundColor = "";
 //		tabBase.style.backgroundColor = "";
 
   document.getElementById("tabContents").innerHTML = document.getElementById("tabContent").innerHTML;
 //		tabContents.innerHTML = tabContent.innerHTML;
 
  }
 }
 
 [/CODE]

Thanks for the help!!!

@hlj71authorAug 13.2009 — #I got the code to work in IE, but it is still not working in FF. Here is the new code I am using: http://www.aahahealthypet.com/tab_testing.js

[CODE]//a public function that the container uses to pass in values for the labels
 function public_Labels(label1, label2, label3, label4){
 
  document.getElementById("t1").innerText = label1;
  document.getElementById("t2").innerText = label2;
  document.getElementById("t3").innerText = label3;
  document.getElementById("t4").innerText = label4;
 }
 
 //a public function that the container uses to pass in values for the card containers
 function public_Contents(contents1, contents2, contents3, contents4){
 
  document.getElementById("t1Contents").innerHTML = contents1;
  document.getElementById("t2Contents").innerHTML = contents2;
  document.getElementById("t3Contents").innerHTML = contents3;
  document.getElementById("t3Contents").innerHTML = contents3;
 
  init();
 }
 
 //sets the default display to tab 1
 function init(){
 document.getElementById("tabContents").innerHTML =document.getElementById("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 = "";
 
   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 = "";
 
   document.getElementById("tabContents").innerHTML = tabContent.innerHTML;
  }
 }
 
 [/CODE]

Thanks again for the help anyone can give!

@TheBearMayAug 14.2009 — #Missed an if block:

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

Try:

<i>
 </i>	if(firstFlag == true){
 currentTab = document.getElementById("t1");
 tabBase = document.getElementById("t1base");
 firstFlag = false;
 }

@hlj71authorAug 14.2009 — #I fixed the IF block of code, but it is still not working in FF (it does work in IE). Any other tips? I really appreciate the help so far. ?

I wonder if it has to do with my CSS if the JS file is correct? Maybe I will post in that forum as well.

Current JS Code:

[CODE]//a public function that the container uses to pass in values for the labels
 function public_Labels(label1, label2, label3, label4){
 
  document.getElementById("t1").innerText = label1;
  document.getElementById("t2").innerText = label2;
  document.getElementById("t3").innerText = label3;
  document.getElementById("t4").innerText = label4;
 }
 
 //a public function that the container uses to pass in values for the card containers
 function public_Contents(contents1, contents2, contents3, contents4){
 
  document.getElementById("t1Contents").innerHTML = contents1;
  document.getElementById("t2Contents").innerHTML = contents2;
  document.getElementById("t3Contents").innerHTML = contents3;
  document.getElementById("t3Contents").innerHTML = contents3;
 
  init();
 }
 
 //sets the default display to tab 1
 function init(){
 document.getElementById("tabContents").innerHTML =document.getElementById("t1Contents").innerHTML;
 }
 
 //this is the tab switching function
 var currentTab;
 var tabBase;
 var firstFlag = true;
 
 
 function changeTabs(){
 
  if(firstFlag == true){
   currentTab = document.getElementById("t1");
   tabBase = document.getElementById("t1base");
   firstFlag = false;
  }
 
  if(window.event.srcElement.className == "tab"){
 
   currentTab.className = "tab";
 
   tabBase.style.backgroundColor = "";
 
   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 = "";
 
   document.getElementById("tabContents").innerHTML = tabContent.innerHTML;
  }
 }
 
 [/CODE]

@TheBearMayAug 14.2009 — #Now you're getting an error on window.event not defined.

<i>
 </i>function changeTabs(){
 
 <i>	</i>if(firstFlag == true){
 <i>	</i>	currentTab = document.getElementById("t1");
 <i>	</i>	tabBase = document.getElementById("t1base");
 <i>	</i>	firstFlag = false;
 <i>	</i>}
 
 <i>	</i>if(window.event.srcElement.className == "tab"){

could try something like:

<i>
 </i>function changeTabs(evt){
 if(window.event) evt=window.event;
 
 <i>	</i>if(firstFlag == true){
 <i>	</i>	currentTab = document.getElementById("t1");
 <i>	</i>	tabBase = document.getElementById("t1base");
 <i>	</i>	firstFlag = false;
 <i>	</i>}
 
 <i>	</i>if(evt.srcElement.className == "tab"){

@hlj71authorAug 14.2009 — #How did you know I was getting an error? I didn't see any errors pop up or show up on the bottom footer bar. I will try your suggestion and see if that works. Thanks soooo much!!

@TheBearMayAug 14.2009 — #I have a few extensions installed (Web Developer, DOM Inspector, and FireBug among others) that let me bring up the error console fairly quickly.

@hlj71authorAug 14.2009 — #aaahh, OK. I am trying to learn some of this as I going through it and I couldn't figure out how you got the error but I didn't. ? I will have to look into some of those tools. I updated the code and it still works in IE, but not in FF.

[CODE]//a public function that the container uses to pass in values for the labels
 function public_Labels(label1, label2, label3, label4){
 
  document.getElementById("t1").innerText = label1;
  document.getElementById("t2").innerText = label2;
  document.getElementById("t3").innerText = label3;
  document.getElementById("t4").innerText = label4;
 }
 
 //a public function that the container uses to pass in values for the card containers
 function public_Contents(contents1, contents2, contents3, contents4){
 
  document.getElementById("t1Contents").innerHTML = contents1;
  document.getElementById("t2Contents").innerHTML = contents2;
  document.getElementById("t3Contents").innerHTML = contents3;
  document.getElementById("t3Contents").innerHTML = contents3;
 
  init();
 }
 
 //sets the default display to tab 1
 function init(){
 document.getElementById("tabContents").innerHTML =document.getElementById("t1Contents").innerHTML;
 }
 
 //this is the tab switching function
 var currentTab;
 var tabBase;
 var firstFlag = true;
 
 
 function changeTabs(evt){
 if(window.event) evt=window.event;
 
  if(firstFlag == true)
  {
   currentTab = document.getElementById("t1");
   tabBase = document.getElementById("t1base");
   firstFlag = false;
  }
 
  if(evt.srcElement.className == "tab"){
 
   currentTab.className = "tab";
 
   tabBase.style.backgroundColor = "";
 
   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 = "";
 
   document.getElementById("tabContents").innerHTML = tabContent.innerHTML;
  }
 }[/CODE]

@TheBearMayAug 17.2009 — #Sorry about the delay but I was in an area without connectivity for a couple of days. Few minor additions/corrections:

The script end ups looking like:

<i>
 </i>if(window.attachEvent) 
 window.attachEvent("onload", init);
 else
 window.addEventListener("load", init, false);
 
 <i>	</i>//a public function that the container uses to pass in values for the labels
 function public_Labels(label1, label2, label3, label4){
 
 <i>	</i>document.getElementById("t1").innerText = label1;
 <i>	</i>document.getElementById("t2").innerText = label2;
 <i>	</i>document.getElementById("t3").innerText = label3;
 <i>	</i>document.getElementById("t4").innerText = label4;
 }
 
 //a public function that the container uses to pass in values for the card containers
 function public_Contents(contents1, contents2, contents3, contents4){
 
 <i>	</i>document.getElementById("t1Contents").innerHTML = contents1;
 <i>	</i>document.getElementById("t2Contents").innerHTML = contents2;
 <i>	</i>document.getElementById("t3Contents").innerHTML = contents3;
 <i>	</i>document.getElementById("t3Contents").innerHTML = contents3;
 
 <i>	</i>init();
 }
 
 //sets the default display to tab 1
 function init(){
 document.getElementById("tabContents").innerHTML =document.getElementById("t1Contents").innerHTML;
 }
 
 //this is the tab switching function
 var currentTab;
 var tabBase;
 var firstFlag = true;
 
 
 function changeTabs(evt){
 if(window.event) { 
 evt=window.event;
 evt.target = window.event.srcElement;
 }
 
 <i>	</i>if(firstFlag == true)
 <i>	</i>{
 <i>	</i>	currentTab = document.getElementById("t1");
 <i>	</i>	tabBase = document.getElementById("t1base");
 <i>	</i>	firstFlag = false;
 <i>	</i>}
 
 <i>	</i>if(evt.target.className == "tab"){
 
 <i>	</i>	currentTab.className = "tab";
 
 <i>	</i>	tabBase.style.backgroundColor = "";
 
 <i>	</i>	currentTab = evt.target;
 
 <i>	</i>	tabBaseID = currentTab.id + "base";
 
 <i>	</i>	tabContentID = currentTab.id + "Contents";
 
 <i>	</i>	tabBase = document.getElementById(tabBaseID);
 
 <i>	</i>	tabContent = document.getElementById(tabContentID);
 
 <i>	</i>	currentTab.className = "selTab";
 
 <i>	</i>	tabBase.style.backgroundColor = "";
 
 <i>	</i>	document.getElementById("tabContents").innerHTML = tabContent.innerHTML;
 <i>	</i>}
 }
 &lt;/script&gt;

and change the first two lines of the body to:

[code=html]
 <body> 

 <div onclick="changeTabs(event)" id="content_main">
 [/code]

@hlj71authorAug 17.2009 — #This works wonderfully. Thank you soooo much for your help!!!

Also in #JavaScript _↴

Replacing eval() URGENT!Image sizing before displaying Multiple drop down boxes for PayPal

Success!

Help @hlj71 spread the word by sharing this article on Twitter...

Tweet This

Mini-Tabbed Window section in FF not working

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Mini-Tabbed Window section in FF not working

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴