Scrollable Content III named anchor page opens halfway down

[printman55]

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.

[jscheuer1]

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?

[printman55]

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.

[jscheuer1]

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:

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

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

[printman55]

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.

[jscheuer1]

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:

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:

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?

[printman55]

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

[jscheuer1]

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?

[printman55]

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.

[printman55]

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