Scrolling div to top.

[shu745]

Hey all, I was hoping someone could help me with my situation. I have a page where I am using javascript to populate a div using the onClick method. So bacically you have like 'terms A', 'terms B', 'terms C' and if you click on them the <div id=term></div> will populate with a javascript string using the .innerHTML method.

My problem is if the div is so long that it has verflow, therefore has a scroll bar. Say the user has click 'terms A' and scrolled to the bottom of the div then clicks 'terms B'the div still stays scrolled to the bottom (assuming terms B content has overflow too). I need to have the div scrolled to the top. Does anyone have code that can do this or point me in the right direction?

I know I can use an iframe but i want to keep everything in one page.

Thanks peeps!
- Shu

 

[BillyRayPreachersSon]

I've not tried this, but it might work... set the innerHTML to be a blank string before setting the new content. That may be enough to fool most browsers into doing what you want.

An IE-only alternative is to use the "scrollIntoView" method... but I'd try the above hack first, as it may work in more browsers.

Hope this helps,
Dan

 

[shu745]

Hey BRPS, thank you for your suggestion, but this only seems to work if i put an alert in my clear out section. It seems it needs a pause in order to process.

Any suggestions?

Below is my code:

function changeContent(whichcontent,where) {
var wd = where; // specified div id

/******* first, clear out div ******/
var tmpContent = '&nbsp;';
if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById(wd):document.all.wd;
cross_el.innerHTML= tmpContent;
}
else if (document.layers){
document.w1.document.w2.document.write(tmpContent);
document.w1.document.w2.document.close();
}
//alert('cleared div');
/******* ******************* *******/

if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById(wd):document.all.wd;
cross_el.innerHTML= whichcontent;
}
else if (document.layers){
document.w1.document.w2.document.write(whichcontent);
document.w1.document.w2.document.close();
}
}

in HTML:
<a href="javascript:changeContent('hello','descriptions');">link</a>
<div id="descriptions" style="width:200px; height:100px;overflow:auto">
<!-- initial text before any link is clicked -->
Loading...
</div>

the above example will seem to work cuz the content populated to the div is so small but add enough to scroll and you'll see what a i mean my initial post.

Is there anyway i can add a delay of some sort between the code to clear out the div and where it is repopulated? Or maybe you know of a better solution..?

thanks for the help,
- shu

 

[BillyRayPreachersSon]

You can use a delay to set the actual innerHTML, yes... Something like this:

el.innerHTML = '';   // blank it out
setTimeout('el.innerHTML = \'new content here\'', 1000);   // wait 1 second before populating again

Of course, if 1 second (1000ms) works, you can reduce the number until you find a delay value that is right for you.

Hope this helps,
Dan

 

[CliveC]

I am not going to say that this can't be done as some genius usually figures a way. However my suggestion would be to not use overflow in your division but rely on the windows scroll bar and do this at the appropriate time:

window.scroll(0,0)



Clive

http://tubularity.com

http://PalliativeCareConsulting.org