SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Need help adapting a script

    I'm using the tabtastic scripts to do the tabs for an application I'm working on. I'm nesting the tabs and want to style the main set of tabs one way and the inner tabs a different way. Right now, the CSS class is tabsetTabs so I figured if I made a new set of styles based on a class called tabsetTabsMain, that should work. Unfortunately, that breaks the JavaScript. I checked and tabsetTabs appears only once in the JavaScript, but I'm not good enough with JavaScript to know how to fix it. It appears as a variable assignment in a function in tabtastic.js. Here's that line:

    Code:
    var tocTag='ul', tocClass='tabsetTabs', tabTag='a',contentClass='tabset_content';
    tocClass also only appears once in the script, as part of a continue statement in another function:

    Code:
    if (!HasClass(toc,tocClass)) continue;
    What I'd like to do is have the script treat my new CSS class, tabsetTabsMain, in the same way it currently treats tabsetTabs. How would I do that?

    Here's the entire tabtastic.js:

    Code:
    //*** This library is copyright 2004 by Gavin Kistner, gavin@refinery.com
    //*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt
    //*** Reuse or modification is free provided you abide by the terms of that license.
    //*** (Including the first two lines above in your source code mostly satisfies the conditions.)
    
    //*** Tabtastic -- see http://phrogz.net/JS/Tabstatic/index.html
    //*** Version 1.0    20040430   Initial release.
    //***         1.0.2  20040501   IE5Mac, IE6Win compat.
    //***         1.0.3  20040501   Removed IE5Mac/Opera7 compat. (see http://phrogz.net/JS/Tabstatic/index.html#notes)
    //***         1.0.4  20040521   Added scroll-back hack to prevent scrolling down to page anchor. Then commented out :)
    
    AttachEvent(window,'load',function(){
    	var tocTag='ul', tocClass='tabsetTabs', tabTag='a',contentClass='tabset_content';
    
    
    	function FindEl(tagName,evt){
    		if (!evt && window.event) evt=event;
    		if (!evt) return DebugOut("Can't find an event to handle in DLTabSet::SetTab",0);
    		var el=evt.currentTarget || evt.srcElement;
    		while (el && (!el.tagName || el.tagName.toLowerCase()!=tagName)) el=el.parentNode;
    		return el;
    	}
    
    	function SetTabActive(tab){
    		if (tab.tabTOC.activeTab){
    			if (tab.tabTOC.activeTab==tab) return;
    			KillClass(tab.tabTOC.activeTab,'active');
    			if (tab.tabTOC.activeTab.tabContent) KillClass(tab.tabTOC.activeTab.tabContent,'tabset_content_active');
    			//if (tab.tabTOC.activeTab.tabContent) tab.tabTOC.activeTab.tabContent.style.display='';
    			if (tab.tabTOC.activeTab.prevTab) KillClass(tab.tabTOC.activeTab.previousTab,'preActive');
    			if (tab.tabTOC.activeTab.nextTab) KillClass(tab.tabTOC.activeTab.nextTab,'postActive');
    		}
    		AddClass(tab.tabTOC.activeTab=tab,'active');
    		if (tab.tabContent) AddClass(tab.tabContent,'tabset_content_active');				
    		//if (tab.tabContent) tab.tabContent.style.display='block';
    		if (tab.prevTab) AddClass(tab.prevTab,'preActive');
    		if (tab.nextTab) AddClass(tab.nextTab,'postActive');
    	}
    	function SetTabFromAnchor(evt){
    		//setTimeout('document.body.scrollTop='+document.body.scrollTop,1);
    		SetTabActive(FindEl('a',evt).semanticTab);
    	}
    
    	
    	function Init(){
    		window.everyTabThereIsById = {};
    		
    		var anchorMatch = /#([a-z][\w.:-]*)$/i,match;
    		var activeTabs = [];
    		
    		var tocs = document.getElementsByTagName(tocTag);
    		for (var i=0,len=tocs.length;i<len;i++){
    			var toc = tocs[i];
    			if (!HasClass(toc,tocClass)) continue;
    
    			var lastTab;
    			var tabs = toc.getElementsByTagName(tabTag);
    			for (var j=0,len2=tabs.length;j<len2;j++){
    				var tab = tabs[j];
    				if (!tab.href || !(match=anchorMatch.exec(tab.href))) continue;
    				if (lastTab){
    					tab.prevTab=lastTab;
    					lastTab.nextTab=tab;
    				}
    				tab.tabTOC=toc;
    				everyTabThereIsById[tab.tabID=match[1]]=tab;
    				tab.tabContent = document.getElementById(tab.tabID);
    				
    				if (HasClass(tab,'active')) activeTabs[activeTabs.length]=tab;
    				
    				lastTab=tab;
    			}
    			AddClass(toc.getElementsByTagName('li')[0],'firstchild');
    		}
    
    		for (var i=0,len=activeTabs.length;i<len;i++){
    			SetTabActive(activeTabs[i]);
    		}
    
    		for (var i=0,len=document.links.length;i<len;i++){
    			var a = document.links[i];
    			if (!(match=anchorMatch.exec(a.href))) continue;
    			if (a.semanticTab = everyTabThereIsById[match[1]]) AttachEvent(a,'click',SetTabFromAnchor,false);
    		}
    		
    		if ((match=anchorMatch.exec(location.href)) && (a=everyTabThereIsById[match[1]])) SetTabActive(a);
    		
    		//Comment out the next line and include the file directly if you need IE5Mac or Opera7 support.
    		AddStyleSheet('tabtastic.css',0);
    	}
    	Init();
    },false);
    If you need any of the related script files, they're here:

    addclasskillclass.js

    attachevent.js

    addcss.js

    Also, the script works great in Firefox, but in IE, it first displays all bunched up. If you mouse over the various parts or click on a tab, it will appear accurately. I'm thinking this may be a CSS issue instead of a JavaScript issue but I'm not sure. If anyone has any ideas on that, I'd love to hear.

    Thanks.

  2. #2
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please be specific what exactly you are looking for.
    The script is very huge to go through.
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for replying. What I want is to be able to add another variable, say 'tabsetTabsMain', so that the new variable is treated exactly the same way as the existing variable 'tabsetTabs'. If I'm understanding the code right, 'tabsetTabs' is assigned as the value of a new variable 'tocClass' in the line below:

    Code:
    var tocTag='ul', tocClass='tabsetTabs', tabTag='a',contentClass='tabset_content';
    The only place tocClass appears again is in this line toward the bottom of the code:
    Code:
    if (!HasClass(toc,tocClass)) continue;
    The HasClass function referred to above is:

    Code:
    //***Returns true if the object has the class assigned, false otherwise.
    function HasClass(obj,cName){ return (!obj || !obj.className)?false:(new RegExp("\\b"+cName+"\\b")).test(obj.className) }
    I thought that maybe I could just assign my new variable to a variable called tocClass1, like

    Code:
    tocClass1='tabsetTabsMain';
    then add that variable to the if statement, like:
    Code:
    if (!HasClass(toc,tocClass, tocClass1)) continue;
    But that breaks it, so there's obviously more to it than that.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've only taken a quick look, but try this
    Code:
    if (!HasClass(toc,tocClass) && !HasClass(toc, tocClass1)) continue;

  5. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked like a charm. Thanks so much.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Thanks for making all the related code easily accessible to us. It made it easy for us to help you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •