Scrollable Content III named anchor page opens halfway down

[jscheuer1]

I had forgotten about that idea and was trying to get an exact pixel position from the elements in the scroller, but I was getting the wrong values. Perhaps this is due to the positioning involved, or I may have inadvertently been querying the wrong elements. I had an idea for one more try on this (exact pixel position). If it pans out it would be much better than a percentage, and I'll let you know. If not, I'm pretty sure quarters would work, as we can easily get the overall 'content height' or whatever, I was already doing that to get to the bottom, and then we could just multiply by .25, .5, or .75.

[jscheuer1]

OK, I was looking at the wrong elements. However, even when looking at the right ones, the Opera browser got it wrong (didn't move the scroller at all). Safari 3 Win IE 7 & 6 and FF 2 all gt it right though. So, since this method is preferable, when it works, I think we should go with it. Opera may catch up, and a fall back percentage system can be worked out for Opera if you like:

The script:

<script type="text/javascript">

/******************************************
* Scrollable content script III- © John Davenport Scheuer
* As first seen in: http://www.dynamicdrive.com/forums - membername: jscheuer1
* Very freely adapted from Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full original source code
* This notice must stay intact for legal use
******************************************/

////// No Need to Edit this Head Section ///////

var iens6=document.all||document.getElementById, moveupvar, movedownvar, speed, contentid, scrollerwidth, scrollerheight, scrollerborder, upimage, downimage, sidecontrols=0, bottomit=false;

function movedown(id, speed){
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
var contentheight=crossobj.offsetHeight;
if (parseInt(crossobj.style.top)-speed>=(contentheight*(-1)+crossobj.parentNode.offsetHeight+speed)){
crossobj.style.top=parseInt(crossobj.style.top)-speed+'px';
movedownvar=setTimeout("movedown('"+id+"', "+speed+")",20);
}
else
crossobj.style.top=(contentheight*(-1)+crossobj.parentNode.offsetHeight)+'px';
}

function moveup(id, speed){
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
if (parseInt(crossobj.style.top)+speed<=0){
crossobj.style.top=parseInt(crossobj.style.top)+speed+'px';
moveupvar=setTimeout("moveup('"+id+"', "+speed+")",20);
}
else
crossobj.style.top=0;
}

function textsizepoll(id){
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
var contentheight=crossobj.offsetHeight;
if (parseInt(crossobj.style.top)<(contentheight*(-1)+crossobj.parentNode.offsetHeight-9))
crossobj.style.top=contentheight*(-1)+crossobj.parentNode.offsetHeight-10+'px';
else if (parseInt(crossobj.style.top)>1)
crossobj.style.top=0;
}

function topwrite(){
if (iens6){
if(sidecontrols)
document.write('<table class="'+contentid+'" style="border-collapse:collapse;border:'+scrollerborder.join(' ')+';" ><tr><td><div class="'+contentid+'" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden;">\n');
else
document.write('<div class="'+contentid+'" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;border:'+scrollerborder.join(' ')+';overflow:hidden;">\n');
document.write('<div id="'+contentid+'" style="position:absolute;width:'+[scrollerwidth-5]+'px;left:0;top:0;">\n');
}
}

function bottomwrite(){
if (iens6){
document.write('<\/div><\/div>\n');
if(sidecontrols){
document.write('<\/td><td style="border-left:'+scrollerborder.join(' ')+';"><table style="height:'+scrollerheight+'px;border-collapse:collapse;"><tr><td style="text-align:left;height:48%;vertical-align:top;">\n');
document.write('<a href="javascript:void(0);" onmouseover="moveup(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(moveupvar)"><img class="uparrow" style="padding:1ex;" src="'+upimage+'" border="0"><\/a><\/td><\/tr><tr><td style="text-align:left;height:48%;vertical-align:bottom;"><a href="javascript:void(0);" onmouseover="movedown(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(movedownvar)"><img class="downarrow" style="padding:1ex;padding-bottom:.75ex;" src="'+downimage+'" border="0"><\/a><\/td><\/tr>\n');
document.write('<\/table><\/td><\/tr></table>\n');
}
else {
document.write('<table class="'+contentid+'" style="width:'+scrollerwidth+'px;"><td style="text-align:right;height:1em;">\n');
document.write('<a href="javascript:void(0);" onmouseover="moveup(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(moveupvar)"><img class="uparrow" style="padding:1ex .5ex 1ex 1ex;" src="'+upimage+'" border="0"><\/a>  <a href="javascript:void(0);" onmouseover="movedown(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(movedownvar)"><img class="downarrow" style="padding:1ex 1ex 1ex .5ex;" src="'+downimage+'" border="0"><\/a><\/td><\/tr>\n');
document.write('<\/table>\n');
}
if(!window.opera){
setInterval("textsizepoll('"+contentid+"')", 700);
}
if(bottomit){
var crossobj=document.getElementById? document.getElementById(contentid) : document.all? document.all[contentid] : null;
var targ=document.getElementById? document.getElementById(bottomit) : document.all? document.all[bottomit] : null;
var moveit=function(){
//if(window.opera){
//crossobj.style.top= crossobj.offsetHeight*-1*bottomit;
//return;
//}
var loc=findTop(targ)*-1 + findTop(crossobj);
crossobj.style.top= loc +'px';
};
setTimeout(moveit, 300);
}
}
}

function findTop(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return curtop;
}

</script>

The call:

// * Scrollable content script III scroller module * configure this scroller:

//specify speed of scroller (greater=faster)
speed=6;
//specify unique content id * REQUIRED FOR EACH SCROLLER *
contentid="content-Food";
//specify scroller width
scrollerwidth=175;
//specify scroller height
scrollerheight=175;
//specify scroller border [width, style, color]
scrollerborder=['none'];
//specify location of controls, 1 for side, 0 for bottom
sidecontrols=0;
//specify control images
upimage="../Images-New/up.gif";
downimage="../Images-New/down.gif";
bottomit='Center';
//if(window.opera)
//bottomit=0.25;

In both the script and the call, I've left in the Opera fall back, but commented it out (highlighted green). To use it, remove all of the // marks at the beginning of the green lines.


Where you put your:

<a name="Center" id="Center"></a>

tag may need to be in a slightly different location than you had at first imagined. I found it worked out well if it was a little above the point that you wanted to get to.

Also - You can no longer link to the page with #Center. It will throw things off.

[printman55]

Awesome!! This works like I wanted it to. Here is the link to the page I set up with the new code: The only issue is the jumping of the scroll area on load. Is there anything to do to correct that?

[jscheuer1]

It wasn't doing that for me, at least nowhere as noticeably. I only had one hop, you seem to have two. I'll have to look at your code, and see. But it might be something that happens once it is live. Shouldn't be though.

[jscheuer1]

OK, I see, when I said:

Where you put your:

<a name="Center" id="Center"></a>

tag may need to be in a slightly different location than you had at first imagined. I found it worked out well if it was a little above the point that you wanted to get to.

I wasn't as clear as I meant to be. It can go quite a ways above the point that you want to get to, more like (this actually worked well):

 . . . ind.html">ALDI Food Distribution Facility<br />
South Windsor, Connecticut


</a><br /><br />

<a href="FC-Aldi-Tully.html">ALDI Freezer/Cooler Expansion &<br>
Office Renovation<br /><a name="Center" id="Center"></a>
Tully, New York
<br />
</a><br />
<a href="FC-Aldi-Salis.html">ALDI Food Distribution Expansion<br />
Salisbury, North Carolina
<br />
</a>

<br />
<a href="FC-Aldi-Spring.html">ALDI Food Distribution Facility<br />
Springfield, Ohio

<br />
</a>
<br />
<span class="ParaText11-black"><strong>ALDI Warehouse & Freezer
Expansion & Renovation<br />
Center Valley, Pennsylvania</strong></a><br /></span><img src="../Images-New/shim.gif" width="5" height="8" /><br />
<!--END CONTENT-->
</div>

Basically, it is going to scroll the top of the scroller to that point. If that point is too far down, the scroller will auto adjust to the bottom. By placing it where I suggest, this will bring the the scroller content to the bottom with only one hop.

[jscheuer1]

I have another idea. To make this more intuitive, we could add (in the main script):

var loc=findTop(targ)*-1 + findTop(crossobj)+crossobj.parentNode.offsetHeight;

That way, you can place the anchor here:

<span class="ParaText11-black"><strong>ALDI Warehouse & Freezer
Expansion & Renovation<br />
Center Valley, Pennsylvania</strong></a><br /></span><img src="../Images-New/shim.gif" width="5" height="8" /><br />
<a name="Center" id="Center"></a>
<!--END CONTENT-->
</div>

to get to the bottom.

[printman55]

That is much better!! Here is the link:
That eliminates almost all of the hop. I would asume that is good as it gets??

[jscheuer1]

You put this:

var loc=findTop(targ)*-1 + findTop(crossobj)+crossobj.parentNode.offsetHeight;

in the wrong spot here:

<script type="text/javascript">

/******************************************
* Scrollable content script III- © John Davenport Scheuer
* As first seen in: http://www.dynamicdrive.com/forums - membername: jscheuer1
* Very freely adapted from Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full original source code
* This notice must stay intact for legal use
******************************************/

////// No Need to Edit this Head Section ///////
var loc=findTop(targ)*-1 + findTop(crossobj)+crossobj.parentNode.offsetHeight;

var iens6=document.all||docum . . .

It should have replaced this line (near the bottom of the main script):

if(bottomit){
var crossobj=document.getElementById? document.getElementById(contentid) : document.all? document.all[contentid] : null;
var targ=document.getElementById? document.getElementById(bottomit) : document.all? document.all[bottomit] : null;
var moveit=function(){
//if(window.opera){
//crossobj.style.top= crossobj.offsetHeight*-1*bottomit;
//return;
//}
var loc=findTop(targ)*-1 + findTop(crossobj);
crossobj.style.top= loc +'px';
};
setTimeout(moveit, 300);
}
}
}

[printman55]

I tried adding the code:
var loc=findTop(targ)*-1 + findTop(crossobj)+crossobj.parentNode.offsetHeight;
in the head section, but it deactivated the scroller entirely.

[printman55]

I think I got it in the right location this time. Link I jumps at about the same rate the page loads. What do you think?