Tab script

[awm6392]

Hi

I found a tab script on the net a while back, but I forget exactly where. It has worked fine until I recently discovered a problem which I should have caught earlier. The script works fine in Firefox, but in other browsers, clicking on a tab loads the next tabs content, meaning the last tab loads nothing, and in IE7 the tabs don't load at all.

The script I'm using is:

<script type="text/javascript">
		<!--
		function TabView(id, current){
			if(typeof(TabView.cnt) == "undefined"){
				TabView.init();
			}
			current = (typeof(current) == "undefined") ? 0 : current;
			this.newTab(id, current);
		}
		TabView.init = function(){
			TabView.cnt = 0;
			TabView.arTabView = new Array();
		}
		TabView.switchTab = function(TabViewIdx, TabIdx){
			TabView.arTabView[TabViewIdx].TabView.switchTab(TabIdx);
		}
		TabView.prototype.newTab = function(id, current){
			var TabViewElem, idx = 0, el = '', elTabs = '', elPages = '';
			TabViewElem = document.getElementById(id);
			TabView.arTabView[TabView.cnt] = TabViewElem;
			this.TabElem = TabViewElem;
			this.TabElem.TabView = this;
			this.tabCnt = 0;
			this.arTab = new Array();
			// Loop throught the elements till the object with
			// classname 'Tabs' is obtained
			elTabs = TabViewElem.firstChild;
			while(elTabs.className != "Tabs" )elTabs = elTabs.nextSibling;
			el = elTabs.firstChild;
			do{
				if(el.tagName == "A"){
					el.href = "javascript:TabView.switchTab(" + TabView.cnt + "," + idx + ");";
					this.arTab[idx] = new Array(el, 0);
					this.tabCnt = idx++;
				}
			}while (el = el.nextSibling);

			// Loop throught the elements till the object with
			// classname 'Pages' is obtained
			elPages = TabViewElem.firstChild;
			while (elPages.className != "Pages")elPages = elPages.nextSibling;
			el = elPages.firstChild;
			idx = 0;
			do{
				if(el.className == "Page"){
					this.arTab[idx][1] = el;
					idx++;
				}
			}while (el = el.nextSibling);
			this.switchTab(current);
			// Update TabView Count
			TabView.cnt++;
		}
		TabView.prototype.switchTab = function(TabIdx){
			var Tab;
			if(this.TabIdx == TabIdx)return false;
			for(idx in this.arTab){
				Tab = this.arTab[idx];
				if(idx == TabIdx){
					Tab[0].className = "ActiveTab";
					Tab[1].style.display = "block";
					Tab[0].blur();
				}else{
					Tab[0].className = "InactiveTab";
					Tab[1].style.display = "none";
				}
			}
			this.TabIdx = TabIdx;
		   
		}
		function init(){
			t1 = new TabView('TabView1', 0);
			t2 = new TabView('TabView2', 1);
		}
		//-->
	</script>
	
	<script  type="text/javascript">
		<!--
		if (document.images)
		{
			pic1= new Image(676,139); 
			pic1.src="<?php print $base_path . $directory; ?>/files/images/school_banner.jpg"; 

			pic2= new Image(676,139); 
			pic2.src="<?php print $base_path . $directory; ?>/files/images/student_banner.jpg"; 

			pic3= new Image(676,139); 
			pic3.src="<?php print $base_path . $directory; ?>/files/images/parent_banner.jpg"; 
		}
		
		function swapEvents(picName,imgName,textName,textValue)
		{
		
			var picture = picName;
			var image = imgName;
			var text = textName;
			var value = textValue;
		
			function swapimage(picSwap,imgSwap)
			{
				if (document.images)
				{
					imgOn = eval(imgSwap + ".src");
					document[picSwap].src = imgOn;

					if (imgSwap == "pic2" || imgSwap == "pic1")
					{
						document[picSwap].useMap = "#fbMap";
					}
					else
					{
						document[picSwap].useMap = "";
					}
				}

			}
			
			swapimage(picture,image);
			
			function swaptext(textSwap,valueSwap)
			{
				document.getElementById(textSwap).innerHTML = valueSwap;
			}
			
			swaptext(text,value);
		}
		
		//-->
	</script>

followed with this HTML (this is an example, not what i exactly used):

<div class="TabView" id="TabView1">
			<!--Tabs-->
			<div class="Tabs">
<a id="tab1">&nbsp;</a>
<a id="tab2">&nbsp;</a> 
<a id="tab3">&nbsp;</a></div>
			<!--Pages-->
			<div class="Pages">

				<div class="Page" id="page1">
					
				</div>


				<div class="Page" id="page2">
					
				</div>
				

				<div class="Page" id="page3">
					
				</div>

			</div>
		</div>

The page this problem is on is here. Can someone please help? This is quite important.

Cheers

Alex

[Nile]

Is it possible to instead of finding the needle in the hay stack, you could use: http://www.dynamicdrive.com/dynamici...tabcontent.htm

Good luck!

[awm6392]

I probably will use that next time. however, I don't really want to have to go through the process of re-doing all the styles and formatting for all of the work I've done so far. This code works fine on another page on the site, and was working just fine on this page before. The only change I made was to remove one of the tabs. I thought this was an issue, but I can't find anywhere in the script that actually requires me to change the number of tabs used.

[Nile]

In the "Seminars" part of the site, try removing one tab to see if the problem reoccurs. IN the meanwhile, chrome seems to be having a problem with a specific line and giving me an error, I'll see what I can do.

Good luck

[awm6392]

the problem seems to be in this section here:

el = elTabs.firstChild;
		do{
			if(el.tagName == "A"){
				el.href = "javascript:TabView.switchTab(" + TabView.cnt + "," + idx + ");";
				this.arTab[idx] = new Array(el, 0);
				this.tabCnt = idx++;
			}
		}while (el = el.nextSibling);

For some reason, the script is now assigning the value of 1 to "idx" for the first tab and counting up from there. It should start at 0.

[awm6392]

So it seems that for whatever reason, some hidden <a> tags are being rendered inside some of the <div> tags on my page. most notably, the "Tabs" tag. This means the first hidden tag is being given a value of 0, pushing the others across. Because of the urgency, I simply created a workaround.

My question now is: can anyone tell me why the script won't run in Internet Explorer?

[awm6392]

Error message in Internet Explorer:

Message: Object required
Line: 107
Char: 4
Code: 0

Any thoughts?