I looked at this the other day when you posted it, but then a tumbleweed drifted by and I got distracted.
Basically, what you need here is a way to get the top offset property of the item you want to focus, and then set that to be visible by modifying the style.top property of your inner (scrolling) DIV.
So on the Perfect Glue page, this little ditty does the trick:
$('PackageMenuContent1').setStyle({top:-$$('#PackageMenuContent1 strong').first().positionedOffset()[1]+'px'})
Here’s how it works. PackageMenuContent1 is the inner DIV that you are scrolling with the buttons.
You already have Prototype.js on the page for something else, so we use the Prototype convention $(‘div-id’) to grab that DIV, then apply the setStyle function to it, and pass that function an object with the name of the property we want to set (top) and the value we want to set it to (the positionedOffset#height of the first < strong > tag inside the PackageMenuContent1 DIV).
If you had used a different construction, maybe an unordered list or similar, then there would be a different rule to select it, but the basic principle would stand.
More detail:
The double-dollar $$() selector always returns an array of found objects, even if it finds only one, so the first() function is chained after it to grab only the first instance.
positionedOffset() returns an array, with the left in the first index, and the top in the second. So in this case we get the second item in the array with [1].
This function will return the offset relative to the nearest positioned ancestor, which in this case would be the outer DIV (PackageMenuWindow1), so that gets us the distance we need to scroll down in pixels, but leaves off the pixels units, so we add those on with a simple string concatenation (the + operator).
The reason I’ve gone through all of this in such detail is so that you can fix it up on the other pages. I haven’t looked at any others, and I don’t know if they have the same names for the elements. It’s critical to use the correct names in all of these selectors.
Oh, and to get this to fire when the page loads, you have two basic options. One would be to simply put the script at the bottom of the page. Use Page > HTML Markup, and choose the Before /body slot. Add a script tag and paste this code into it, like this:
<script type="text/javascript">
$('PackageMenuContent1').setStyle({top:-$$('#PackageMenuContent1 strong').first().positionedOffset()[1]+'px'})
</script>
The other would be to use an unobtrusive listener in the head of the page. The following code runs after the page has loaded into the browser, but before anything appears on screen.
<script type="text/javascript">
document.observe('dom:loaded',function(){
$('PackageMenuContent1').setStyle({top:-$$('#PackageMenuContent1 strong').first().positionedOffset()[1]+'px'})
});
</script>
Let me know how this works out, your site looks really nice, and you’re right – I think this will do that last little bit to make your navigation work.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
