Results 1 to 10 of 10

Thread: Help with 2.2 tabs

  1. #1
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Help with 2.2 tabs

    1) Script Title:

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

    3) Describe problem: Does anyone know how to Disable the slideshow mode??
    I cant see anywhere in the script that gives me an indication as to how to disable it.
    Last edited by mike@usn; 12-06-2008 at 05:15 PM.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    If you look at the instructions you will find Turning on slideshow mode which shows you how to turn it on. By not defining an integer when calling instance.init() slideshow mode should be turned off. Using the example given there:
    Code:
    <script type="text/javascript">
    
    var myflowers=new ddtabcontent("flowertabs") //enter ID of Tab Container
    myflowers.setpersist(true) //toogle persistence of the tabs' state
    myflowers.setselectedClassTarget("link") //"link" or "linkparent"
    myflowers.init()
    
    </script>
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Hello SnookerMan

    I saw the thing on turning it on I need to turn it Off. What do i need to enter or remove from the script and in which folder.
    Thanks Snooker man myflowers.init()< what do i enter or do i just delete it.?
    Last edited by mike@usn; 12-06-2008 at 02:57 PM. Reason: more info

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Just don't put anything between the brackets:

    Slideshow on:
    Code:
    whatever.init(2000)

    Slideshow off
    :
    Code:
    whatever.init()
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. The Following User Says Thank You to Snookerman For This Useful Post:

    mike@usn (12-06-2008)

  6. #5
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    1)?
    Code:
    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=false
    	},
    
    	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
    	},
    Last edited by Snookerman; 04-22-2009 at 07:38 AM. Reason: added [code] tags

  7. #6
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    This is the actual file for the tabs I dont see the instance.init() anywhere on this file. Ok so Im not real smart Sue me LOL

    Code:
    ////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=false
    	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="1"
    		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=false
    	},
    
    	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(true) //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
    Last edited by Snookerman; 04-22-2009 at 07:37 AM. Reason: added [code] tags

  8. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    I don't really understand why you posted that piece of code but there is nothing there you should edit. All you need to do is look at the .html page and find the code that looks something like this:
    Code:
    <script type="text/javascript">
    
    var myflowers=new ddtabcontent("flowertabs") //enter ID of Tab Container
    myflowers.setpersist(true) //toogle persistence of the tabs' state
    myflowers.setselectedClassTarget("link") //"link" or "linkparent"
    myflowers.init(3000)
    
    </script>
    and remove the number in the brackets:
    Code:
    <script type="text/javascript">
    
    var myflowers=new ddtabcontent("flowertabs") //enter ID of Tab Container
    myflowers.setpersist(true) //toogle persistence of the tabs' state
    myflowers.setselectedClassTarget("link") //"link" or "linkparent"
    myflowers.init()
    
    </script>
    This will turn the slideshow off.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  9. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    If you look at step 2 on the instructions page (Step 2: Finally, simply add the below HTML to where you wish the Tab Content to appear on the page:)
    You will find three different ones:
    countries.init()
    myflowers.init()
    mypets.init(2000)
    The first two have the slideshow turned off, the last one has it turned on. This code should be on your html page. Do not change anything in the .js file. If you still can't find it, post a link to your site or attach the .html code.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  10. #9
    Join Date
    Dec 2008
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Snookerman is #1

    Thanks for your taking the time with me . Problem solved I was so focused on the script I forgot about the html in index.

  11. #10
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You're welcome! Make sure you go to your first post, edit, go advanced and add the Resolved prefix to this thread.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  12. The Following User Says Thank You to Snookerman For This Useful Post:

    mike@usn (12-06-2008)

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
  •