Scrollable Content III named anchor page opens halfway down

1) Script Title: Scrollable Content III

2) Script URL (on DD): http://home.comcast.net/~jscheuer1/s...side_table.htm

3) Describe problem: I'm actually using Scrollable Content III as it is easier to work with than III. The problem I'm having is linking to a page that has the scrollbar and one of the items in the scroll content area uses a named anchor so when one accesses the page the scroll area will show that anchor location in the scroll area. The technique works fine on large monitors set to high resolution. However, if a user has a monitor set to 800 x 600 (extreme example) the page opens about 3/4 of the way down. Is there a way to make the page open at the top and when the user scrolls down on the page the scroll area shows up with the content in the anchor position??
Certainly would appreciate any help.

Quote:

---

Originally Posted by printman55

I'm actually using Scrollable Content III as it is easier to work with than III.

---

What are you using? III rather than III? Named anchors and scrollers don't go together very well. It might work in one browser, and not in another. Since you are already using javascript, perhaps a javascript method combined with the characteristics/methods of the scroller would be better.

Please post a link to the page on your site that contains the problematic code so we can check it out.

How many browsers have you tested in?

I'm using III rather than II, I got carried away with the I's. :) The link is:

I only tested it in IE as that what the client runs. I'm open to using an alternative to anchors. Thanks so much for making the III version as it is so much easier to use. I utilized it on another page with three scroll areas and it works super! Here is the link to that page. By the way I was unable to to get the scroll areas closer to the footer on that page. Any tips here?


Thanks for any help.

OK, so I'm thinking that the anchor was only to scroll the scroller to the bottom when the page loads. If so, get rid of it. It messes up in other browsers, just as I suspected, and as you pointed out even in IE if the screen is too short. Use this modified version of the script:

Code:

---

<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 moveit=function(){var contentheight=crossobj.offsetHeight;
crossobj.style.top=(contentheight*(-1)+crossobj.parentNode.offsetHeight)+'px';};
setTimeout(moveit, 300);
}
}
}

</script>

---

And use this for the 'in the body' config part (leave the rest of the 'in the body' code as is (changes/additions highlighted):

Code:

---

//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=true;

---

Notes: I only changed the border setting because, just like in css, specifying no border requires using the none value. If you do use another scroller on the same page and don't want it to start at the bottom, set its:

bottomit=false;

I don't necessarily want the scroller to open at the bottom. As you can see from the scroller content list there are a number of links. What I am seeking is a way to make desired link appear in the middle of the scroll area. This page is the source page that links to each individual page which would have the same scroll content except that the darkend text would be the selected link. That way the user would know where in the list they were. To see what I mean under the far right scroll area "Food/Cold Storage" scroll halfway down to a link and click to the object page. The list on the left column shows the darked text that is representative of the particular selected page. This list will be the Scroll III content and the view size will be greatly shortened.
Thanks.

Ah, I see. I will give this some more thought, but I think you may be using more scrolling content than you need. In any case, due to varying font sizes in the various user's browsers, scrolling to a particular point will be difficult, perhaps impossible. Maybe using a percentage somehow. As I say, I will give it some thought.

But this page looks fine:

Code:

---

http://www.amkingconstruction.com/New_Warehouse_Charlotte_NC_US_Commercial_Construction_Distribution_Office_Retail_Cold_Storage/FC-Aldi-Salis.html

---

Once a user has used one of the scrollers on:

Code:

---

http://www.amkingconstruction.com/New_Warehouse_Charlotte_NC_US_Commercial_Construction_Distribution_Office_Retail_Cold_Storage/MP-Home-Test2.html

---

to navigate to one of the sub-topics, why do you even need a scroller on that destination page?

The reason is when I double the list of projects on the destination page the resultant list woud be too long and the user would have to scroll dow too much. Using the scroll area thus allows me to grreatly reduce the height of the page.
Thanks

I was afraid it might be something like that. As I said, I will give this some more thought, and have in fact already been brainstorming on it.

What I want to know is - it appears to me that each page you would link to where you want the scroller to be in a particular state of scroll would be unique. In other words, there would be no reason to need to pass the spot in the scroller that you want it to go to, in the link to the page that has that scroller on it. You were just trying to doing it that way because you didn't have any other idea how to do it, right?

That is correct. Hence the use of named anchor tags which does this except with the inherent problem of opening in the middle of the page with lower resolution monitor setups. Each distinct destination page could use code that showed a percentage down or up that would show the desired highlighted text if that is a possibility.
Thanks.

The percentage idea would work. Maybe have the capability to open in quarters?

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.

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:

Code:

---

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

Code:

---

// * 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:

HTML Code:

---

<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.

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?

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.

OK, I see, when I said:

Quote:

---

Where you put your:

HTML Code:

---

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

Code:

---

. . . 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.

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

Code:

---

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

---

That way, you can place the anchor here:

Code:

---

<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.

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

You put this:

Code:

---

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

---

in the wrong spot here:

Code:

---

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

Code:

---

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);
}
}
}

---

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.

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?

Looks good to me. There is no noticeable jump that I can see either. I mean if you know to look for it, you can catch it, but it goes by so fast, it is hard to tell. I really didn't want to have any delay in this (I used a 300 millisecond delay) a little less than a third of a second though, because IE appeared to need that time to orient on the newly created elements. Technically speaking, it shouldn't because they are already drawn before we ask the browser to do this, but that's IE. Others didn't appear to require any delay.

Would the percentage method make a difference in the way it loads?

Not on the face of it, but if we set the percent as the top value before the contents were drawn, yes. However, the problem with percent is that the position it will arrive at varies greatly depending upon the user's text size settings (except in Opera again, which uses only photo real zoom to resize pages, which is why a percent fall back for it will work, if calculated by trial and error in that browser). The current method relies on the actual pixel measurements we make once the actual content is loaded, so will be precise regardless of the text size.

I experimented a little and changed:
setTimeout(moveit, 100); 300 to 100
It makes a big difference!

John,
I just wanted to thank you for all your great help. This is an awesome site and the support is incredible.
Steve