Show position in a long page

**Ralph2** · 08-30-2009, 08:20 PM

A family web site I have cobbled together will have one "very" long page. I will use anchors to jump to specific years. (2009;2008;.......1970) One a user is in that section though it is difficult to know you are still in it.

So.. I am looking for some sort of script (?) that would show the current page in some sort of bar graph that I could scale and mark by year. Or a simple counter that would show "you are viewing year xxxx".

Thanks for any thoughts and direction on this
Ralph

**vwphillips** · 08-31-2009, 09:44 AM

Code:

<!-- Internet Explorer has to be in quirks mode, this comment just does that -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>'position:fixed' in Internet Explorer</title>
<style type="text/css">

 #fixed {
  position:fixed;
  _position:absolute;
  top:20px;
  _top:expression(eval(document.body.scrollTop)+20);
  left:0;
  margin:0;
  padding:0;
  background:lime;
 }
 /* if you want to emulate bottom:0;, use this:
 h1{
  position:fixed;
  _position:absolute;
  bottom:0;
  _top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
  background:red;
 */
</style>

<script type="text/javascript">
<!--
function Year(){
 ary=['','2009','2008','2007','2006','2005'];
 var top=zxcWWHS()[3];
 var f=document.getElementById('fixed');
 var as=zxcByClassName('anchor')
 for (var z0=0;z0<as.length;z0++){
  if (top<zxcPos(as[z0])[1]){
  f.innerHTML=ary[z0];
  break

  }
 }
}

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


function zxcWWHS(){
 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];
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}


//-->
</script>
<body>
<div id="fixed" >Fix</div>
<a class="anchor" >2009</a>
<div style="height:300px;" ></div>
<a class="anchor" >2008</a>
<div style="height:500px;" ></div>
<a class="anchor" >2007</a>
<div style="height:500px;" ></div>
<a class="anchor" >2006</a>
<div style="height:500px;" ></div>
<a class="anchor" >2005</a>
<div style="height:500px;" ></div>
<a class="anchor" >end</a>
</body>
<script  type="text/javascript">
<!--
setInterval('Year()',100)
//-->
</script></html>

**traq** · 08-31-2009, 11:30 PM

or... it would be simpler (and much more pleasant to browse, IMO) to just split your page into several pages by year. Your visitors would always know what year they're looking at, and your page would load faster as well.

...something to consider

**Ralph2** · 09-01-2009, 02:35 AM

Thanks..
This page will have the minutes of our little family group. The idea (mine) is that if it is all on one long page then it is easily searched for specific instances.. Anyway that was the idea. I agree separate pages by year are much easier on the eyes..

**Ralph2** · 09-01-2009, 03:30 AM

Thanks Vic.. that works really neat.. Now I just have to figure out how to use it

. You are using named anchors... something I will need to learn as well as how to move the anchor locations..

But.. this will work just great!

Thread: Show position in a long page

Thread Tools

Search Thread

Show position in a long page

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

Bookmarks

Bookmarks

Posting Permissions