scrollIntoView

[jaschulz]

I am trying to make scrollIntoView() work (with selected text in a div), but I am having no luck. I have put up a little demo that shows the problem. It's at:

http://www.wiseware.com/selectTest

FF is my main concern. Of course, I would be happy to find a solution that works in IE, too.

Thanks,

JAS

 

[Ascalonian]

Can you please provide more detail as to what exactly you are looking to do?

 

[vicvirk]

Are you basically trying to make the text area scroll to a specfic position when the button is clicked? Do you want a quick scroll or a smooth scroll, a quick scroll is pretty easy and it looks like you are doing way to much to achieve it...

<script language="javascript">
function scrollIt(pos) {
	document.getElementById("myText").scrollTop = pos;
}
</script>

<input type="button" value="1" onclick="scrollIt(0);">&nbsp;
<input type="button" value="2" onclick="scrollIt(125);">&nbsp;
<input type="button" value="3" onclick="scrollIt(400);">
<br /><br />

<div id="myText" style="width:500px;height:200px;overflow:auto;border:1px solid #000000;">
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam in sem. Vestibulum at dui sed mauris tincidunt laoreet. Sed vulputate cursus purus. In hac habitasse platea dictumst. Curabitur elit mauris, lobortis quis, vulputate in, sagittis vel, magna. Vestibulum tempor dolor bibendum neque. Cras malesuada, diam nec cursus consectetuer, magna dui dictum leo, ac congue massa justo et pede. In eget ipsum vel massa semper pulvinar. Nulla ante elit, sagittis in, volutpat sed, euismod quis, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam porttitor, mauris eget malesuada lacinia, leo ante vestibulum quam, non porta felis mauris et arcu. Donec id est vel mauris venenatis accumsan. Donec nibh risus, ultricies ac, iaculis non, faucibus eu, nibh. 
Donec non ligula. Nunc leo justo, tempus quis, ornare in, ullamcorper at, mauris. Quisque in lectus. Donec eu sem. Sed faucibus risus eu leo. Nullam purus magna, laoreet id, aliquet vitae, blandit vitae, lorem. Etiam bibendum iaculis enim. Nam vehicula facilisis libero. Donec cursus eros et neque. Pellentesque at ligula. Nulla lorem lectus, viverra sit amet, scelerisque at, dignissim vel, ipsum. Maecenas lacus turpis, sollicitudin et, auctor scelerisque, suscipit vitae, ligula. In hac habitasse platea dictumst. In vel sem at massa euismod faucibus. Integer volutpat tincidunt dolor. Ut feugiat luctus ipsum. Praesent dapibus vestibulum mi. Ut dapibus rhoncus metus. 
Pellentesque cursus nibh sit amet sapien. Donec in nulla. Vivamus in lacus ut quam consectetuer venenatis. Morbi congue. Nulla sodales odio vitae tellus. Vestibulum rutrum venenatis sem. Integer mattis ligula ac nisi. Phasellus et est. Integer semper, velit in tristique ornare, ligula metus interdum velit, eu auctor sem risus a tortor. Etiam tincidunt pede rhoncus risus. Phasellus vel nisl eu dolor pretium interdum. Maecenas aliquet rhoncus neque. Nulla dolor ipsum, semper laoreet, viverra nec, rhoncus eu, erat. Phasellus porta. Praesent ut arcu. 
</div>

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[jaschulz]

No, it's not that easy. I want to scroll some selected text (in an autoscroll div) so that it is visible. I can select it without difficulty, but I can not get the selected portion to scroll into view. All the code is visible in the demo I mentioned, but here is the important mehod:

function doSelect(textHead, textLength) {
if (document.selection) { // IE I haven't even tried to make this work yet. Can anyone show me what is required?
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('textDiv'));
range.select();
}
else if (window.getSelection) { // FF etc. This works.
getSelection().removeAllRanges();
var range = document.createRange();
var target = document.getElementById('textDiv');
var currentNode = target.firstChild;
while (textHead > currentNode.length) { // get anchorNode (where selected text begins)
textHead -= currentNode.length;
currentNode = currentNode.nextSibling;
}
var anchorNode = currentNode;
range.setStart(currentNode, textHead);
if ((textHead + textLength) > currentNode.length) { // if currentNode does not contain the end of selected text
textLength = (textHead + textLength) - currentNode.length;
textHead = 0;
currentNode = currentNode.nextSibling;
}
range.setEnd(currentNode, textHead + textLength);
getSelection().addRange(range);
var parentNode = target;
getSelection().anchorNode.parentNode.scrollIntoView(true); // doesn't work
}
}

thanks,

JAS