Results 1 to 4 of 4

Thread: Assign bookmark for tabcontent script

  1. #1
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default Assign bookmark for tabcontent script

    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

  2. #2
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi guys,

    any thoughts on this? is there a possible solution?

    thanks

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    i am amusing that you are referring to the rev DIVs

    replace function expandrevcontent and add function pos
    Code:
     
    
     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)

    Code:
    <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

    Code:
     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]);
      }
     },
    Last edited by vwphillips; 10-23-2013 at 02:34 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. The Following User Says Thank You to vwphillips For This Useful Post:

    Foundas (10-23-2013)

  5. #4
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi Vic,

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

Similar Threads

  1. tabcontent script hover state
    By izzysanime in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-05-2010, 07:39 AM
  2. Replies: 2
    Last Post: 01-10-2009, 09:07 AM
  3. Tabcontent script & deferred script help
    By Dazza30 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-11-2008, 10:28 PM
  4. Tabcontent script with external pages
    By msaz87 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 02-23-2008, 08:08 AM
  5. Spacing issue with TabContent script
    By Giya in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-05-2004, 01:12 PM

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
  •