Results 1 to 3 of 3

Thread: (jQuery?) Table of contents which highlight section currently being viewed

  1. #1
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arrow (jQuery?) Table of contents which highlight section currently being viewed

    Hi,

    Was wondering how I can accomplish what's done on the Steam Community website with the "Guide Index" feature

    As you scroll down the page, a "selected" class is given to the DIV in the Guide Index corresponding to the section being viewed.

    I'm a designer, not a developer. I can work with jQuery, but can't code anything from scratch. Was wondering if there was some sort of plugin I can use on my website to achieve the desired outcome? Pretty sure it detects the viewpoint reaching the corresponding IDs of the sections (sounds relatively simple), but there's no way I'd be able to code something by myself though.

    Thanks in advance.

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

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .anchor {
      font-Size:20px;
    }
    
    #float {
      position:fixed;z-Index:101;right:20px;top:50px;width:200px;height:200px;background-Color:#FFFFCC;border:solid red 1px;
    }
    
    #float .anchor {
      position:relative;left:5px;top:50px;width:180px;height:20px;margin-Top:5px;padding-Left:10px;background-Color:#CCFFCC;border:solid red 1px;font-Size:14px;
    }
    
    #float .active {
     background-Color:#FFCC66;
    }
    
    .section {
      position:relative;left:0px;top:0px;width:100%;height:700px;background-Color:#FFFFCC;border:solid red 1px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div class="section" >
     <div class="anchor">section 1</div>
    </div>
    <div class="section" >
     <div class="anchor">section 2</div>
    </div>
    <div class="section" >
     <div class="anchor">section 3</div>
    </div>
    <div id="float" >
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Float Navigation ~(26-April-2013) DRAFT
    // by: Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcFloatNav={
    
     init:function(o){
      var id=o.ID,cls=o.AnchorClass,acls=o.ActiveClass,ms=o.ScrollSpeed,ms=typeof(ms)=='number'&&ms>20?ms:1000,obj=document.getElementById(id),ds=document.getElementsByTagName('DIV'),ary=[],c,z0=0,z1=0;
      if (obj){
       for (;z0<ds.length;z0++){
        if ((' '+ds[z0].className+' ').match(' '+cls+' ')){
         ary.push(ds[z0]);
        }
       }
       for (;z1<ary.length;z1++){
        c=ary[z1].cloneNode(true);
        obj.appendChild(c);
        cls=ary[z1].className;
        ary[z1]=[ary[z1],c,cls,cls+' '+acls,ms];
        this.addevt(c,'mouseup','scrollto',ary[z1]);
       }
       o.ary=ary;
       this.addevt(window,'scroll','scroll',o);
       this.scroll(o);
      }
     },
    
     scroll:function(o){
      for (var nu=0,z0=0;z0<o.ary.length;z0++){
       o.ary[z0][1].className=o.ary[z0][2];
       (this.pos(o.ary[z0][0])[1]-this.wwhs()[3]-this.wwhs()[1]/2)<0?nu=z0:null;
      }
      o.ary[nu][1].className=o.ary[nu][3];
     },
    
     scrollto:function(a){
      this.animate(this.wwhs()[3],this.pos(a[0])[1],new Date(),a[4],Math.PI/(2*a[4]))
     },
    
     animate:function(f,t,srt,mS,i){
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)*Math.sin(i*ms)+f;
      clearTimeout(oop.dly);
      if (isFinite(n)){
       window.scrollTo(0,n);
      }
      if (ms<mS){
       oop.dly=setTimeout(function(){ oop.animate(f,t,srt,mS,i); },10);
      }
      else {
       window.scrollTo(0,t);
      }
     },
    
     wwhs:function(){
      if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
      else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    }
    
    zxcFloatNav.init({
     ID:'float',
     AnchorClass:'anchor',
     ActiveClass:'active',
     ScrollSpeed:1000
    });
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    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/

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

    eneles (04-27-2013)

  4. #3
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much!

    As a demo it works wonderfully. Will work it into my website and see how it goes...

Similar Threads

  1. Changing table contents
    By blue! in forum HTML
    Replies: 0
    Last Post: 05-31-2009, 08:12 AM
  2. Gradual-Highlight Image Script II for text contents
    By zephyris in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-25-2006, 06:57 AM
  3. [DHTML]Table of Contents Generator
    By blm126 in forum Submit a DHTML or CSS code
    Replies: 2
    Last Post: 10-02-2006, 07:52 PM
  4. How to read contents of a Table
    By dfx in forum JavaScript
    Replies: 1
    Last Post: 06-20-2005, 05:39 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
  •