Assign bookmark for tabcontent script

[Foundas]

1) Tab Content Script (v 2.2)

2) http://www.dynamicdrive.com/dynamici...tabcontent.htm



Hi guys,

I am using the tabcontent script v2.2 and I would like to know if it is possible to add a bookmark on the <li> items so when user clicks one of them, the page to scroll down to the position of the tab that will be displayed

I tried this:
<ul id="solutionstabs">
<li><a href="#bookmark_tab1" rel="default1" class="selected">Tab 1</li>
<li><a href="#bookmark_tab2" rel="default2">Tab 2</li>
<li><a href="#bookmark_tab3" rel="default3">Tab 3</li>
</ul>

<div id="default1" class="tabcontent">
<h2 id="bookmark_tab1">Tab 1 Content here</h2>
</div>
<div id="default2" class="tabcontent">
<h2 id="bookmark_tab2">Tab 2 Content here</h2>
</div>
<div id="default3" class="tabcontent">
<h2 id="bookmark_tab3">Tab 3 Content here</h2>
</div>

but with no luck....clicking the tabs, it changes from Tab 1 to Tab 2 and Tab 3 but the page does not scroll automatically to the exact position where the actual content is.

Can you please advice how to solve this?

thanks in advance

[Foundas]

Hi guys,

any thoughts on this? is there a possible solution?

thanks

[vwphillips]

i am amusing that you are referring to the rev DIVs

replace function expandrevcontent and add function pos

 

 expandrevcontent:function(associatedrevids){
		var allrevids=this.revcontentids,obj,p;
		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
            obj=document.getElementById(allrevids[i]);
			obj.style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none";
            p=this.pos(obj);
            this.scrollTo&&obj.style.display=='block'?window.scrollTo(p[0],p[1]):null;
     	}
	},

   pos:function(obj){
   var rtn=[0,0];
   while(obj){
    rtn[0]+=obj.offsetLeft;
    rtn[1]+=obj.offsetTop;
    obj=obj.offsetParent;
   }
   return rtn;
  },

the test HTML I am using(note the code in red)

<h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3>

<div id="flowernote" style="display:none; position:absolute; top: 800px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; top: 1200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; top: 1030px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>


<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote">Tab 2</a></li>
<li><a href="#" rel="tcontent3" rev="flowernote2">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
//myflowers.setpersist(true)
//myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.scrollTo=true;
myflowers.init()

</script>

<p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>
<p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p>

<hr />


<div style="height:5000px;" ></div>

to make it more interesting you could use

 expandrevcontent:function(associatedrevids){
		var allrevids=this.revcontentids,obj,p;
		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
            obj=document.getElementById(allrevids[i]);
			obj.style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none";
            p=this.pos(obj);
            this.scrollTo===true&&obj.style.display=='block'?this.scroll(obj):null;
     	}
	},

   pos:function(obj){
   var rtn=[0,0];
   while(obj){
    rtn[0]+=obj.offsetLeft;
    rtn[1]+=obj.offsetTop;
    obj=obj.offsetParent;
   }
   return rtn;
  },

  scroll:function(obj){
   var s=window.innerHeight?[window.pageXOffset,window.pageYOffset]:document.documentElement.clientHeight?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop]
   this.animate(s,this.pos(obj),new Date(),500);
  },


 animate:function(f,t,srt,mS){
  var oop=this,ms=new Date()-srt,n=[(t[0]-f[0])/mS*ms+f[0],(t[1]-f[0])/mS*ms+f[1]];
  clearTimeout(oop.to);
  window.scrollTo(isFinite(n[0])?n[0]:t[0],isFinite(n[1])?n[1]:t[1]);
  if (ms<mS){
   oop.to=setTimeout(function(){ oop.animate(f,t,srt,mS); },10);
  }
  else {
   window.scrollTo(t[0],t[1]);
  }
 },

[Foundas]

Hi Vic,

thank you very much for the solution. it works perfectly.