alternative scrolling

[japi]

Hi,

In my webpage I have an embedded Windows Media Player and an unordered
list with a table of contents.

When playing a video, the Windows Media Player is triggering events for
new 'chapters'.

The corresponding chapter in the unordered list is then highlighted
with css.

The list can contain up tot 100+ items. Because the page itself should
fit the screen without scrolling, i put the list in a scrolling div.

I also want the div to scroll automatically in order to keep the
current chapter inside the visible scope of the div.

Right now i do this by initually creating an anchor for each listitem.
When an chapterswitch event occurs i scroll to the corresponding
chapter with the folling line of Javascript code:

window.location = "#" + ListItemId;

There is one problem; the annoying tick sounds in IE. For my
application it is not rare to have 25 'chapters' switched in one
minute, so that's an awful lot of ticking.

I was wondering if it is possible to automatically scroll up or down to
a specific point in a div without the browser making any sounds.

Any help is appreciated.

Thank you,
Jaap Vossers

 

[Martin Honnen]

japi wrote:

window.location = "#" + ListItemId;

I was wondering if it is possible to automatically scroll up or down to
a specific point in a div without the browser making any sounds.

Try what
var listItem = document.getElementById(ListItemId);
if (listItem && listItem.scrollIntoView) {
listItem.scrollIntoView(true);
}
achieves, I am not sure at the moment what happens when that element the
method is called on sits in a scrollable container but it might do what
you want.
Please report back in the group whether the above does what you want.

If the above approach does not help (as it might scroll the whole
document and perhaps your movie out of view) then you can certainly
scroll the div by script e.g. if you have a variable with the div
element then you can set
divElement.scrollTop = numberValue;
to scroll the element.

 

[RobG]

japi wrote:
[...]

Right now i do this by initually creating an anchor for each listitem.
When an chapterswitch event occurs i scroll to the corresponding
chapter with the folling line of Javascript code:

window.location = "#" + ListItemId;

There is one problem; the annoying tick sounds in IE. For my
application it is not rare to have 25 'chapters' switched in one
minute, so that's an awful lot of ticking.

I was wondering if it is possible to automatically scroll up or down to
a specific point in a div without the browser making any sounds.

Try to do it without using an anchor and actually scroll the div. Some
useful pointers to scrollTop:

<URL:http://www.mozilla.org/docs/dom/domref/scrollTop.html#Example>

To find the distance from the top of the div to your anchor, use the
stuff here:

<URL:http://www.quirksmode.org/js/findpos.html>

Or just try this:

<script type="text/javascript">

function scrollTo( eID, dID )
{
var e = document.getElementById(eID);
var d = document.getElementById(dID);
d.scrollTop = getTop(e) - getTop(d) - 16;
}

// From quirksmode
function getTop(el)
{
var curtop = 0;
if (el.offsetParent) {
while (el.offsetParent) {
curtop += el.offsetTop
el = el.offsetParent;
}
} else if (el.y) {
curtop += el.y;
}
return curtop;
}
</script>


<span style="cursor: pointer; text-decoration: underline;"
onclick="scrollTo('link-01','sDiv');">Lorem
ipsum</span><br>
<span style="cursor: pointer; text-decoration: underline;"
onclick="scrollTo('link-02','sDiv');">Nulla
facilisi</span>

<div id="sDiv" style="position: absolute; height: 10em;
width: 20em; overflow: scroll; top: 100px; left: 20px;
border: 1px solid blue;">

<p><span id="link-01"><b>Lorem ipsum</b></span> dolor sit amet,
consectetuer adipiscing elit. Suspendisse nisl. Sed ut magna quis
metus imperdiet feugiat. Aliquam erat volutpat. Aenean tincidunt
elit non ante mattis tincidunt. Vivamus vitae mauris vitae augue
ultricies viverra. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Duis convallis.</p>

<p>Quisque porta, massa eget malesuada euismod, justo velit hendrerit
neque, sit amet sodales orci dolor ut magna. Nullam blandit, metus
et varius dignissim, lorem ipsum feugiat velit, ut vehicula orci
nibh eu neque. Praesent lacinia, libero quis congue commodo, ante
nulla pulvinar nunc, quis mattis augue lacus vitae nisi.</p>

<p><span id="link-02"><b>Nulla facilisi.</b></span> Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Nullam at ipsum id libero
imperdiet tempor. Ut leo. Suspendisse quis sem sed mi varius
vehicula. Nulla erat. Nullam lacinia, augue at posuere tempor, enim
magna aliquam pede, quis dapibus lacus nunc ut lacus.</p>

<p>Suspendisse volutpat sodales justo. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Duis
quis sapien. Quisque sem enim, ultrices ut, faucibus id, condimentum
in, ligula. Nam lobortis nunc sit amet lectus. Pellentesque eu ante
nec quam vulputate pharetra. Vestibulum tristique vehicula
lectus</p></div>


[...]

 

[japi]

It works perfectly! Also inside a container.

I had not heard of scrollIntoView before.

Thank your very much Martin!