Tab Content script v2.2 (probably a stupid oversight)

**dannthr** · 02-10-2010, 07:38 PM

Hey guys,

I'm attempting to use the Tab Content script v2.2, which I've actually used successfully before on another webpage, and which is not working for me now on a new page, which has become a very confusing circumstance.

I literally can not see why it won't work and I feel like I'm just missing some simple implementation piece of the puzzle--it's been fairly frustrating to look at one page that works, mimic the implementation and not have it work--even though I made the other page!

So I'm hoping that I can have another set of eyes point out some HORRIBLY SIMPLE AND STUPID oversight on my part.

Let me know what you guys think:

index

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1" xml:lang="en" lang="en">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Dan Reynolds - Composer</title>
<link rel="stylesheet" type="text/css" href="music_blizzard.css" />

<script type="text/javascript" src="tabcontent.js">

/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>

<body>

<div class="clearfix"></div>
<div id="macrotainer">
	<div id="container">
		<div id="about" class="tabcontent">
			<div id="winabout"></div>
			Here's some more text.
		</div>
		<div id="news" class="tabcontent">
			<div id="winnews"></div>
			Here's some text.
		</div>
		<div id="music" class="tabcontent">
			<div id="winmusic"></div>
			Text, text, text.
		</div>
		<div id="credit" class="tabcontent">
			<div id="wincredit"></div>
			Never-ending text.
		</div>
		<script type="text/javascript">
			var countries=new ddtabcontent("countrytabs")
			countries.setpersist(true)
			countries.setselectedClassTarget("link") //"link" or "linkparent"
			countries.init()
		</script>
	</div>
	<div id="right_side">
		<div id="title">
		</div>
		<div id="player">
		</div>
		<div id="menu">
			<ul id="countrytabs" class="shadetabs">
			<li><a id="aboutlink" href="#" rel="about" class="selected"></a></li>
			<li><a id="contactlink" href="mailto:dan@musicianeer.com"></a></li>
			<li><a id="newslink" href="#" rel="news"></a></li>
			<li><a id="musiclink" href="#" rel="music"></a></li>
			<li><a id="creditlink" href="#" rel="credit"></a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

css:

Code:

BODY{
	top:0px;
	margin:0px;
	padding:0px;
	border:0px;
	font-family:sans-serif;
	color:#4F6DC7;
	font-size:medium;
	background-color:#FFFFFF;
}

#macrotainer{
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
	border: 0px;
	width:1000px;
	height:562px;
	position: relative;
}

#container{
	float:left;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	border:0px;
	width:625px;
	height:562px;
	position: relative;
	background: url(music_blizzard_main_win_bg.jpg) no-repeat top center;
}

#about{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	border:0px;
	width:625px;
	position: relative;
}

#winabout{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	border:0px;
	width:625px;
	height:100px;
	background: url(music_blizzard_about_header.jpg) no-repeat top left;
	position: relative;
	}

#news{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	border:0px;
	width:625px;
	position: relative;
}

#winnews{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	border:0px;
	width:625px;
	height:100px;
	background: url(music_blizzard_news_header.jpg) no-repeat top left;
	position: relative;
	}

#music{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	border:0px;
	width:625px;
	position: relative;
}

#winmusic{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	border:0px;
	width:625px;
	height:100px;
	background: url(music_blizzard_music_header.jpg) no-repeat top left;
	position: relative;
	}

#credit{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	border:0px;
	width:625px;
	position: relative;
}

#wincredit{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	border:0px;
	width:625px;
	height:100px;
	background: url(music_blizzard_credit_header.jpg) no-repeat top left;
	position: relative;
	}

#right_side{
	float:right;
	margin-top: 0px;
	margin-left: auto;
	margin-right: 0px;
	margin-bottom: 0px;
	border:0px;
	width:375px;
	height:562px;
	position: relative;
	background-color:#FFFFFF;
}

#title{
	margin-top: 0px;
	margin-left: auto;
	margin-right: 0px;
	margin-bottom: 0px;
	border:0px;
	width:375px;
	height:187px;
	position: relative;
	background: url(music_blizzard_title_win_bg.jpg) no-repeat top center;
}

#player{
	margin-top: 0px;
	margin-left: auto;
	margin-right: 0px;
	margin-bottom: 0px;
	border:0px;
	width:375px;
	height:275px;
	position: relative;
	background: url(music_blizzard_player_win_bg.jpg) no-repeat top center;
}

#menu{
	margin-top: 0px;
	margin-left: auto;
	margin-right: 0px;
	margin-bottom: 0px;
	border:0px;
	width:375px;
	height:100px;
	position: relative;
	background: url(music_blizzard_menu_win_bg.jpg) no-repeat top center;
}
#menu ul{
	margin-top: 0px;
	margin-left: auto;
	margin-right: 0px;
	margin-bottom: 0px;
	border:0px;
	width:375px;
	height:100px;
	position: relative;
	}
#menu ul li{display:inline;}
#aboutlink{
	display:block;
	top:10px;
	left:45px;
	width:118px;
	height:28px;
	position:absolute;
	background-color:transparent;}
#contactlink{
	top:10px;
	left:165px;
	display:block;
	width:180px;
	height:28px;
	position:absolute;
	background-color:transparent;}
#newslink{
	display:block;
	top:40px;
	left:20px;
	width:100px;
	height:28px;
	position:absolute;
	background-color:transparent;}
#musiclink{
	display:block;
	top:40px;
	left:121px;
	width:112px;
	height:28px;
	position:absolute;
	background-color:transparent;}
#creditlink{
	display:block;
	top:40px;
	left:235px;
	width:128px;
	height:28px;
	position:absolute;
	background-color:transparent;}

.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac\*/
* html .clearfix{height:1%;}
.clearfix {display:block;}
/* end backslash hack*/

I appreciate any insight you guys can give me here.

(And sorry if this is the wrong forum, while I'm using css and dhtml, I felt like this was primarily a javascript issue--maybe not!)

- Dan Reynolds

PS: Tabcontent.js on next post

**dannthr** · 02-10-2010, 07:39 PM

tabcontent.js

Code:

//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0) 

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){
	this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
	this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
	this.enabletabpersistence=true
	this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
	this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
	this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
	this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
	this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){ 
	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return ""
}

ddtabcontent.setCookie=function(name, value){
	document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

	expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
		this.cancelautorun() //stop auto cycling of tabs (if running)
		var tabref=""
		try{
			if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
				tabref=document.getElementById(tabid_or_position)
			else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
				tabref=this.tabs[tabid_or_position]
		}
		catch(err){alert("Invalid Tab ID or position entered!")}
		if (tabref!="") //if a valid tab is found based on function parameter
			this.expandtab(tabref) //expand this tab
	},

	cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
		if (dir=="next"){
			var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
		}
		else if (dir=="prev"){
			var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
		}
		if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
			this.cancelautorun() //stop auto cycling of tabs (if running)
		this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
	},

	setpersist:function(bool){ //PUBLIC function to toggle persistence feature
			this.enabletabpersistence=bool
	},

	setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
		this.selectedClassTarget=objstr || "link"
	},

	getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
		return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
	},

	urlparamselect:function(tabinterfaceid){
		var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
		return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
	},

	expandtab:function(tabref){
		var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
		//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
		var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
		this.expandsubcontent(subcontentid)
		this.expandrevcontent(associatedrevids)
		for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
			this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
		}
		if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
			ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
		this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
	},

	expandsubcontent:function(subcontentid){
		for (var i=0; i<this.subcontentids.length; i++){
			var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
			subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
		}
	},

	expandrevcontent:function(associatedrevids){
		var allrevids=this.revcontentids
		for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
			//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
			document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
		}
	},

	setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
		for (var i=0; i<this.hottabspositions.length; i++){
			if (tabposition==this.hottabspositions[i]){
				this.currentTabIndex=i
				break
			}
		}
	},

	autorun:function(){ //function to auto cycle through and select tabs based on a set interval
		this.cycleit('next', true)
	},

	cancelautorun:function(){
		if (typeof this.autoruntimer!="undefined")
			clearInterval(this.autoruntimer)
	},

	init:function(automodeperiod){
		var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
		var selectedtab=-1 //Currently selected tab index (-1 meaning none)
		var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
		this.automodeperiod=automodeperiod || 0
		for (var i=0; i<this.tabs.length; i++){
			this.tabs[i].tabposition=i //remember position of tab relative to its peers
			if (this.tabs[i].getAttribute("rel")){
				var tabinstance=this
				this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
				this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
				this.tabs[i].onclick=function(){
					tabinstance.expandtab(this)
					tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
					return false
				}
				if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
					this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
				}
				if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
					selectedtab=i //Selected tab index, if found
				}
			}
		} //END for loop
		if (selectedtab!=-1) //if a valid default selected tab index is found
			this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
		else //if no valid default selected index found
			this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
		if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
			this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
		}
	} //END int() function

} //END Prototype assignment

**ddadmin** · 02-11-2010, 09:21 AM

Please post a link to the page on your site that contains the problematic script so we can check it out.

**dannthr** · 02-11-2010, 09:33 AM

Originally Posted by ddadmin

Please post a link to the page on your site that contains the problematic script so we can check it out.

Heh, sorry, so bleary eyed at the moment.

Test Index

The problem is that the divs are not being properly assigned their display:none status.

So I feel like there is an issue with the placement of the in-body script or something along those lines, but my random replacement of the script does nothing--removing the script shows no change--for whatever reason the in-body script seems totally ineffective.

However, for the purpose of this post, I placed the script within the containing div which mimics my earlier success with the script.

**ddadmin** · 02-11-2010, 10:26 PM

There may be other issues, but your initialization code needs to follow both the tab contents and tabs themselves, not in between as you have it now. Move the below to the bottom of the page:

Code:

		<script type="text/javascript">
			var countries=new ddtabcontent("countrytabs")
			countries.setpersist(true)
			countries.setselectedClassTarget("link") //"link" or "linkparent"
			countries.init()
		</script>

**dannthr** · 02-11-2010, 10:31 PM

Originally Posted by ddadmin

There may be other issues, but your initialization code needs to follow both the tab contents and tabs themselves, not in between as you have it now. Move the below to the bottom of the page:

Code:

		<script type="text/javascript">
			var countries=new ddtabcontent("countrytabs")
			countries.setpersist(true)
			countries.setselectedClassTarget("link") //"link" or "linkparent"
			countries.init()
		</script>

Thanks, it's so obvious--I'm not much of a coder, but I should've noticed that one of the main differences between my earlier success and this was that I moved the unordered list below the 'dynamic' div, whereas it was above it and so the initializing script DID follow both originally.

Thanks for your help, man, I knew it was a stupid mistake on my part.

Thread: Tab Content script v2.2 (probably a stupid oversight)

Thread Tools

Search Thread

Tab Content script v2.2 (probably a stupid oversight)

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions